how to register a service worker from different sub domain

16,942

Solution 1

Here are some general answers that I think should address the various points you raise in your question:

  • Each registered service worker has an associated scope, which dictates the set of web pages that the service worker can control. The scope of a service worker is a URL, and that URL must have the same origin as the page that registers the service worker, and must be either a URL that corresponds to the same path level as the page or a path that's one or more levels down. The default scope corresponds to the same path level as location of the service worker script. Because of this restriction, it's not possible to call navigator.serviceWorker.register(...) from a page on one (sub-)domain and end up with a service worker that controls pages on another (sub-)domain.

  • There are restrictions in place to prevent you from throwing an https: <iframe> on an http: page and using that to register a service worker. See DOMException when registering service worker inside an https iframe

  • Though I don't know that it's directly related to your question, explicitly calling fetch() for an http: resource within your service worker code will result in a failure in current versions of Chrome, since mixed-content fetch()s are not allowed within a service worker. I don't know if things are 100% settled on that front, and this open bug is still relevant.

If you have pages that live on both abc.123.com and xyz.123.com and you want both sets of pages to be controlled by a service worker, then you need to have two separate service worker registrations. Each registration needs to be for a copy of your service worker JS file that's hosted on the respective domain corresponding to the top-level page, and all pages and service worker scripts need to be accessed via https:.

That being said, you can kick off a service worker registration for a different domain by including a cross-domain <iframe> on a page, but both the host page and the <iframe> need to be served via https:. The normal service worker scoping restrictions apply, so if, for example, you want to register a service worker for the other domain that will cover the entire https://other-domain.com/ scope, you need to make sure that the location of the service worker script being registered is at the top-level, e.g. https://other-domain.com/service-worker.js, not at https://other-domain.com/path/to/service-worker.js. This is the approach used by, for example, the AMP project via the <amp-install-serviceworker> element.

Solution 2

Service Worker scripts must be hosted at the same origin (Protocol + Domain name + Port). Each sub-domain is considered a different origin, So, you will need to register a service worker for each one. Each of these workers will have its own cache and scope.

Share:
16,942

Related videos on Youtube

Yogendra
Author by

Yogendra

I am a Web Developer, having more than 6 years of working experience with JavaScript, Jquery, AngularJs, PHP, Mysql, Symfony, HTML, CSS etc.

Updated on June 19, 2022

Comments

  • Yogendra
    Yogendra almost 2 years

    I have two subdomains: https://abc.xxxx.com and https://xyz.xxxx.com. So my questions:

    1). is it possible to register a service worker for https://xyz.xxxx.com from https://abc.xxxx.com ? if yes then how?

    2). if http://abc.xxxx.com (http insecure) then anyway to register a service worker for https://xyz.xxxx.com from http://abc.xxxx.com like in iframe or something....

    This is a real situation, I am facing for my multiple subdomain. Any help appreciated. Thanks in advance.

    • ebilgin
      ebilgin over 8 years
      Any relation with jQuery ?
    • Yogendra
      Yogendra over 8 years
      not directly, i thought might help in case opening widow like ifame or something....anyway removed it.
    • Subhash Chandra
      Subhash Chandra over 7 years
      are you able to fix it?. i have similar issue.
    • Null
      Null almost 5 years
  • Yogendra
    Yogendra over 8 years
    thank for answer BUT I think you miss understand my question sorry for if mean of my question goes wrong. my question is related to registration of service worker, not intercepting request in promise(fetch).
  • Jeff Posnick
    Jeff Posnick over 8 years
    Correct. The answer to both is no.
  • Yogendra
    Yogendra over 8 years
    Alright, let me do some more search if found same then i'll mark your answer as accepted. Thanks for help
  • Yogendra
    Yogendra over 8 years
    Thanks for your efforts!! But my question is very specific for registration a service worker which code exist on other sub domain....
  • Jeff Posnick
    Jeff Posnick over 7 years
    FWIW, my original explanation had a few technical errors. I've since cleaned it up.
  • julio
    julio over 4 years
    how do i make this work if only the port is different ? (on localhost)
  • Joshua Frank
    Joshua Frank almost 4 years
    @JeffPosnick: does the "no" still apply when one subdomain is absent entirely? That is, if there's a service worker for example.com, does it have no effect on subdomain.example.com?
  • Jeff Posnick
    Jeff Posnick almost 4 years
    A SW on example.com can't control anything on subdomain.example.com. The two origins would be different in that scenario, and there's no concept of a "superset" origin.