跨多个子域使用服务工作者

Question

如果我的 Web 应用包含多个子域，是否意味着我必须有多个服务工作者，每个子域一个？或者我可以拥有一名跨子域工作的服务工作者吗？

Answer 1

每个子域都被认为是不同的来源，所以是的，您需要为每个子域注册一个服务工作者。这些工作人员中的每一个都将拥有自己的缓存和范围。

Answer 2

每个子域都被认为是不同的来源，您必须为每个来源注册一个服务工作者，但您可以通过将 Service-Worker-Allowed 响应 header 设置到列表来为服务工作者重复使用相同的来源同一来源可以控制的范围。

Answer 3

如果你说的多域是指用户可以直接在多个域上访问你的网站，比如www.example.com和hello.example.com那么我相信答案是肯定的，你需要多个服务工作者来处理每个。

但是，如果您的主应用程序在一个域 www.example.com 上提供，但可能会调用其他域，例如 api.example.com 或 images.examples.com 甚至 fonts.gstatic.com 来加载 Google 字体或 example.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 库来帮助您缓存不同的资产。

跨多个子域使用服务工作者

Using service workers across multiple subdomains

service-worker

progressive-web-apps