새로운 JavaScript 지식: 서비스 워커-JS 튜토리얼-php.cn

새로운 JavaScript 지식: 서비스 워커

阿神

풀어 주다： 2017-01-24 14:30:41

원래의

1401명이 탐색했습니다.

프런트엔드 기술은 데스크톱 기술에 근접하고 있으며, 가장 중요한 기술 중 하나는 HTML 앱이 오프라인에서 작동할 수 있게 해주는 서비스 워커입니다. 이 기사에서는 간단한 사례 코드를 통해 이 기술을 설명합니다. 사용하는 도구:

1. 브라우저 버전은 chrome 55입니다

2. 서버 시스템: Node 5.0

3개의 파일을 준비해야 합니다:

touch  index.html b.html sw.js

로그인 후 복사

index.html 파일 내용은

  <script>
    if (&#39;serviceWorker&#39; in navigator) {
      navigator.serviceWorker.register(&#39;/sw.js&#39;);
    }    </script>

로그인 후 복사

서비스 워커를 등록하며, 파일명은 JavaScript 코드 파일인 sw.js입니다. 따라서 실제 핵심 파일은 sw.js이고 해당 내용은 다음과 같습니다.

   const cacheName = &#39;v1::static&#39;;    self.addEventListener(&#39;install&#39;, e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            &#39;/&#39;,
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener(&#39;fetch&#39;, event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

로그인 후 복사

이벤트로 ServiceWorker가 처음 로드될 때 설치가 호출됩니다. 여기에서 몇 가지 일반적인 작업을 수행할 수 있습니다. 오프라인에서 필요한 파일을 캐시에 로드하는 것입니다. 여기서는 "/"를 지정하므로 모든 콘텐츠가 캐시됩니다.

두 번째 이벤트는 원격 리소스에 액세스할 때 호출되는 fetch입니다. 여기에서 일치 항목을 만들 수 있습니다. 캐시에 리소스가 있으면 캐시에 있는 리소스가 반환되고, 그렇지 않으면 원격으로 가져옵니다.

세 번째 파일 b.html은 오프라인 효과를 보여주는 파일입니다. 내용은