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?
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.
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.
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.
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With