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

Question

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

Answer 1

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

Answer 2

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

Answer 3

如果您的意思是多个域是用户可以直接在多个域上访问您的站点www.example.com，hello.example.com那么我相信答案是肯定的，您需要多个服务人员来处理每个域。

但是，如果您的主应用程序在一个域上提供服务，www.example.com但可能会调用其他域，例如api.example.com甚至加载 Google 字体或images.examples.com加载 静态资产，那么单个 service worker 就足够了。这是您可以捕获和缓存的方式（或对请求执行任何您想要的操作）：fonts.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库来帮助您缓存不同的资产。