web-dev-qa-db-ja.com

Service Workerのキャッシュをクリアする方法は？

したがって、Service Workerを含むHTMLページがあり、Service Workerはindex.htmlとJSファイルをキャッシュします。

問題は、JSを変更すると、その変更がクライアントブラウザーに直接表示されないことです。もちろん、chrome dev-toolsでは、キャッシュを無効にできます。しかし、chromeモバイルでは、どうすればいいですか？

サイトの設定にアクセスして、CLEAR％RESETボタンを押してみました。ただし、キャッシュから古いページ/ロードをロードします。他のブラウザまたはchromeシークレットモードを使用しようとすると、新しいページが読み込まれます。

次に、ブラウジングデータをクリア（キャッシュのみ）しようとすると、動作します。

私はそれが正しく機能するはずではないのでしょうか？私のユーザーは、chromeブラウザーキャッシュをクリアせずにページが更新されたかどうかを知りません。

javascripthtmlgoogle-chromeservice-worker
32
taek

これを使用して、古いキャッシュを削除します。

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole Origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});
18
elf

キャッシュ名がわかっている場合は、ワーカー内の任意の場所から caches.delete() を呼び出すだけです。

caches.delete(/*name*/);

そして、すべてのキャッシュを消去したい場合（そしてそれらを待つのではなく、これがバックグラウンドタスクであると言う場合）に必要なのは、 追加する ：

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});
55
Hashbrown

通常、ワーカーが再度インストールされるように、Service Worker JSファイルのCACHE_NAMEを更新します。

self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(inputs))
  )
})

または、clear PWAのキャッシュに：

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

キャッシュキーの名前を一覧表示するには、次を実行します。

self.caches.delete('my-site-cache')

キャッシュキーを名前で削除します（つまり、my-site-cache）。次に、ページを更新します。

更新後にワーカー関連のエラーがコンソールに表示される場合は、登録済みのワーカーの登録を解除する必要がある場合があります。

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })
5
Josh Habdas

これは私のために働いた唯一のコードです。 Mozilla documentation の私の適応です：

//Delete all caches and keep only one
const cachNameToKeep = 'myCache';

//Deletion should only occur at the activate event
self.addEventListener('activate', event => {
    var cacheKeeplist = [cacheName];
    event.waitUntil(
        caches.keys().then( keyList => {
            return Promise.all(keyList.map( key => {
                if (cacheKeeplist.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }));
        })
.then(self.clients.claim())); //this line is important in some contexts
});
1
Shadi Namrouti