Please enable JavaScript.

Coggle requires JavaScript to display documents.

Service Worker (動き (サービワーカーインストール可能か確認 (サービスワーカー(sw.js)の登録…

- - - - navigator.serviceWorker.register('/sw.js')
        
        scope指定する場合は、第2引数に渡す
        
        register()はPromiseを返す
      - サービスワーカーのインストール
        
        これはブラウザがSWインストール後に自動で行う。
        
        インストール開始を検知
        
        self.addEventListener('install', function(event) {{ })
        selfのinstallというイベントをリッスンして、
        インストールが開始されると読み込む
        
        インストール中にキャッシュするリソースを設定
        
        event.waitUntil()内で以下をする
        caches.open('cache-v1').then()....
        で、キャッシュ名を与えてあげて、キャッシュを取得する。
        このときもPromiseが返される
        
        then内でキャッシュを受け取り、
        キャッシュさせたいリソースを以下で設定
        return cache.addAll([]);
        
        このaddAllとか、addとかは実際にリクエストしてキャッシュしてるっぽい。
        fetchしてcache.putするとの同じって言ってた
        https://developer.mozilla.org/ja/docs/Web/API/Cache/add
        
        fetchしてキャッシュがあればキャッシュを返す
        
        self.addEventListener('fetch', function(event))
        でページ遷移、リクエストがリクエストがあったことを検知する
        
        event.respondWith( caches.match(event.request) .then(function(response) { // キャッシュがあったのでレスポンスを返す if (response) { return response; } // キャッシュがなかったので通常の fetch を行う return fetch(event.request); } ) );
        
        キャッシュがない場合はキャッシュするようにする
        
        fetchもPromiseを返すので、この時thenでキャッシュをしてやる。正常なレスポンスのときだけね
        
        1 more item...
  - - - 任意のタイミングで更新確認もすることができる
        update()
        ブラウザのfetchとかpushでも更新確認するらしい
        
        更新確認ロジック
        
        swスクリプトをバイト単位で比較して
        1バイトでも変更があれば、新たにインストールする
        
        確かにsw.jsをちょっと変えただけで、installのイベントリスナーが反応する
        
        24時間たったら必ずサーバに取りに行く
        
        ブラウザキャッシュから取得する場合もある
        
        navigator.serviceWorker.register
        のupdateViaCacheオプションで行う
        
        all
        
        sw.jsとimportしたスクリプトをブラウザキャッシュ経由で行う
        
        imports
        
        importしたスクリプトをブラウザキャッシュ経由で行う
        
        none
        
        直接サーバに聞く
        
        新しいswはすぐには使われない
        
        swが使っているページがすべて閉じたら次が使える
        強制的なものもある
        
        それがskipWaiting()
      - この確認処理がサーバ負荷を上げる可能性
        
        fetchとかページ遷移でどんどん確認するので
        サーバが苦しい
        
        回避策として、updateViaCache(all,imports)とかCache-Controllヘッダとかを使ってサーバへのリクエストを減らす