CODEWITHSUNDEEP
nestedmanifestservice-workerprogressive-web-apps
Aabhas Gupta
Aabhas Gupta

Reputation: 105

Progressive web app within the scope of another progressive web app

I wish to make a progressive web app for a domain www.xyz.com and another progressive web app for the domain www.xyz.com/abc. How should I go about it and what will be the behaviour of service workers in both the cases? Will there be 2 service worker registrations or a single one will work for both the PWAs? Also, should I make 2 manifest files for them?

Upvotes: 2

Views: 981

Answers (1)

Francesco
Francesco

Reputation: 10830

You can have only one PWA for both URLs. When you create your service worker, its scope covers the current folders and the relative children. If you place it at the root level, you can use one service worker for both URLs, without the need to make thinks more complex introducing nested constructions.

You can define different caching strategies within the same service worker with ease.

If you want to deepen the PWA topic, you can have a look at the articles I wrote about them, starting from basic concepts and then going deeper with more advanced themes.

Update

The scope property of the manifest file determines which HTTP calls can be intercepted by the Service Worker (SW).

If you have scope: '/', your SW will intercept all HTTP requests made by your app.
If it would be /user, the SW couldn't intercept a request that doesn't fall within its scope (e.g. /orders/code.js), but it would intercept all GET calls under the user root, like /user/details.

In your case you can have therefore two SWs (even on the same page) where you can define different scopes to intercept, you have just to be careful in not overlapping the scopes among them. If you plan to cache also static assets, keep it in mind that the scope for the SW is given by the folder where the SW file is stored and its subfolders.

About multiple manifest files, Jeff gave an answer about it on SO.

Upvotes: 1

Related Questions