Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are PWA sites in same domain not able to install both on home screen?

I created 2 PWA sites
https://s.maplat.jp/r/naramap and https://s.maplat.jp/r/aizumap

But these are not able to install on home screen together.
Once the one installed, the other cannot install.

Are there any specifications or limitations to install PWAs on same domain?

like image 336
kochizufan Avatar asked May 27 '18 02:05

kochizufan


People also ask

How do I add PWA to my home screen?

Open the menu next to the URL bar. Depending on whether you're using Chrome or Android you'll see a menu option "Install" or "Install App". This is the "Add to Home screen" option displayed for any site that has the necessary features in place.

How to host two apps on one PWA?

If you have two apps in same domain, map it to two different sub-domain with one service works for each of the sub-domain. That will enable you to host it as a two different PWA and both can be added to home screen.

What happens when a PWA is installed to the home screen?

To oversimplify what happens to make it easy to understand, when a PWA is installed to the home screen it is packaged within an APK, the Android app packaging. It sort of creates an Android app, but without elevating it to a full blown Android app in a hybrid wrapper.

How do I install a PWA from a browser?

While installation differs per browser and operating system, you don't need to create any kind of package or executable for your PWA to be installed from a browser. Every browser has a criterion that marks when a website or web app is a Progressive Web App and can be installed for a standalone experience.

Can I build multiple PWAs at the same time?

Building different PWAs in distinct origins, by using subdomains is a good practice. The second approach is building the different PWAs on the same origin. This includes the following scenarios: Multiple PWAs or conceptual "web apps", hosted on the same origin, with non-overlapping paths.


2 Answers

You can accomplish this with scoped apps. Update your manifest files to include a scope parameter with a value of the path that "app" should be served under.

"scope": "/r/aizumap/",

and

"scope": "/r/naramap/",

You can still be able to use a single service worker but each sub app will need to have a trailing / in it's path for the start_url/scope to work.

You can see a sample I've made and the source. It has a parent app, and two sub apps.

like image 112
abraham Avatar answered Oct 22 '22 09:10

abraham


If you have two apps in same domain, map it to two different sub-domain with one service works for each of the sub-domain. That will enable you to host it as a two different PWA and both can be added to home screen.

https://s.maplat.jp/r/naramap -> https://naramap.maplat.jp/r/ 

https://s.maplat.jp/r/aizumap -> https://aizumap.maplat.jp/r/
like image 24
Anand Avatar answered Oct 22 '22 08:10

Anand