키 포인트
응용 프로그램 캐시 매니페스트에 매니페스트 파일이 포함되어 있지 않으므로 웹 사이트에 새 캐시 파일을 사용할 수 있음을 거의 알 수없는 루프를 만들 수 있습니다.
는 AppCache가 올바르게 실행되도록 서버의 .htaccess 파일에서 항상 응용 프로그램 유형을 설정합니다. 미디어 유형이 설정되지 않으면 AppCache가 작동하지 않습니다.
Manifest 파일에 지정된 개별 파일 중 어느 것도 찾을 수 없거나 다운로드 할 수없는 경우 전체 매니페스트 파일을 폐기합니다. 이것은 AppCache의 특별한 행동입니다.
웹 사이트를 업데이트 한 후에는 항상 매니페스트 파일을 업데이트하십시오. 그렇지 않으면 사용자는 변경 사항이 표시되지 않으며 이전에 캐시 된 데이터 만 볼 수 있습니다. Manifest 파일의 주석에서 버전 번호 또는 날짜를 업데이트하여 사용자의 웹 브라우저가 새 버전의 Manifest 파일을 다운로드하도록 강요 할 수 있습니다. -
html5 응용 프로그램 캐싱 (AppCache라고도 함)은 최근 웹 개발자에게 인기있는 주제가되었습니다. AppCache를 사용하면 웹 사이트 방문자가 오프라인에서 웹 사이트를 탐색 할 수 있습니다. 이미지, 스타일 시트 또는 웹 글꼴과 같은 웹 사이트의 일부를 사용자의 컴퓨터의 캐시에 저장할 수도 있습니다. 이를 통해 웹 사이트가 더 빨리로드되면 서버의 부하가 줄어 듭니다. -
AppCache를 사용하려면 확장자 "AppCache"가있는 매니페스트 파일을 만들 수 있습니다 : Manifest.appcache. 이 파일에서는 모든 파일을 캐시에 나열 할 수 있습니다. 사이트에서이를 활성화하려면 아래와 같이 HTML 요소의 웹 페이지에 매니페스트 파일에 대한 참조를 포함시켜야합니다.
이것은 샘플 매니페스트 파일입니다 :
-
AppCache의 이점 외에도 사용자 경험을 방해하지 않고 앱을 파괴하기 위해 피해야 할 몇 가지 일반적인 함정이 있습니다.
Manifest 파일에 매니페스트 파일을 나열하지 마십시오
애플리케이션 캐시 매니페스트에 매니페스트 파일 자체를 포함 시키면 웹 사이트에 새로운 캐시 파일이 있음을 거의 알리지 않고 새 캐시 파일을 다운로드하여 사용해야합니다. 기존 매니페스트 파일 대신. 그러므로 다음과 같은 실수를하지 않도록주의하십시오.
캐시 페이지의 끊임없는 리소스가로드되지 않습니다
이것은 AppCache를 처음으로 사용할 때 매우 일반적인 실수입니다. 이곳은 매니페스트 파일의 네트워크 플래그가 작동하는 곳입니다. 매니페스트 파일의 네트워크 섹션은 웹 응용 프로그램이 온라인으로 액세스하는 데 필요한 리소스를 지정합니다.
네트워크 플래그 아래에 지정된 URL은 기본적으로 "화이트리스트"입니다. 즉,이 플래그 아래에 지정된 파일은 인터넷 연결이있을 때 항상 서버에서로드됩니다. 예를 들어, 다음 코드 스 니펫은 / API / 서브 트리에 포함 된로드 리소스에 대한 요청이 캐시가 아닌 네트워크에서 항상로드되도록합니다.
<code class="language-html"></code>
항상 서버의 .htaccess 파일에서 응용 프로그램 유형을 설정하십시오.
매니페스트 파일은 항상 올바른 미디어 유형 텍스트/캐시-관리하에 제공되어야합니다. 미디어 유형이 설정되지 않으면 AppCache가 작동하지 않습니다.
프로덕션 서버의 .htaccess 파일에 항상 구성되어야합니다. 이것은 AppCache를 설명하는 대부분의 자습서에서 언급되지만 많은 개발자는 개발 서버에서 프로덕션 서버로 웹 응용 프로그램을 마이그레이션 할 때이를 무시합니다.
Apache의 .htaccess 파일에 다음을 입력하십시오
앱을 Google App Engine에 업로드하면 app.yaml 파일에 다음 스 니펫을 추가하여 동일한 작업을 수행 할 수 있습니다.
파일을 찾을 수 없기 때문에 전체 목록을 버리지 않도록하십시오.
Manifest 파일에 지정된 개별 파일 중 어느 것도 찾을 수 없거나 다운로드 할 수없는 경우 전체 매니페스트 파일이 폐기됩니다. 이것은 AppCache의 이상한 행동으로 AppCache를 사용하는 웹 응용 프로그램을 설계 할 때 명심해야합니다.
예 :
로고를 삭제하면 AppCache는 삭제 된 이미지 파일을 찾을 수 없으므로 Manifest 파일의 어느 것도 실행되지 않습니다.
온라인에서도 데이터가 AppCache에서로드됩니다
웹 브라우저가 캐시 매니페스트 파일을 저장하면 사용자가 인터넷에 연결되어 있어도 캐시에서 파일이로드됩니다. 이 기능은 웹 사이트의로드 속도를 높이고 서버로드를 줄이는 데 도움이됩니다. <code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js
NETWORK:
*
FALLBACK:
/server/ /fallback.html</code>
매니페스트 파일이 업데이트 될 때까지 서버의 변경 사항이 발생하지 않습니다.
는 이전 시점에서 사용자가 온라인 상태이더라도 AppCache에서 데이터가로드 될 것이라는 것을 알았 기 때문에 Manifest 파일이 업데이트 될 때까지 웹 사이트 또는 서버의 파일 변경이 발생하지 않습니다.
웹 사이트를 업데이트 한 후에는 항상 매니페스트 파일을 업데이트해야합니다. 그렇지 않으면 사용자가 변경 사항을 볼 수 없으므로 이전에 캐시 된 데이터 만 볼 수 있습니다. Manifest 파일의 주석에서 버전 번호 또는 날짜를 업데이트하여 사용자의 웹 브라우저가 새 버전의 Manifest 파일을 다운로드하도록 강요 할 수 있습니다. 예를 들어, 웹 사이트를 변경하기 전에 목록 파일을 사용하는 경우 :
<code>CACHE MANIFEST
# 2015-01-23 v0.1
manifest.appcache
page2.css</code>
사용자의 브라우저가 매니페스트 파일의 새 사본을 다운로드 할 수 있도록 다음 코드 블록과 유사한 것으로 변경할 수 있습니다.
#로 시작하는 줄은 실행되지 않을 댓글 줄입니다.
매니페스트 파일은 호스트와 동일한 소스에서 제공되어야합니다.
매니페스트 파일은 다른 도메인에서 캐시 할 리소스에 대한 참조를 보유 할 수 있지만 호스트 페이지와 동일한 소스에서 웹 브라우저에 제공되어야합니다. 그렇지 않은 경우 매니페스트 파일이로드되지 않습니다. 예를 들어, 다음 매니페스트 파일이 정확합니다
여기서는 다른 도메인에서 참조되는 사용자의 브라우저 캐시에 저장하려는 내용을 지정합니다. List URL 에 대한 상대 URL
주목해야 할 중요한 사항 중 하나는 Manifest에서 언급 한 상대 URL이 Manifest 파일을 참조하는 문서와 관련이없는 Manifest 파일과 관련이 있다는 것입니다. 매니페스트와 참조가 동일한 경로에 있지 않으면 리소스가로드되지 않고 매니페스트 파일이로드되지 않습니다.
응용 프로그램 구조가 다음과 같이 보이는 경우 :
그러면 매니페스트 파일이 다음과 같이 보일 것입니다 :
점검 목록의 상태를 프로그래밍 방식으로 확인하십시오
는 응용 프로그램이 Window.applicationCache.status를 테스트하여 업데이트 된 캐시 매니페스트 버전을 사용하고 있는지 프로그래밍 방식으로 확인할 수 있습니다. 다음은 몇 가지 샘플 코드입니다. <code class="language-html"></code>
웹 사이트에서 위의 코드를 실행하면 AppCache 목록에 대한 새로운 업데이트가 언제 사용할 수 있는지 알려줍니다. UpdateReady는 정의 된 상태입니다. OnupDatereAdy () 함수의 SwapCache () 메소드를 사용하여 이전 매니페스트 파일을 새로운 매니페스트 파일로 바꾸는 것도 할 수 있습니다.
<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js
NETWORK:
*
FALLBACK:
/server/ /fallback.html</code>
결론
AppCache는 유용한 기술이지만 프로젝트에서 구현할 때주의를 기울여야합니다. 개발자는 매니페스트 파일에 포함되어야 할 사항을 선택적으로 선택해야합니다. 이상적으로는 매니페스트 파일에는 스타일 시트, 스크립트, 웹 글꼴 및 이미지와 같은 정적 컨텐츠가 포함되어야합니다. 그러나 당신은 항상 매니페스트 파일에 포함 된 내용을 가장 잘 판단합니다. AppCache는 양날의 검이므로 사용할 때주의하십시오!
위의 내용 중 대부분은 다른 곳에서 소개되었으며 다른 핵심 사항이 있습니다. 자세한 내용은 다음 리소스를 확인할 수 있습니다.
MDN 의 애플리케이션 캐시 트랩
Jake Archibald의 앱 캐시는 바보입니다
제이크 아치 볼드의 오프라인 레시피
<code>CACHE MANIFEST
# 2015-01-23 v0.1
manifest.appcache
page2.css</code>
HTML5 Application Caching에 대한 FAQS (FAQ)
html5 응용 프로그램 캐싱이란 무엇이며 왜 중요한가요?
html5 Application Cache (AppCache)는 개발자가 브라우저에서 캐시해야 할 파일을 지정하고 사용자가 오프라인으로 사용할 수 있도록하는 기능입니다. 서버로드를 줄이고 대역폭을 저장하여 웹 애플리케이션의 성능을 향상시킬 수 있기 때문에 중요합니다. 또한 사용자가 오프라인 상태 인 경우에도 응용 프로그램을 실행할 수 있으므로 더 나은 사용자 경험을 제공합니다. <code>NETWORK:
/api</code>
HTML5 응용 프로그램 캐싱은 어떻게 작동합니까?
html5 응용 프로그램 캐싱은 Manifest 파일을 사용하여 작동합니다. 이 파일에는 브라우저가 오프라인 사용을 위해 캐시 해야하는 리소스가 나와 있습니다. 사용자가 웹 페이지에 액세스하면 브라우저는 Manifest 파일과 관련이 있는지 확인합니다. 그렇다면 브라우저는 나열된 리소스를 다운로드하여 저장합니다. 다음에 사용자가 웹 페이지를 방문 할 때 브라우저는 캐시 된 리소스를 서버에서 다운로드하는 대신로드합니다.
html5 응용 프로그램 캐싱을 사용할 때 일반적인 함정은 무엇입니까?
html5 응용 프로그램 캐싱을 사용하는 경우, 일부 일반적인 함정에는 다음이 포함됩니다 장치 저장.
이 함정을 피하는 방법?
이러한 함정을 피하기 위해 자원이 변경 될 때는 이러한 함정을 피하기 위해 항상 매니페스트 파일을 올바르게 업데이트하십시오. Manifest 파일의 네트워크 섹션을 사용하여 절대 캐시해서는 안되는 리소스를 지정하십시오. 또한 사용자의 장치 저장소를 고려하고 필요한 리소스 만 캐시하십시오.
HTML5 응용 프로그램 캐싱의 미래는 무엇입니까?
html5 애플리케이션 캐시가 더 이상 사용되지 않고 서비스 작업자로 대체됩니다. 서비스 근로자는 캐시를보다 잘 통제 할 수 있으며보다 복잡한 시나리오를 처리 할 수 있습니다. 그러나 서비스 작업자는 현재 모든 브라우저가 지원하지 않으므로 HTML5 응용 프로그램 캐싱을 이해하고 사용하는 것이 여전히 중요합니다.
매니페스트 파일을 만드는 방법은 무엇입니까?
매니페스트 파일은 캐시 할 리소스를 나열하는 간단한 텍스트 파일입니다. Mime Type "Text/Cache-Manifest"역할을해야합니다. 파일의 첫 번째 줄은 "캐시 매니페스트"이어야하고 캐시 할 리소스가이어야합니다.
웹 페이지를 매니페스트 파일과 연결하는 방법은 무엇입니까?
웹 페이지를 매니페스트 파일과 연결하려면 웹 페이지의 "HTML"태그에 "Manifest"속성을 추가하십시오. "Manifest"속성의 값은 Manifest 파일의 URL이어야합니다.
캐시를 업데이트하는 방법은 무엇입니까?
캐시를 업데이트하려면 매니페스트 파일을 변경하십시오. 사용자가 웹 페이지를 방문 할 때마다 브라우저는 Manifest 파일의 업데이트를 확인합니다. Manifest 파일이 변경되면 브라우저는 새 리소스를 다운로드하여 캐시합니다.
Manifest 파일에 나열된 리소스를 다운로드 할 수 없다면 어떻게됩니까?
Manifest 파일에 나열된 리소스를 다운로드 할 수없는 경우 전체 캐시 업데이트 프로세스가 실패합니다. 브라우저는 이전 캐시를 계속 사용합니다.
모든 리소스에 HTML5 응용 프로그램 캐시를 사용할 수 있습니까?
기술적으로 모든 리소스에 HTML5 애플리케이션 캐시를 사용할 수 있지만 권장되는 것은 아닙니다. 과도한 리소스 캐시는 사용자의 장치 저장소를 채우고 성능에 부정적인 영향을 줄 수 있습니다. 필요한 리소스 만 캐시하는 것이 가장 좋습니다.
위 내용은 HTML5 애플리케이션 캐시를 사용할 때 피할 수있는 일반적인 함정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
키 포인트