0

https://googlechrome.github.io/samples/service-worker/basic/のページに は、最新のオフライン Web ページを使い始めるために必要なスクリプトがすべて含まれています。私はこのテーマにたどり着く前に、無駄な時間をこのテーマの調査に費やしました。突然、私が読んでいたすべてのことが意味をなすようになりました。繰り返しますが、HTML5 は優れた開発システムとして私に感銘を与えました。

メインページで実行する必要があるスクリプトの小さなスニペットと、オンラインのときにサーバーからファイルをフェッチするサービスワーカーの完全なスクリプト、またはオフラインのときにキャッシュからファイルをフェッチする完全なスクリプトがあります。

動作するようになるまでに 1 時間もかかりませんでした。注: localhost で http を使用してテストできます。他のサーバーには https 接続が必要です。Google および Firefox デバッガーは、サービスワーカーのソースを表示しません。

serviceworker の例で示された機能が、私のアプリに必要なものに非常に近いことは最初から明らかでしたが、バグを発見したと思います。

アクティブ化ハンドラーは、古いキャッシュをクリーンアップすることになっています。これがスクリプトです - ページからの逐語的なものです。

// Names of the two caches used in this version of the service worker.
// Change to v2, etc. when you update any of the local resources, which will
// in turn trigger the install event again.
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

簡単に言えば、古いキャッシュを削除するわけではありません。フィルターを実行して不要なキャッシュを特定する前に、キャッシュを削除しようとしていると思います。

私は経験豊富なプログラマーですが、このスニペットは私を怖がらせます。本番アプリとしては非常に短いですが、デバッグしている場合は読みにくいです。何が起こっているのかをより多くの開発者が理解できるように、作者がもっと冗長な方法でそれを書いていればよかったのに。

それはどのように機能しますか？

4

1 に答える 1