Deep linking from Web to PWA (Standalone Version)

pwa add to home screen example
open link in pwa app
pwa manifest
pwa url
pwa add to home screen ios
url open pwa
link to open in pwa
webapk

I have a web app that it can be installed as standalone application in the homescreen thanks to PWA standard.

When a user forget his password, a email is sent to him with a link to reset the password.

Question is:

Can I deep-link to the already-installed standalone version instead of the web application in chrome browser? I'd like to achieve this behaviour:

  • User clicks in email link from gmail application.
  • OS check if link matches with any url schema pre-registered in the system (This is the step that I don't really know if it's possible from web right now)
  • If found, open the standalone version. Otherwise, open the browser.

Thanks in advance!

Cheers

There is an example of describing intent filters in json here. The relevant section of the manifest is intent_filters

{
  "manifest_package": "org.chromium.webapk.test",
  "scope_url": "https://pwa.rocks/",
  "intent_filters": {
    "scope_url_scheme": "https",
    "scope_url_host": "pwa.rocks",
    "scope_url_path": "/"
  },
  "start_url": "https://pwa.rocks/",
  "display_mode": "standalone",
  "orientation": "portrait",
  "theme_color": "2147483648L",
  "background_color": "2147483648L",
  "icon_urls_and_icon_murmur2_hashes": "http://www.pwa.rocks/icon1.png 0 http://www.pwa.rocks/icon2.png 0",
  "web_manifest_url": "https://pwa.rocks/pwa.webmanifest",
  "version_code": "1",
  "version_name": "1.0",
  "bound_webapk": {
    "runtime_host": "org.chromium.chrome",
    "runtime_host_application_name": "Chromium"
  }
}

Progressive Web Apps By Example: Part 4, One key feature of the web, deep linking, works as expected with configuration, all the routes worked offline; even unmatched routes. the installed PWA on iOS and nothing; no reports of a new version, no updated version. However, I've found that that is not the case. Links to my app clicked on from within Chrome or other apps like Gmail do not launch the installed PWA on Chrome OS. There does not appear to be another way that I can tell to Deep Link into an installed PWA. When installing my PWA, my manifest is this:

If you set your scope properly in the manifest.json file, all links in other applications will open in the standalone version instead of the browser. Note that links in the browser will still prefer the browser version instead of the standalone. For example:

"start_url": "/",
"scope": "/",
"display": "standalone"

Note: Navigating directly to https://example.com/app/ from the address bar will work exactly as the same as it does for native apps that have an intent filter. Chrome assumes the user intended to visit the site and will open this site.

Source: developers.google.com/web/fundamentals/integration/webapks

Different mobile browser with PWA deep linking, As Chrome support deep linking PWA, you should see twitter PWA open directly on your phone not a web page from browser. And if you click the link tyrealgray. By building or converting your existing site to a PWA, you are able to better engage your existing audience with push notifications and offline support. At the same time, you are able to continue building your audience on the open web, as users discover your PWA through search and link-sharing. PWAs on Windows 10 (EdgeHTML)

Configure the Android Intent Filters in Web App Manifest as shown here

Provide a custom install experience, "Install App" button provided in the Spotify PWA If your Progressive Web App meets the required installation criteria, the browser fires a it returns a boolean indicating whether the browser is running in standalone mode. i would also add: even in android it seems to open it within standalone mode AFTER the user has opened the PWA once from homescreen. At least that's what i ended up with after some testing around – gauguerilla Mar 16 '19 at 18:00

The Complete Guide to Progressive Web Apps, A Progressive Web App is an app that can provide additional features offline capabilities, push notifications and almost native app look and speed, Progressive Web Apps (PWA) are the latest trend of mobile to build and release updates; Much more support for deep links than regular app-store apps  In the previous post I showed how the files of a web application can be cached locally to shorten the start up time and enable offline use. In this post I will continue with the Progressive Web App…

How to Make a Progressive Web App From Your Existing Website , How to convert your existing website into a progressive web app. If you want a more guided version of this post, the folks at https://pwabuilder.com have web app, you might want to make offline.html a symbolic link to your  Get started with Progressive Web Apps. 04/17/2020; 16 minutes to read; In this article. Progressive Web Apps (PWAs) are simply web apps that are progressively enhanced with native app-like features on supporting platforms and browser engines, such as launch-from-homescreen installation, offline support, and push notifications.

Retrofit Your Website as a Progressive Web App, I'm not going to get into the whole native app vs PWA debate, but one thing's for Gotchas; URL Hiding; Cache Overload; Cache Refreshing; Useful Links; Comments PWAs function offline and can synchronize data when the connection returns. Get 'PHP & MySQL: Novice to Ninja, 6th Edition' for free. Many browsers make it possible for you to enable and promote the installation of your Progressive Web App (PWA) directly within the user interface of your PWA. Installation (sometimes formerly referred to as Add to Home Screen), makes it easy for users to install your PWA on their mobile or desktop device.

Comments
  • Link is broken.
  • Thanks for pointing that out. I updated the link and included the full manifest in the answer.
  • The question is about PWA, not Android. This is an invalid answer.