Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open installed PWA from external url

Is there any method to open website (PWA) urls in the installed PWA in iOS- Safari?

Use case: I'm sending email links to login in my PWA, how can I make this url's open directly with the installed PWA instead of the browser?

like image 276
Patriciu Nista Avatar asked Jun 19 '18 13:06

Patriciu Nista


People also ask

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.

How do I handle URLs for my own domain in PWA?

Enter a URL that your app handles. Press Enter. At the moment, only PWAs that were installed from the default system browser can handle URLs. DevTools Tips is a demo Progressive Web App (PWA) that handles URLs for its own domain, so that the app opens instead of the website when a URL for its domain is used.

Is it possible to open PWA from URL in iOS?

No support to open PWA from url in iOS, as of today. – Kees van Dieren Jun 2 '21 at 12:19 Add a comment | 5 For iOS, there is actually a very unknown way which you can install a .mobileconfig profile which installs a web clip (or multiple web clips if you like).

How to enable PWA url handling in Microsoft Edge?

In Microsoft Edge, go to edge://flags. In the Search flags text box, type "url handling". The Desktop PWA URL handling setting appears. Change the setting from Default to Enabled, and then click the Restart button. URL handling is an origin trial in Microsoft Edge. Learn how to enroll your site in an origin trial.


2 Answers

For iOS, there is actually a very unknown way which you can install a .mobileconfig profile which installs a web clip (or multiple web clips if you like).

This will run your website in fullscreen and is very similar to how iOS PWAs work. You can also link to it online or send it as an Email attachment for your users to install.

Just make sure you add this for the webpage to open fullscreen:

<key>FullScreen</key> <true/> 

You can read more about creating your own from scratch here:

https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html

or if you have a Mac you can get the "Apple Configurator 2" App:

https://apps.apple.com/us/app/apple-configurator-2/id1037126344

or you can take the easy route and use a generator here if you don't have a Mac:

https://webclip.glitch.me/

like image 33
devwk Avatar answered Oct 14 '22 11:10

devwk


If you are using Chrome in Android or any of the desktop OS, that would be the default behavior.

Check on "Android intent filter" in this link.

This feature is not supported in iOS yet for PWA apps(created using Safari- the only option for iOS as of June-2018).See "What PWAs can do on Android and not on iOS" section last point.

like image 94
Anand Avatar answered Oct 14 '22 11:10

Anand