Click URL to open PWA automatically

%3CLINGO-SUB%20id%3D%22lingo-sub-2192994%22%20slang%3D%22en-US%22%3EClick%20URL%20to%20open%20PWA%20automatically%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2192994%22%20slang%3D%22en-US%22%3E%3CP%3EThere%20is%20a%20flag%20in%20Canary%26nbsp%3B%3CSPAN%3E90.0.817.0%20that%20I%20had%20high%20hopes%20for%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EDesktop%20PWA%20URL%20handling%3C%2FP%3E%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CSPAN%3EEnable%20web%20app%20manifests%20to%20declare%20URL%20handling%20behavior.%20Prototype%20implementation%20of%3A%20%3CA%20title%3D%22GitHub%20explainer%22%20href%3D%22https%3A%2F%2Fgithub.com%2FWICG%2Fpwa-url-handler%2Fblob%2Fmaster%2Fexplainer.md%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FWICG%2Fpwa-url-handler%2Fblob%2Fmaster%2Fexplainer.md%3C%2FA%3E%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%E2%80%93%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20class%3D%22platforms%22%3EMac%2C%20Windows%2C%20Linux%3C%2FSPAN%3E%3C%2FP%3E%3CP%20class%3D%22lia-indent-padding-left-30px%22%20data-unlink%3D%22true%22%3E%23enable-desktop-pwas-url-handling%26nbsp%3B%3C%2FP%3E%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIts%20my%20understanding%20that%20so%20long%20as%20a%20PWA's%20manifest%20contains%20the%20right%20entries%2C%20with%20this%20flag%20enabled%2C%20clicking%20on%20a%20specific%20link%20should%20automatically%20open%20the%20URL%20in%20the%20appropriate%20PWA%20rather%20than%20in%20the%20browser.%26nbsp%3B%20So%20far%2C%20it%20doesn't%2C%20at%20least%20for%20a%20Twitter%20PWA.%20I%20tried%20two%20different%20ones%3A%20the%20one%20offered%20by%20an%20icon%20in%20the%20address%20bar%20at%20twitter.com%2C%20and%20the%20other%20installed%20by%20using%20Edge's%26nbsp%3B%3CEM%3EInstall%20this%20site%20as%20an%20app%3C%2FEM%3E%20option%20which%20is%20apparently%20the%20same.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20noticed%20some%20differences%20between%20elements%20in%20the%20app's%20manifest%20and%20the%20ones%20specified%20in%20the%20GitHub%20explainer%2C%20for%20example%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CTABLE%20border%3D%221%22%20width%3D%22100%25%22%3E%3CTBODY%3E%3CTR%3E%3CTD%20width%3D%2250%25%22%3E%3CP%3E%22display_mode%22%3C%2FP%3E%3C%2FTD%3E%3CTD%20width%3D%2250%25%22%3E%3CP%3E%22display%22%3C%2FP%3E%3C%2FTD%3E%3C%2FTR%3E%3CTR%3E%3CTD%20width%3D%2250%25%22%3E%3CP%3E%22url_handlers%22%3A%5B%7B%22origin%22%3A%22twitter.com%22%7D%5D%3C%2FP%3E%3C%2FTD%3E%3CTD%20width%3D%2250%25%22%3E%3CP%3E%22url_handlers%22%3A%20%7B%22scope%22%3A%20%7B%22matches%22%3A%20%5B%20%22%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2F*%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Ftwitter.com%2F*%3C%2FA%3E%22%20%5D%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FTD%3E%3C%2FTR%3E%3C%2FTBODY%3E%3C%2FTABLE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20do%20we%20make%20this%20work%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2352196%22%20slang%3D%22en-US%22%3ERe%3A%20Click%20URL%20to%20open%20PWA%20automatically%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2352196%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9548%22%20target%3D%22_blank%22%3E%40Noel%20Burgess%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EHere%20are%20a%20couple%20of%20sample%20apps%20with%20working%20configuration%20for%20URL%20handling.%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fluhuangmsft.github.io%2Fpwa%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EHello!%20(luhuangmsft.github.io)%3C%2FA%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fmandymsft.github.io%2Fpwa%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EHello!%20(mandymsft.github.io)%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EFrom%20then%20DevTools%20Application%20pane%2C%20you%20can%20see%20that%20their%20manifests%20contains%20%22url_handlers%22%20entries%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fluhuangmsft.github.io%2Fpwa%2Fmanifest.json%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fluhuangmsft.github.io%2Fpwa%2Fmanifest.json%3C%2FA%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fmandymsft.github.io%2Fpwa%2Fmanifest.json%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmandymsft.github.io%2Fpwa%2Fmanifest.json%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3Eweb-app-origin-association%20files%20that%20complete%20the%20handshake%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fluhuangmsft.github.io%2F.well-known%2Fweb-app-origin-association%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fluhuangmsft.github.io%2F.well-known%2Fweb-app-origin-association%3C%2FA%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fmandymsft.github.io%2F.well-known%2Fweb-app-origin-association%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmandymsft.github.io%2F.well-known%2Fweb-app-origin-association%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3Emandymsft.github.io%2Fpwa%20is%20able%20to%20handle%20links%20from%20luhuangmsft.github.io%2Fpwa%20but%20not%20vice%20versa.%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3ETo%20test%20this%20behavior%2C%20you%20should%3A%3CBR%20%2F%3E*%20use%20Edge%2091%20or%20above%3CBR%20%2F%3E*%20enable%20%3CA%20class%3D%22permalink%22%20tabindex%3D%226%22%20href%3D%22edge%3A%2F%2Fflags%2F%23enable-desktop-pwas-url-handling%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3E%23enable-desktop-pwas-url-handling%3C%2FA%3E%26nbsp%3Bfrom%20edge%3A%2F%2Fflags%3C%2FP%3E%0A%3CP%3E*%20configure%20the%20browser%20installation%20to%20be%20the%20default%20web%20browser%20in%20system%20settings%3CBR%20%2F%3E*%20install%20one%20or%20both%20of%20the%20sample%20apps%3C%2FP%3E%0A%3CP%3E*%20Test%20with%20a%20link%20in%20other%20applications%2C%20a%20URL%20in%20run.exe%20(Win%2BR)%2C%20or%20a%20URL%20as%20a%20command%20line%20argument.%26nbsp%3B%3CBR%20%2F%3E*%20Eg.%20%24%20msedge.exe%20%3CA%20href%3D%22https%3A%2F%2Fluhuangmsft.github.io%2Fpwa%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fluhuangmsft.github.io%2Fpwa%2F%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CDIV%20class%3D%22flex%20experiment-actions%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2360982%22%20slang%3D%22en-US%22%3ERe%3A%20Click%20URL%20to%20open%20PWA%20automatically%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2360982%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1053209%22%20target%3D%22_blank%22%3E%40LuHuangMSFT%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks!%20Off%20to%20play%20...%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

There is a flag in Canary 90.0.817.0 that I had high hopes for:

Desktop PWA URL handling

Enable web app manifests to declare URL handling behavior. Prototype implementation of: https://github.com/WICG/pwa-url-handler/blob/master/explainer.md  Mac, Windows, Linux

#enable-desktop-pwas-url-handling 

 

Its my understanding that so long as a PWA's manifest contains the right entries, with this flag enabled, clicking on a specific link should automatically open the URL in the appropriate PWA rather than in the browser.  So far, it doesn't, at least for a Twitter PWA. I tried two different ones: the one offered by an icon in the address bar at twitter.com, and the other installed by using Edge's Install this site as an app option which is apparently the same.

 

I noticed some differences between elements in the app's manifest and the ones specified in the GitHub explainer, for example:

 

"display_mode"

"display"

"url_handlers":[{"origin":"twitter.com"}]

"url_handlers": {"scope": {"matches": [ "https://twitter.com/*" ]}

 

 

How do we make this work?

 

2 Replies

Hi @Noel Burgess 

Here are a couple of sample apps with working configuration for URL handling.
Hello! (luhuangmsft.github.io)
Hello! (mandymsft.github.io)

From then DevTools Application pane, you can see that their manifests contains "url_handlers" entries:
https://luhuangmsft.github.io/pwa/manifest.json
https://mandymsft.github.io/pwa/manifest.json

web-app-origin-association files that complete the handshake:

https://luhuangmsft.github.io/.well-known/web-app-origin-association
https://mandymsft.github.io/.well-known/web-app-origin-association

mandymsft.github.io/pwa is able to handle links from luhuangmsft.github.io/pwa but not vice versa. 

To test this behavior, you should:
* use Edge 91 or above
* enable  from edge://flags

* configure the browser installation to be the default web browser in system settings
* install one or both of the sample apps

* Test with a link in other applications, a URL in run.exe (Win+R), or a URL as a command line argument. 
* Eg. $ msedge.exe https://luhuangmsft.github.io/pwa/

 

 

@LuHuangMSFT 

 

Thanks! Off to play ...