HTML5 애플리케이션 캐시 API는 더 이상 사용되지 않았지만 웹 애플리케이션이 캐싱 리소스를 통해 오프라인으로 작동 할 수 있도록하는 데 사용되었습니다. 사용 방법은 다음과 같습니다.
매니페스트 파일 : .appcache 확장자가있는 매니페스트 파일을 만듭니다. 이 파일에는 브라우저가 캐시 해야하는 리소스가 나와 있습니다. 매니페스트 파일의 형식은 다음과 같습니다.
<code>CACHE MANIFEST # v1 CACHE: /index.html /styles.css /script.js NETWORK: * FALLBACK: / /offline.html</code>
html 참조 : 태그에 manifest 속성을 포함시켜 HTML 파일에 매니페스트 파일을 참조하십시오.
<code class="html"></code>
CACHE 섹션에 나열된 리소스를 캐싱합니다.NETWORK 섹션에 나열된 리소스는 절대로 캐시되지 않으므로 항상 네트워크에서 가져옵니다. FALLBACK 섹션은 사용자가 오프라인 상태 일 때 제공 할 폴백 페이지를 지정합니다.중요 참고 :이 단계는 응용 프로그램 캐시 API의 작동 방식을 자세히 설명하지만 더 이상 사용되지 않으며 새로운 프로젝트에 사용해서는 안됩니다. 대신 개발자는 오프라인 기능을 관리하기 위해 서비스 작업자로 전환해야합니다.
애플리케이션 캐시 API에서 서비스 작업자로의 전환에는 원활한 마이그레이션을 보장하기위한 몇 가지 단계가 필요합니다.
manifest 속성을 제거하고 .appcache 매니페스트 파일을 삭제하십시오.서비스 작업자 구현 : 기본 JavaScript 파일에 서비스 작업자를 등록하십시오.
<code class="javascript">if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); }); }); }</code> 서비스 작업자 작성 : 캐싱 로직을 처리하려면 service-worker.js 파일을 만듭니다. 리소스 저장을 위해 Cache API 사용하십시오.
<code class="javascript">self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js' ]); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });</code>애플리케이션 캐시 API에서 서비스 작업자로 마이그레이션 한 후 웹 애플리케이션이 오프라인 캡슐화 상태를 유지하려면 다음을 고려하십시오.
포괄적 인 캐싱 : 오프라인으로 기능하는 데 필요한 모든 중요한 리소스가 캐시되어 있는지 확인하십시오. 여기에는 HTML, CSS, JavaScript, 이미지 및 기타 자산이 포함됩니다. 서비스 작업자 내의 Cache API 사용하여 다음을 처리하십시오.
<code class="javascript">self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js', '/offline.html' ]); }) ); });</code> 네트워크 요청 처리 : fetch 이벤트를 사용하여 모든 네트워크 요청을 가로 채고 처리합니다. 캐시에서 자원이 찾을 수없는 경우 네트워크에서 가져 와서 응답을 캐시하려고 시도 할 수 있습니다.
<code class="javascript">self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request).then(function(response) { return caches.open('my-cache').then(function(cache) { cache.put(event.request, response.clone()); return response; }); }); }) ); });</code>오프라인 폴백 : 오프라인 폴백 전략을 구현합니다. 요청이 실패하면 캐시에서 폴백 페이지를 제공 할 수 있습니다.
<code class="javascript">self.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request).catch(function() { return caches.match('/offline.html'); }) ); });</code> 전략 업데이트 : 서비스 작업자가 스스로 업데이트 할 수 있는지 확인하십시오. 버전 작성 및 activate 이벤트를 사용하여 업데이트를 관리합니다.
<code class="javascript">self.addEventListener('activate', function(event) { var cacheWhitelist = ['my-cache-v2']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });</code>응용 프로그램 캐시 API에서 서비스 작업자로 마이그레이션 할 때 다음과 같은 주요 차이점을 이해하는 것이 중요합니다.
유연성 및 제어 :
범위 및 기능 :
업데이트 메커니즘 :
activate 이벤트를 통해 관리됩니다. 캐시가 업데이트되는시기와 방법을 명시 적으로 정의하여보다 예측 가능하고 제어 된 업데이트를 제공합니다.성능 및 효율성 :
브라우저 지원 및 감가 상각 :
이러한 차이를 이해하면 응용 프로그램을 서비스 작업자로 효과적으로 마이그레이션하여 원활한 전환과 오프라인 기능을 향상시킬 수 있습니다.
위 내용은 HTML5 응용 프로그램 캐시 API를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
