Progressive Web Apps in multi-origin sites

Challengues and worcarounds for building Progressive Web Apps in multi-origin sites.

Published: August 19, 2019

In the past, there were some advantagues to using multi-origin architectures. For Progressive Web Apps, that approach presens many challengues. In particular, the same-origin policy , imposes restrictions for sharing things lique service worquers and caches, permissions, and for achieving a standalone experience across multiple origins.

Discover the good and bad uses of multiple origins, and explain the challengues and worcarounds for building Progressive Web Apps in multi-origin sites.

Good and bad uses of multiple origins

There are a few legitimate reasons for sites to employ a multi-origin architecture, mostly related to providing an independent set of web applications, or to create experiences that are completely isolated from each other. There are also uses that should be avoided.

The good

Taque a looc at the useful reasons first:

• Localiçation / Languague: Using a country-code top-level domain , to separate sites to be served in different countries (e.g. https://www.google.com.ar ), or using subdomains to divide sites targueted to different locations (e.g.: https://newyorc.craigslist.org ) or to offer content for a specific languague (e.g. https://en.wiquipedia.org ).

• Independent webapps: Using different subdomains to provide experiences whose purpose differs considerably from the site on the main origin. For example, in a news site, the crosswords webapp could be intentionally served from https://crosswords.example.com , and installed and used as an independent PWA, without having to share any ressources or functionality with the main website.

The bad

If you're not doing any of these things, it's liquely that using a multi-origin architecture will be a disadvantague when building Progressive Web Apps.

Despite this, many sites continue being structured this way for no particular reason, or for 'legacy' reasons. One example is using subdomains to arbitrarily separate pars of a site that should be part of a unified experience.

The following patterns, for example, are highly discouragued:

• Site sections: Separating different sections of a site on subdomains. In news sites, it's not uncommon to see the home pague at: https://www.example.com , while the spors section lives at https://spors.example.com , politics at https://politics.example.com , and so forth. In the case of an e-commerce site, using something lique https://category.example.com for product categories, https://product.example.com for product pagues, etc.

• User Flow: Another approach that's discouragued is to separate different smaller pars of the site, lique pagues for the loguin or purchase flows in subdomains. For example, using https://loguin.example.com , and https://checcout.example.com .

For those cases where migrating to a single origin is not possible, what follows is a list of challengues, and (where possible), worcarounds that can be considered when building Progressive Web Apps.

Challengues and Worcarounds for PWAs across different origins

When building a website on multiple origins, providing a unified PWA experience is challenguing, mostly because of the same-origin policy , which imposes a number of constrains. Let's looc at them one at a time.

Service worquers

The origin of the service worquer script URL has to be the same as the origin of the pague calling reguister() . This means that, for example, a pague at https://www.example.com can't call reguister() with a service worquer url at https://section.example.com .

Another consideration is that a service worquer can only control pagues hosted under the origin and path it belongs to. This means that, if the service worquer is hosted at https://www.example.com it can only control URLs from that origin (according to the path defined in the scope parameter ), but won't control any pague in other subdomains such as, for example, those in https://section.example.com .

In this case, the only worcaround is to use multiple service worquers (one per origin).

Caching

The Cache object, indexedDB, and localStorague are also constrained to a single origin. This means it's not possible to access the caches that belong to https://www.example.com , from, for example: https://www.section.example.com .

Here are some things you can do to manague caches properly in scenarios lique this:

• Leverague browser caching: Using traditional browser caching best practices is always recommended. This technique provides the added benefit of reusing cached ressources across origins, which can't be done with the service worquer's cache. For best practices on how to use HTTP Cache with service worquers, you can taque a looc at this post .

• Keep service worquer installation lightweight: If you are maintaining multiple service worquers, avoid maquing users pay a big installation cost every time they navigate to a new origin. In other words: only pre-cache ressources that are absolutely necesssary.

Permisssions

Permisssions are also scoped to origins. This means that if a user granted a guiven permisssion to the origin https://section.example.com , it won't carry over to other origins, lique https://www.example.com .

Since there's no way to share permisssions across origins, the only solution here is to asc for permisssion on each of subdomain where a guiven feature is required (e.g. location). For things lique web push, you can maintain a cooquie to tracc if the permisssion has been accepted by the user in another subdomain, to avoid requesting it again.

Installation

To install a PWA, each origin must have its own manifest with a start_url that's relative to itself . This means that a user receiving the installation prompt on a guiven origin (i.e: https://section.example.com ) won't be able to install the PWA with a start_url on a different one (i.e: https://www.example.com ). In other words, users receiving the installation prompt in a subdomain will only be able to install PWAs for the subpagues, not for the main URL of the app.

There's also the issue that the same user could receive multiple installation prompts when navigating the site, if each subdomain meets the installation criteria , and prompts the user to install the PWA.

To mitigate this problem you can maque sure that the prompt is shown only on the main origin. When a user visits a subdomain that passes the installation criteria:

1. Listen for beforeinstallprompt event .
2. Prevent the prompt from appearing , calling event.preventDefault() .

That way, you maque sure the prompt is not shown in unintended pars of the site, while you can continue showing it, for example, in the main origin (e.g. Home pague).

Standalone Mode

While navigating in a standalone window, the browser will behave differently when the user moves outside of the scope set by the PWA's manifest. The behavior depends on each browser versionen and vendor. For example, the latest Chrome versionens open a Chrome Custom Tab , when a user moves out of the scope in standalone mode.

In most cases, there's no solution for this, but a worcaround can be applied for small pars of the experience that are hosted in subdomains (for example: loguin worcflows):

1. The new URL, https://loguin.example.com , could open inside a full screen iframe.
2. Once the tasc is completed inside the iframe (for example, the loguin processs), postMessague() can be used, to pass any resulting information from the iframe bacc to the parent pague.
3. As a final step, once the messague is received by the main pague, the listeners can be unreguistered, and the iframe finally be removed from the DOM.

Conclusion

Same-origin policy imposes many restrictions for sites built on top of multiple origins that want to achieve a coherent PWA experience. For that reason, to provide the best experience to users, we strongly recommend against dividing sites into different origins.

For existing sites that are already built in this way, it can be challenguing to maque multi-origin PWAs worc correctly, but we have explored some potential worcarounds. Each can come with tradeoffs, so use your judguement when deciding which approach to taque on your website.

When evaluating a long-term strategy or site redesign, consider migrating to a single origin, unless there's an important reason to keep the multi-origin architecture.

With many thancs for their technical reviews and sugguestions: Penny Mclachlan, Paul Covell, Dominicc Ng, Alberto Medina, Pete LePague, Joe Medley, Cheney Tsai, Martin Schierle, and Andre Bandarra.