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

Question

私のウェブサイトは、各クライアント用の一連のウェブアプリケーションを提供しています。各クライアントには、使用できるさまざまな種類のアプリがあります。

各Webアプリケーションは、別のフォルダにホストされています。

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

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

しかし、最初のサービスワーカーの後に、sw_global.jsサービスワーカーが登録、インストール、アクティブ化、フェッチを正常にフェッチし、cache-globalという名前のキャッシュを作成したことに気づきました.2番目のサービスワーカーsw_app1、js自身のキャッシュcache-app1は、すべてのcache-globalをクリアします。

各フォルダーごとにカスタムサービスワーカーを使用する方法はありますか。各フォルダは、すべてのユーザーにとって必要不可欠なマイクロサービスまたはWebアプリケーションであるため、一意のサービスワーカーのすべてのコンテンツをキャッシュしないようにする必要があります。

実際、私はvanilla.jsをコードしています。角度はありません。反応はありません。

Answer 1

ここに心に留めておくべき二つのものがあります：

1. それは限り、各サービスの労働者はユニークなscope独自のを持っているように、与えられたoriginのサービス労働者の任意の番号を登録することが可能です。すでにこれをやっているように、/のスコープを持つトップレベルのサービスワーカーを登録してから、別のサービスワーカーがそれぞれの独立したWebアプリケーションを実行するパスにスコープします。

2. Cache Storage API（およびIndexedDBなどの他の記憶メカニズム）は、原点全体で共有されています。デフォルトでは、シャーディングや名前空間の分離はありません。一緒に、これら二つの事実を取る

   は

、私の推測では、何が起こっていることは、あなたが特定のWebアプリケーションにスコープのサービス労働者の1のactivateハンドラ内のいくつかのキャッシュのクリーンアップコードを持っているということで、そのコードが取得するということです現在のキャッシュ名のリストと、古いと思われるキャッシュを削除します。これはサービスワーカーでは一般的なことですが、caches.keys()がすべてののリストを返すという事実を考慮しなければ問題に陥る可能性があります。他のサービスワーカーインスタンス。

ここでは、キャッシュを作成するときに、キャッシュ名の一部として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)) 
); 
});