service-worker - 複数のサブドメインで Service Worker を使用する

Question

Web アプリが複数のサブドメインで構成されている場合、サブドメインごとに 1 つずつ、複数の Service Worker を用意する必要があるということですか? または、複数のサブドメインで動作する Service Worker を 1 つ持つことはできますか?

Answer 1

各サブドメインは異なるオリジンと見なされるため、それぞれのサービス ワーカーを登録する必要があります。これらの各ワーカーには、独自のキャッシュとスコープがあります。

Answer 2

各サブドメインは異なるオリジンと見なされ、オリジンごとにサービス ワーカーを登録する必要がありますがService-Worker-Allowed、同じソースが制御できるスコープのリストに応答ヘッダーを設定することで、サービス ワーカーに同じソースを再利用できます。

Answer 3

複数のドメインとは、ユーザーが複数のドメインでサイトに直接アクセスできることを意味する場合、答えはイエスだと思います。それぞれを処理するには複数のサービスワーカーが必要ですwww.example.com。hello.example.com

ただし、メイン アプリが 1 つのドメインで提供されているが、 Google フォントをロードしたり、静的アセットをロードしたりするためにwww.example.com他のドメインを呼び出す可能性がある 場合は、1 つの Service Worker で十分です。これは、キャッチしてキャッシュする方法です（または、リクエストに対して好きなことを行います）：api.example.comimages.examples.comfonts.gstatic.comexample.s3.amazonaws.com

(function() {
  var DEFAULT_PROFILE_IMAGE_URL = 'images/default-avatar@200x150.png';

  function profileImageRequest(request) {
    // Load from cacheOnly to avoid redownloading the images since if the user
    // updates their avatar its URL will change.
    return toolbox.cacheOnly(request).catch(function() {
      return toolbox.networkFirst(request).catch(function() {
        return toolbox.cacheOnly(new Request(DEFAULT_PROFILE_IMAGE_URL));
      });
    });
  }

  toolbox.precache([DEFAULT_PROFILE_IMAGE_URL]);
  toolbox.router.get('/(.+)/users/avatars/(.*)', profileImageRequest, {
    origin: /example\.s3\.amazonaws\.com/
  });
})();

この例では、Chrome チームの sw-toolboxライブラリを使用して、さまざまなアセットをキャッシュしています。