ServiceWorker

ServiceWorkerとはServiceWorkerはH5の新しいAPIであり、ブラウザのバックグラウンドで実行されるJavaScriptスクリプトであり、現在のページとは独立しているため、Webページと対話することができず、ネットワーク要求をブロックし、処理することができ、キャッシュリソースを実現し、オフラインでユーザーの要求に応答することができる.
ServiceWorkerライフサイクル

取付

がアクティブ化され、アクティブ化に成功すると、chrome://inspect/#service-workersに入って現在のserviceworkerを表示できます.この段階でリソースをキャッシュ

は、要求を傍受し、要求されたリソースがキャッシュされて直接使用された場合、キャッシュの404ページをユーザに示す.

破棄

は、httpsプロトコルまたはlocalhost

のみをサポートする.

ライフサイクルwebページ

から独立

一般的にネットを切った後、ページは直接ウェブサイトにアクセスできないというヒントが現れ、chrome -> -> New Work -> offlineでネットを切ることをシミュレートすることができます.
ServiceWorkerのライフサイクルにおける重要なイベント
install
ページのロード時にトリガーされます.このプロセスが完了すると、リソースがキャッシュされます.
fetch

fetchは、ユーザの要求をブロックするために使用され、応答してPromiseオブジェクト

に戻る.

は、RequestおよびResponseオブジェクトを提供し、フロントエンドはRequestオブジェクトで要求を開始することができ、serviceworkerではResponseオブジェクトで要求に応答することができる.

キーコード解析:

if ('serviceWorker' in navigator) {//serviceworker navigator     
        navigator.serviceWorker.register('./service-worker.js').then(function(registration) {//  serviceworker，service-worker.js HTML        ，serviceworker     promise，    resolve reject  
        //resolve，     
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
        // reject，    
        console.log('ServiceWorker registration failed: ', err);
       });
    }

次に、キャッシュリソースとオフライン応答リソースのコードを示します.

'use strict';

var cacheVersion = 0;
var currentCache = {
  offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline.html';

this.addEventListener('install', event => {//    serviceworker

  event.waitUntil(//caches.open               

    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([//          
          './offline.svg',
          offlineUrl
      ]);
    })
  );
});//              install    ，                

this.addEventListener('fetch', event => {
//fetch        ，       ，   ，       serviceworker ，  200 OK (from ServiceWorker)，          

  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
        })
     );
  }
  else{
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

詳しくはこちらをクリックしてください
にほうこうつうしん
ブラウザには3つのworkerがあります.

dedicated worker:専用worker

shared worker:共有worker

service worker

postmessageとonmessageで通信できます
特長
Serviceworkerは、XMLHTTPRequestリクエストよりも優れています.

はpromiseオブジェクトを返し、コールバックネストを減らします.

は、RequestオブジェクトおよびResponseオブジェクトを利用することができ、ユーザの要求に応答するserviceworkerのストレージは非同期であり、localStorageおよびsessionStorageのストレージは同期である.サービスワークの詳細