ServiceWorker詳細

	  App  web             ，       ，         。   Service Worker    web app           。

 、Service Worker   ？

       Service Worker                 ，        ，         web                   。   ，           ，             ，                          ，              。

 、Service Worker    

   1.    ，    ，     

    2.    

    3.    

    4.      

 、Service Worker    

                 Service Worker         

1.  

       Service Worker            ，           Service Worker      

 
  
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}
            ServiceWorker API         ，      Service Worker（/sw.js）    ，    Service Worker      ，            。
         ，      chrome://serviceworker-internals/      Service Worker  。
          Service Worker       ，       ，     sw.js          ，            ，    Service Worker          fetch  ，     Service Worker     /example/sw.js，    Service Worker     /example/    fetch  。
               Service Worker  ，         ，     Service Worker     
    sw.js：
 
  
var CACHE_NAME = "my_cache";
   var urlsToCache = [
    '/index.html',
    '/css/style.css',
    '/js/script.js'
   ];
//   self  ServiceWorkerGlobalScope
self.addEventListener('install', function(event) {
//   waitUtil                 ，                     ，         。    
// ServiceWorker    installing  installed 
event.waitUntil(
        caches.open(CACHE_NAME).then(function(cache) {
             console.log('Opendhe : ',cache);
            return cache.addAll(urlsToCache);
      })
    );
});
    CACHE_NAME         ，urlToCache         
          ，    caches.open（  caches      ）       cache   ，      cache.addAll          。        promise（caches.open caches.addAll）   event.waitUntil    promise            ，              ，  Service Worker      。              ，    Service Worker      。                             ，              Service Worker         。
2.  Service Worker      （           ）
3.  
              ，    Service Worker             ，           Service Worker
 、  Service Worker      
     Service Worker                 ，Service Worker     fetch  。       ：
 
  
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
               fetch  ， event.respondWith         caches.match   promise.caches.match  request  Service Worker     response。
              response，         ，                  。
                   ，        fetch   response             ，  ：
 
  
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        var fetchRequest = event.request.clone();
        return fetch(fetchRequest).then(
          function(response) {
            if(!response || response.status !== 200 ||!response.headers.get('Content-type').match(/image/)) {
              return response;
            }
            var responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
まず、この要求がキャッシュされているかどうかを確認します.もしあれば、直接に対応に戻ります.このようにして、ネットワーク要求を一度減らすことができます.そうでなければ、Service Workerからの要求があります.この時のService Workerは中間代理の役割を果たします.Service Workカーが要求するプロセスはfetch appiによって完了し、レスポンスオブジェクトを得てフィルタリングし、画像ファイルかどうか確認し、そうでない場合はそのまま要求に戻り、キャッシュされません.画像ファイルであれば、requestまたはreponseオブジェクトはstreamに属していますので、一度しか使えません.その後にキャッシュを入れて、もう一つのページを送ります.これがService Workカーの強みです.要請を遮り、偽造をお願いします.この過程でfetch APIは大きな役割を果たしました.
五、サービスワーカーに関するイベントfetchイベント:ページでhttp/https要求を開始した時、サービスワーカーはfetchイベントを通じて要求を阻止し、自分の対応を提供することができます.w 3 cは、XMLHttp Requestの代わりに、fetch方法が戻ってくるのはpromiseオブジェクトであり、then方法で連続的に呼び出しを行い、入れ子を減らすためです.メッセージメッセージイベント:ページとServiceWorker品質検査は、postMessage方法によってメッセージを送信することができ、送信されたメッセージはmessageイベントによって受信することができる.これは双方向のプロセスであり、ページはService Workerにメッセージを送ることができ、Service Workerはページにメッセージを送ることもできます.この特性のため、Service Workerを中間紐付けとして、ドメイン名またはサブドメイン名の複数ページ自由通信ページがサーバメッセージのプッシュ機能を実現することができます.六、ブラウザの実現状況
Chrome
Firefox
IE
Opera
Safari
基本機能
40.0
44.0
サポートしない
24
サポートしない
install/activate events
40.0
44.0
サポートしない
24
サポートしない
fetch event/request/repondwith
40.0
44.0
サポートしない
サポートしない
サポートしない
caches/cache
42.0
39.0
サポートしない
サポートしない
サポートしない