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

프런트엔드 기술은 데스크톱 기술에 근접하고 있으며, 가장 중요한 기술 중 하나는 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 = 'v1::static';    self.addEventListener('install', e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            '/',
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener('fetch', event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

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

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

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

<h1>serviceWorker B</h1>

http 서버를 설치하고 현재 경로에서 실행할 수 있습니다:

npm i http-server 
    http-server

방문:

http://localhost:8080/index.html

및

http://localhost:8080/b.html

그런 다음 http 서버를 닫고 다시

 http://localhost:8080/b.html

를 방문하면 ~에 실제로 액세스할 수 있게 됩니다. 오프라인 구현.

그럼, 서비스 워커의 실행 상태를 확인하고 싶다면 다음 URL을 사용해도 됩니다:

 chrome://inspect/#service-workers

더 자세한 내용은

 chrome://serviceworker-internals/

에서 확인할 수 있습니다. 여기에서 볼 수 있습니다. 시작, 등록 취소 및 기타 작업.

구현을 확인할 수 있지만 아직 그렇게 낙관적이지는 않습니다.

http://caniuse.com/#feat=serviceworkers