プログレッシブWebアプリケーションのキャッシュバージョン管理

Question

サービスワーカーキャッシュの現在のベストプラクティスは何ですか？

サービスワーカーを使用して多数のプロジェクトをキャッシュした後、プロジェクトのキャッシュされたアセットを管理するための保守的な頭痛があります。

ほとんどのケースでは、我々は静的キャッシュ（私たちの頭痛の原因として最も可能性が高い）を使用していて、私たちのsw.jsコードはかなり標準であり、次のようになります。

var cacheName = 'v1:static'; 

// cache static assets during install phase 
self.addEventListener('install', function (e) { 
    e.waitUntil(
     caches.open(cacheName).then(function (cache) { 
      return cache.addAll([ 
       './', 
       './css/style.css', 
       './css/vendor.css', 
       './js/build/script.min.js', 
       './js/build/vendor.min.js' 
      ]).then(function() { 
       self.skipWaiting(); 
      }); 
     }) 
    ); 
}); 

self.addEventListener('fetch', function (event) {   
    event.respondWith(
     caches.match(event.request).then(function (response) { 
      if (response) { 
       // retrieve from cache 
       return response; 
      } 
      // fetch as normal 
      return fetch(event.request); 
     }) 
    ); 
}); 

の問題は、我々がリリース一度始まります私たちのアプリの新しいバージョンと私たちは、ユーザーのキャッシュを無効にする必要があります。

キャッシュを更新するにはどのような方法が推奨されますか？私はsw-precacheまたはcacheName変数を手動で更新する開発者（またはタスクランナーを介して）を知っています。他の選択肢はありますか？キャッシュ全体ではなく1つのファイルのみを無効にする方法はありますか？

おかげ

Answer 1

私はあなたのプロジェクト（複数可）の資産評価を行うことを示唆しています。動的資産から静的資産を決定します。あなたが純粋な静的な静的なものを決定したら、それをあらかじめ詰めてください。

これには2通りの方法があります。 1）sw-toolboxを使用するか、または2）ブラウザ用のサービスワーカーファイルのバージョン番号を手動で更新して更新します。

私はあなたがキャッシュやすべてを無効にすることで経験している痛みを知っています。 sw-toolboxを試してみてください。

SW-ツールボックス方式

const OFFLINE_URL = '/pages/offline/'; 

importScripts('sw-toolbox.js'); 

self.toolbox.precache([ 
    <PATH_TO_STATIC_ASSET> 
    'manifest.json', 
    OFFLINE_URL, 
    '/' 
]); 

self.toolbox.router.default = self.toolbox.networkFirst; 

self.toolbox.router.get('/(.*)', function (req, vals, opts) { 
    return self.toolbox.networkFirst(req, vals, opts) 
     .catch(function (error) { 
      if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) { 
       return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts); 
      } 
      throw error; 
     }); 
    }); 

Googleのサービスワーカー定型 - link

この1つはあまりにも単純明快です。これの唯一の欠点は、すべての導入時に、インストールされたサービスワーカーが自動的に更新するように、CACHE_VERSIONを更新する必要があることです。

また、Workboxもあることに注意してください。私はそれほど多くはまだ私の方法は時代遅れかもしれないので、それを周りに遊んだhavent。彼らはこれがprecacheとツールボックスの子孫だと言います