가져오기

Service Worker는 웹 페이지의 스크립트를 병렬로 읽고 웹 페이지의 컨텍스트 외부에서 실행하는 스크립트입니다.Service Worker는 DOM과 사용자 상호 작용에 액세스할 수 없으나 postMessage API를 통해 스크립트와 통신할 수 있습니다.이것은 웹 응용 프로그램의 프록시 서버로 실행되는 것으로 캐시로 응답하거나 LocalStorage 또는 IndexedDB 에서 데이터를 가져오는 등 모든 서버의 요청을 감청하는 것을 권장합니다.따라서 오프라인에서 프로그램을 사용할 수 있다.

Service Worker의 라이프 사이클

Service worker를 효과적으로 활용하기 위해서는 서비스 수명주기에 대한 이해가 필수적입니다.

Service Worker의 라이프 사이클은 주로 3단계로 구성됩니다.

등록(Registration)

설치(Installation)

활성화(액션)

우리 헤어져 봅시다.

등록!

첫 번째 블록은 아래 코드를 사용하여 서비스 인원을 등록한다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker/sw.js', { scope: '/sw-test/' }).then(function(reg) {
    // 登録がうまくいった
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // 登録に失敗しました
    console.log('Registration failed with ' + error);
  });
};

서비스 워커 스크립트는/service-worker/sw입니다.js에 있어요.
다음 단락에서 자세히 봅시다.

설치하다.

Servie worker가 호출된 후 처음으로 브라우저에 설치됩니다.

this.addEventListener('install', function(event) {
 event.waitUntil(
  // キャッシュにファイルを追加する
    caches.open(expectedCacheNames).then(cache => cache.addAll([
        'index.html',
        'style.css',
        'app.js',
        'cat.png',
]))
  );
});

event.waitUntil은 매개 변수가 전달하는 Promise가 해결(또는 거부)될 때까지 다른 이벤트를 막을 수 있습니다.Service Worker는 캐시 Request/Response 객체 쌍캐시 인터페이스을 제공합니다.

활성화

activate 활동은 Service Worker가 Request 처리를 맡기 전에 발행한 것으로 필요하지 않은 캐시를 삭제할 수 있는 좋은 시기입니다.

this.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(cacheNames.map(function(cacheName) {
        if (expectedCacheNames.indexOf(cacheName) === -1) {
          //期限切れのキャッシュの削除
          return caches.delete(keyList[i]);
        }
      }));
    })
  );
});

Fetch 이벤트

Request를 캡처하기 위해 Fetch 이벤트에 작업을 추가합니다.

this.addEventListener('fetch', function(event) {
  // ここでマジックが起こります!
});

event.respondWith는 사용자 지정 응답을 기록하거나 네트워크 오류를 처리할 수 있습니다.그리고 캐시를 사용할 수 있다면 요청한 자원을 반환하기만 하면 된다.

let response;
event.respondWith(caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(r) {
  response = r;
  caches.open(expectedCacheNames).then(function(cache) {
    cache.put(event.request, response);
  });
  return response.clone();
}));

요청 대상과 응답 대상은 한 번만 소모되는 흐름이기 때문에 응답의 복사본을 되돌려줍니다.
마지막으로, 다음 상황에서 요청이 캐시와 일치하지 않아 네트워크를 사용할 수 없으면 기본 자원을 되돌려줍니다.

catch(function() {
  return caches.match('404.jpg');
})

이상