Detect if web app is running as PWA through the Microsoft Store

Question

I submitted a PWA to the Microsoft Store and got the following notes on my submission:

10.8.5 Your app or app metadata includes links that promote installation or purchase of software outside the Store. Your app may promote or distribute software only through the Microsoft Store.

The reason for this is that my web app has a products page with links to the various platforms the app is available on. This is so that users visiting my web app using a browser get the ability to install it as "native" app on their platform rather.

How can I detect if my web app is running as PWA through the Microsoft Store, so that I can render a trimmed version of my app without the products page?

My first idea would be to check the navigator.userAgent, but this seems ambiguous, since the user agent will be Microsoft Edge whether the app is running "natively" or is visited manually in the browser.

I'd prefer solutions for distinguishing these use cases in JavaScript, but I'm also open for completely different approaches.

Cho

Here is an official solution from Microsoft to bundle and publish your app to Windows store. Have your tried with this and you still geting this issue? Do you have anything more than manifest file as in the PWA builder for other platforms to install your site as an app? If you just have one common manifest and the user is prompted when visited in browser, that shouldn't cause any error for your app deployment in windows app store. – Settlings

I did use the PWABuilder and I do have one common manifest file, but the problem is not related to the manifest itself. Rather, it's about recognizing the environment/context the app is running in... – Cho

Answer 1

The correct official way is to check for window.Windows. The whole WinRT API surface is injected when running as a Store app. So, you can (and should) do the following rather than user-agent sniffing:

if (window.Windows) {
  // running as a Windows app
}
else {
  // running in browser
}

Prelate

except if you are requesting a special capability (eg. private networks) which prevents WinRT API access ;) – Kuching

Answer 2

I realized that the user agent wasn't so ambiguous after all.

Microsoft Edge does indicate when it is running as an app host by adding MSAppHost/<WebView Rev> to its user agent.

Example:

On my machine, the user agent of my hosted PWA lists "MSAppHost/3.0":

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; MSAppHost/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063

Solution:

Testing navigator.userAgent for the string MSAppHost/ discloses if the web app is running as an hosted app.

I'm using this check now for my server-side and client-side rendering to strip any content linking to external stores.

Cho

Answer 3

You can check document.referrer. If it equals to "app-info://platform/microsoft-store", your Web app was installed from Microsoft Store. This feature was first introduced in Edge version 91.

Atropine

I used the same method as well. But be careful document.referrer is not always there. Look at this link for context please: micahjon.com/2021/detect-microsoft-store-pwa – Crispy