AJAX를 사용하여 HTML5 및 CSS3 프로그래밍 용 프로그램 만들기

AJAX를 사용하여 HTML5 및 CSS3 프로그래밍 용 앱 만들기 - 인형

요즘에는 누구나 모바일 앱을 만들고 싶어합니다. 여기에 큰 비밀이 있습니다. 많은 앱이 실제로 HTML5, CSS 및 자바 스크립트로 작성됩니다. 모바일 장치에서 작동하는 앱을 만드는 데 필요한 모든 것을 이미 알고 있습니다. 더 나아가 네이티브 앱처럼 새로운 언어를 배우거나 앱 스토어에서 허가를 받거나 라이센스를 구입할 필요가 없습니다.

iOS 사용자를 위해 할 수있는 몇 가지 유용한 트릭이 있습니다. 사용자가 바탕 화면에 직접 아이콘을 추가 할 수 있도록 프로그램을 설계 할 수 있습니다. 사용자는 다른 프로그램과 마찬가지로 프로그램을 시작할 수 있습니다. 브라우저가 일반 브라우저 장치를 숨기도록하여 프로그램이 브라우저에서 실행중인 것처럼 보이지 않도록 할 수도 있습니다!

이 효과는 매우 쉽게 나타납니다.

프로그램에 아이콘 추가

iOS의 최신 버전 (iPhone / iPad 운영 체제)에는 이미 데스크톱에 웹 페이지를 저장할 수있는 기능이 있습니다. Safari에서 웹 페이지를보고 Share (공유) 버튼을 클릭하십시오. 웹 페이지를 바탕 화면에 저장하는 옵션을 찾을 수 있습니다. 사용자가이를 수행하도록 지시 할 수 있으며 일반 앱처럼 프로그램을 시작할 수 있습니다.

그러나 저장된 앱의 기본 아이콘은보기 흉합니다. 멋진 아이콘을 원한다면 작은 이미지를 a로 저장하면됩니다. png 파일을 만들고 프로그램과 동일한 디렉토리에 넣으십시오. 그런 다음이 행을 페이지의 머리글에 추가하면 사용자가 프로그램을 저장할 때 해당 이미지가 바탕 화면에 나타납니다.

추가 보너스로 iPhone 또는 iPad가 자동으로 이미지를 Apple 아이콘, 설치된 iOS 버전에 적합한 효과 추가 (iOS7에서는 반올림 및 유리 효과가 있음, iOS7에서는 평평함)

물론이 아이콘 트릭은 Apple 전용 메커니즘입니다. 대부분의 Android 버전에서는 기본 브라우저로 지정한 모든 북마크를 데스크톱에 추가 할 수 있지만 맞춤 아이콘 옵션은 없습니다. apple-touch-icon 지시문은 다른 OS를 사용하는 경우 무시됩니다.

Safari 도구 모음 제거

프로그램이 기본 화면에서 잘 보이지만 사용자가 프로그램을 활성화하면 프로그램이 웹 브라우저의 일부임을 여전히 알 수 있습니다. 머리글의 다른 줄을 사용하여 브라우저 도구 모음을 쉽게 숨길 수 있습니다.

이 코드는 프로그램이 바탕 화면에서 호출되지 않으면 다른 작업을 수행하지 않습니다. 그러나이 경우 도구 모음이 숨겨져 프로그램의 모양과 느낌이 본격적으로 변경됩니다. 추가 보너스로 전체 화면 모드에서 프로그램을 실행하므로 게임 플레이를위한 공간을 조금 더 확보 할 수 있습니다.

다시 말하지만, 이것은 Apple 전용 솔루션입니다. Android 기기에서 동일한 효과를 얻을 수있는 쉬운 방법은 없습니다.

오프라인에서 프로그램 저장

이제 프로그램은 인터넷에 연결되어있을 때만 실행된다는 점을 제외하고는 앱과 매우 흡사합니다. HTML5에는 처음 실행될 때 전체 웹 페이지를 로컬에 저장할 수있는 멋진 기능이 있습니다.

그러면 사용자가 프로그램에 액세스하려고 시도하고 시스템이 온라인 상태가 될 수 없으면 대신 게임의 로컬 복사본이 실행됩니다. 본질적으로 프로그램은 처음 활성화 될 때 다운로드되어 로컬 장치에 남아 있습니다.

프로그램을 안정적으로 만드십시오 :

  • 오프라인 저장 장치를 사용하려면 먼저 프로그램이 출시 준비가 된 상태인지 확인하십시오. 최소한 게임에 필요한 모든 외부 파일을 알고 있어야합니다. 로컬 리소스 만 사용하십시오.

  • 이러한 종류의 프로젝트에서는 외부 인터넷에 의존 할 수 없기 때문에 모든 파일을 로컬로 가져와야합니다. 이것은 PHP 나 외부 파일을 실제로 사용할 수 없다는 것을 의미합니다. 서버의 모든 항목에 대한 로컬 복사본이 있어야합니다. 카스를 만드십시오. manifest 파일 :

  • 게임이 들어있는 디렉토리를보고 새 텍스트 파일을 만듭니다. 첫 번째 줄 쓰기 :

  • 캐시의 첫 번째 줄. 매니페스트 파일에는 CACHE MANIFEST 텍스트 만 포함해야합니다 (모두 대문자로 표시). 디렉토리의 모든 파일 목록을 만듭니다.

  • 디렉토리에있는 모든 파일의 이름을 한 줄에 하나씩 씁니다. 대소 문자와 철자에주의하십시오. 매니페스트 특성을 추가합니다.

  • 태그에 manifest라는 새 특성이 있습니다. 캐시 매니페스트가있는 서버를 설명하려면 정상적으로 페이지로드 :

  • 정상적인 방법으로 웹 페이지를 한 번로드해야합니다. 모두 올바르게 설정되면 브라우저는 자동으로 파일 사본을 만듭니다. 오프라인 테스트 :

  • 오프라인 스토리지를 테스트하는 가장 좋은 방법은 기기에서 무선 액세스를 일시적으로 끄고 파일에 액세스하는 것입니다. 문제가 해결되면 온라인 상태 인 것처럼 페이지를 볼 수 있습니다. 서버 설정 확인 :

  • 오프라인 저장소가 작동하지 않는 경우 서버 관리에 문의해야 할 수 있습니다. 텍스트 / 매니페스트 MIME 유형을 서버에 구성해야합니다. 서버 관리자에게에이 옵션을 설정하도록 요청해야 할 수도 있습니다. 귀하의 계정에 대한 htaccess 파일 : addtype text / cache-manifest. manifest

     캐시 매니페스트 메커니즘은 변경 사항을 인식하는 데 몇 시간이 걸릴 수 있으므로 페이지를 변경할 때 이러한 변경 사항은 자동으로 로컬 브라우저로 업데이트되지 않습니다. 따라서 프로젝트 개발주기가 끝날 무렵에 오프라인 아카이브를 저장하는 것이 가장 좋습니다.