web-dev-qa-db-ja.com

ワークボックス：キャッシュをクリーンアップ

ワークボックスが古いキャッシュをクリーンアップするようには見えません。たとえば、次のようなキャッシュバージョンを指定した場合：

var version = 'v2';
workbox.core.setCacheNameDetails({
  suffix: version
});

...新しいServiceWorkerがアクティブになると、ワークボックスが古いバージョンのキャッシュをクリーンアップすることを期待していましたが、キャッシュストレージは次のようになります。

enter image description here

キャッシュを自分で手動でクリーンアップするのは安全ですか？たとえば、私のサービスワーカーでは：

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches
      .keys()
      .then(keys => keys.filter(key => !key.endsWith(version)))
      .then(keys => Promise.all(keys.map(key => caches.delete(key))))
  );
});
service-workerprogressive-web-appsworkbox
8
Johnny Oshika

suffixプロパティ値を、バージョンとしての文字列に変更します。ただし、Workboxはこれを使用して、キャッシュするバケットに名前を付けます。

ワークボックスのドキュメントから

プレフィックスとサフィックスの主な使用例は、複数のプロジェクトにWorkboxを使用し、各プロジェクトに同じlocalhostを使用する場合、各モジュールにカスタムプレフィックスを設定すると、キャッシュが互いに競合するのを防ぐことです。

Workboxは、x-v2をx-v1の新しい代替とは見なしません。

Workboxは以前に名前が付けられたキャッシュを使用しなくなるため、キャッシュエビクション戦略を問題なく使用できます。

ただし、アセットをバージョン管理するためにsuffixを使用する必要はありません。 Workboxには、アセットが正しく更新されていることを確認するためのツールがいくつかあります。さらに、suffixの実装は常に新しいキャッシュから始まり、すべてをダウンロードします。

プリキャッシュ

プレキャッシュにはアセットのリビジョンがあるため、アセットが変更されると、新しいビルドが生成され、変更されたアセットをデプロイすると更新され、変更されていないアセットはそのままになります。

戦略

戦略は、ほとんどの作業が行われる場所です。ルートを定義するときは、そのタイプのアセットに最適なキャッシュ戦略を定義します。 staleWhileRevalidateは、デバイス上のキャッシュが使用される優れたアプローチですが、Workboxも並行してネットワークにアクセスし、そのリソースに更新があるかどうかを確認します。

有効期限

定義された有効期限より古くなった場合は、古いアセットが削除されていることを確認することもできます。

13
abraham