web-dev-qa-db-ja.com

同じドメインで異なるフォルダーで複数のJavaScriptサービスワーカーを使用する

私のウェブサイトは、クライアントごとに一連のウェブアプリを提供しています。クライアントごとに、使用できるアプリの組み合わせが異なります。

各Webアプリは、異なるフォルダーでホストされます。

したがって、すべてのアプリをキャッシュするのではなく、許可されているWebアプリのみをクライアントごとにキャッシュする必要があります。その多くは、ユーザーが使用するものではありません。

ウェブサイトのシェル用のグローバルサービスワーカーと、フォルダーまたはアプリごとにカスタム名のサービスワーカーを素朴に作成しました。

ただし、最初のサービスワーカー、たとえばsw_global.jsサービスワーカーが登録、インストール、アクティブ化、フェッチに成功し、cache-globalという名前のキャッシュを作成した後、2番目のサービスワーカー（たとえばsw_app1、js）が独自のキャッシュキャッシュを作成することに気付きました- app1は、すべてのキャッシュグローバルをクリアします。

各フォルダーにカスタムServiceWorkerを使用するにはどうすればよいですか。各フォルダーはマイクロサービスまたはWebアプリであり、すべてのユーザーに必ずしも許可されているわけではないため、一意のサービスワーカーからのすべてのコンテンツをキャッシュしないことが不可欠であることに注意してください。

実際、私はVanilla.jsでコーディングし、角度も反応も、ビューも、灘もありません。

javascriptcachingservice-worker
14
digitai

ここで覚えておくべき2つのことがあります：

  1. 各サービスワーカーが独自の スコープ を持っている限り、特定の Origin に対して任意の数のサービスワーカーを登録することができます。スコープが_/_のトップレベルのサービスワーカーと、独立した各Webアプリが実行されるパスをスコープとする追加のサービスワーカーの両方を登録して、すでにこれを行っているようです。

  2. Cache Storage API （および IndexedDB などの他のストレージメカニズム）はOrigin全体で共有され、デフォルトでは「シャーディング」や名前空間の分離はありません。

これらの2つの事実を総合すると、特定のWebアプリを対象とするサービスワーカーの1つのactivateハンドラーにキャッシュクリーンアップコードがあり、そのコードが次のリストを取得していると思います。現在のキャッシュに名前を付け、古いと思われるキャッシュを削除します。これはServiceWorkerで行う一般的なことですが、caches.keys()がallのリストを返すという事実を考慮しないと、問題が発生する可能性があります。 オリジンのキャッシュ、他のServiceWorkerインスタンスによって作成されたキャッシュも含まれます。

それがここで起こっていることを前提として、私が従うことをお勧めするモデルは、キャッシュを作成するときにキャッシュ名の一部として_registration.scope_の値を含めることです。 activateハンドラーの古いキャッシュエントリを削除するときは、一致しないキャッシュを除外することで、特定のサービスワーカーが管理するはずのキャッシュのみをクリーンアップしていることを簡単に確認できます。 _registration.scope_。

例：次のようなもの：

_const CACHE_VERSION = 'v2';
const CACHE_NAME = `${registration.scope}!${CACHE_VERSION}`;

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      // Add entries to the cache...
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => cacheNames.filter(cacheName => {
      // Find the caches that belong to this scope, but don't match CACHE_NAME.
      return cacheName.startsWith(`${registration.scope}!`) &&
             cacheName !== CACHE_NAME;
    }).then(cachesToDelete => Promise.all(cachesToDelete.map(caches.delete))
  );
});
_
15
Jeff Posnick