search

pwa-builder / pwabuilder-windows10

PWABuilder Windows 10 Platform
Other
16 stars 17 forks source link

Support ability to check if the Windows app is installed #43

Closed valentinoli closed 3 years ago

valentinoli commented 3 years ago

I have a PWA in the Microsoft store thanks to pwabuilder.com! Great project, very commendable and progressive work!

After reading this pretty recent article on web.dev I was trying to see if I could detect whether a user has already installed the Windows app using navigator.getInstalledRelatedApps(), to decide whether or not to show an invitation to install the app. According to the article, this is supported on Edge 85+ and Chrome 85+. Of course, showing an install invitation can easily be avoided in standalone mode by checking the result of

window.matchMedia('(display-mode: standalone)').matches

but I wanted to see if I could also avoid it in browser mode by exploiting getInstalledRelatedApps() besides the other potential advantages.

The section in the article that explains how to support this for Windows apps explains the required steps:

  1. Add the Windows.appUriHandler extension registration to your app's manifest file Package.appxmanifest
  2. Create a JSON file named windows-app-web-link and provide your app's package family name
  3. Add the app info to the website's manifest related_applications property.

How far I managed to do each step:

  1. The Windows app manifest is generated by PWABuilder and it seems like the necessary AppUriHandler extension is missing in the appxmanifest-template.xml.
<Applications>
  <Application Id="{applicationId}" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

  1. I think I was able to do this correctly. I found the Package Family Name (PFN) in my Microsoft Partner Center account by selecting my app and then Product Management --> Product Identity. It would be convenient if pwabuilder.com could include all generated meta info in the output zip.

  2. This was more difficult than step 2 since the id property in related_applications follows the format <package-family-name>!<application-id>. The first part I already found out in step 2, but the application id is generated by pwabuilder from the short_name field in the web manifest. I could not find the generated value anywhere so I had to put it together by looking at the code in this repo.

So my question is, would it be possible to add the AppUriHandler extension to the app manifest? And could pwabuilder.com output important metadata, including the generated Application Id? I could not find it anywhere in Microsoft Partner Center.

JudahGabriel commented 3 years ago

Hey @valentinoli, glad you got your PWA in the Store! And thanks for the kind words.

window.matchMedia('(display-mode: standalone)').matches

Agreed the workaround for now is to check display mode to see if you're installed. But yes, this isn't ideal, and yes, we should make navigator.getInstalledRelatedApps() just work.

I found the Package Family Name (PFN) in my Microsoft Partner Center account by selecting my app and then Product Management --> Product Identity. It would be convenient if pwabuilder.com could include all generated meta info in the output zip.

Yeah, agreed we should have an easier way to do this. We're working on some things in this area to make it easier to get into the Store without having to futz with Partner Center. We don't have anything to announce yet.

This line is where the short_name field is used to generate the Application Id.

You're looking at the wrong code, that's our classic Edge (EdgeHTML) platform. We have a new Windows platform that is not yet open source.

would it be possible to add the AppUriHandler extension to the app manifest?

Yes, I'm glad to report this is already being worked on. I'll update here when it's available.

could pwabuilder.com output important metadata, including the generated Application Id?

This is more difficult, because it involves programmatic access to partner center, which we don't currently have. We'll do some digging and see if there's a way we can get this for you. If not, we'll document how to get it.

JudahGabriel commented 3 years ago

FYI, .appxbundle and .msixbundle files are actually just .zip files. They contain .msix or .appx files, which are also just zip files. Feel free to crack them open and experiment.

valentinoli commented 3 years ago

@JudahGabriel Thanks for the feedback! Looking forward to the update :)

valentinoli commented 3 years ago

@JudahGabriel Thanks for the tip, didn't know they were zip files. So I tried cracking them open and was able to edit the app manifest. How would you suggest proceeding with re-bundling the package and bundle? Can I do it myself? I am on a Windows machine and tried using makeappx.exe but was unsuccessful. Kept receiving the error 

MakeAppx : error: Error info: error C00CE014: App manifest validation error: The app manifest must be valid as per schema: 
Line 11, Column 4, Note: The schema for MaxVersionTested specified does not recognize XML fields with namespace 
"http://schemas.microsoft.com/appx/manifest/uap/windows10/10". Please ensure that you have the correct MaxVersionTested 
specified. Reason: Element '{http://schemas.microsoft.com/appx/manifest/uap/windows10/10}HostRuntimeDependency' is 
unexpected according to content model of parent element 
'{http://schemas.microsoft.com/appx/manifest/foundation/windows10}Dependencies'.

Expecting: {http://schemas.microsoft.com/appx/manifest/foundation/windows10}TargetDeviceFamily, 
{http://schemas.microsoft.com/appx/manifest/foundation/windows10}PackageDependency, 
{http://schemas.microsoft.com/appx/manifest/foundation/windows10}MainPackageDependencyChoice, 
{http://schemas.microsoft.com/appx/manifest/foundation/windows10}MainPackageDependencyChoice2, 
{http://schemas.microsoft.com/appx/manifest/uap/windows10/5}DriverDependency, 
{http://schemas.microsoft.com/appx/manifest/uap/windows10/7}OSPackageDependency.

MakeAppx : error: Package creation failed.
MakeAppx : error: 0x80080204 - The specified package format is not valid: The package manifest is not valid.
JudahGabriel commented 3 years ago

Ah, MakeAppx is complaining it doesn't know what HostRuntimeDependency is. In fact, it's the new Hosted App Model, introduced in May 2020 Update for Windows.

This error means you're running an old Windows SDK. Install the latest one, and it should work.

Just to be clear, the getInstalledRelatedApps() still needs support from the Chromium Edge team. Even if you update your AppxManifest.xml and repackage using the right version of MakeAppx.exe, calling .getInstalledRelatedApps() won't work until the Edge team ships support for this.

I'll update this thread when support for this lands in Edge.

valentinoli commented 3 years ago

Ah, didn't occur to me to simply try to update the SDK! Never used it before :) Thanks a lot @JudahGabriel it works now.

I thought getInstalledRelatedApps() was supported in Edge 85+ since the article states it. Then that might be misinformation. But at least it is supported on Chrome 85+ so I should be able to test it there?

JudahGabriel commented 3 years ago

I thought getInstalledRelatedApps() was supported in Edge 85+ since the article states it.

I think that article refers to it working for UWP apps: the old-style "PWA" apps in the Microsoft Store: an EdgeHTML (classic Edge) web view inside a UWP host.

It may not take into account the new Hosted App Model: a real PWA as an app, no web view or UWP glue. Does .getInstalledRelatedApps() work there? I'm not so sure.

By all means, experiment away! 😊 Let me know what you find.

valentinoli commented 3 years ago

It may not take into account the new Hosted App Model: a real PWA as an app, no web view or UWP glue. Does .getInstalledRelatedApps() work there?

Yes, I think you're right. .getInstalledRelatedApps() does not seem to work in that case. Well, I updated the app packages, and the changes were verified and a new version published to the store, I followed all the steps scrupulously and my config does not work in Edge or Chrome.

At least I was able to change the package language (see https://github.com/pwa-builder/pwabuilder-windows-chromium-docs/issues/4) and hopefully when the new Hosted App Model will be supported the changes I made will come in handy.

JudahGabriel commented 3 years ago

Folks, this issue has been opened on an obsolete repository. If you still need help or want to follow-up on anything mentioned in this thread, please open an issue on our main PWABuilder repository.