Using service workers across multiple subdomains

五迷三道 提交于 2019-11-30 13:09:52

Each subdomain is considered a different origin, so yes, you will need to register a service worker for each one. Each of these workers will have its own cache and scope.

Each subdomain is considered a different origin and you must register a service worker for each origin but you can reuse the same source for the service worker by setting the Service-Worker-Allowed response header to the list of scopes the same source can control.

If you mean by multiple domains is that the user can access your site directly on multiple domains like www.example.com and hello.example.com then I believe the answer is yes, you need multiple service workers to handle each.

However, if your main app is served on one domain www.example.com but might call other domains like api.example.com or images.examples.com or even fonts.gstatic.com to load Google Fonts or example.s3.amazonaws.com to load static assets then a single service worker is enough. This is how you can catch and cache (or do whatever you'd like to the requests):

(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/
  });
})();

In the example I am using sw-toolbox library from Chrome team to help you cache different assets.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!