Angular Service Worker update on multiple domains

Question

Context

We are currently building our app using Angular. This one app is served from multiple domains and deliver different colors and content depending on which domain the user is on. But it is the same Angular application.

In order to offer speed and some offline experience, we've setup service worker which works just fine. We are using the following code to show a dialog to our users whenever the app has been updated, before reloading the page automatically:

export class ApplicationService {
  constructor(private dialog: DialogService, private worker: SwUpdate) {
    this.worker.available.subscribe(event => {
      this.dialog.updateApplication();
    });
  }
}

Problem

Since the app is served on multiple domains, it also means each domains is managing it's own domain-based cache.

For example, when a user navigates to domain-a.com and a new version is available, the dialog will show and the page will refresh and this is ok.

However, if the same user navigates now to domain-b.com, he will experience the same thing and this is not what we want. Since this is the same application, we ideally want all domains to be up to date with the new version.

So the question is: is this even possible ? And if yes, what strategies can we implement in order to work around this issue ?

EDIT

Here is the partial content of my manifest as well as my service worker configuration:

manifest.webmanifest

{
  "name": "my-project",
  "short_name": "my-project",
  "theme_color": "#277f31",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [...]
}

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

How do you define the root in your manifest file and how to you define the URLs to cache in the service worker? — Francesco
@Francesco thanks for your reply. I edited my question to include the content of my files configuration. Let me know if you need more information — lkartono

Francesco Francesco · Accepted Answer · 2020-03-10T08:18:21

You use different domains and PWAs must obey to the Same Origin Policy restriction. The origin of the service worker script URL has to be the same as the origin of the page calling register() method. The same origin policy also affects the scope for the Cache or IndexedDB.

In your case you could have a single root domain, where you register the service worker and under it a series of sub-domains/paths. Like: domain.com/domain-a and domain.com/domain-b. This way you should still be able to provide a different user experience according to the final path chosen and you can use a centralised SW and cache among all subdomains.

I also suggest you to read this article where they advise against dividing sites into different origins.

Angular Service Worker update on multiple domains

Context

Problem

EDIT

1 Answers