I was curious if anyone knew a javascript based method for detecting whether the web experience was being run as a PWA (progressive web app) or it was simply being run as a standard mobile website (with full browser UI).
Is there any difference between a PWA that is "installed" versus one that isn't but still has the service worker and/or app cache registered?
But you can do a trick to open the app if it's installed or open its Google Play page if it isn't. Explaining: when the user navigates to http://www.myurl.com/openmyapp, if the app is installed, an intent will be created and the Activity will be shown.
Installing a PWA is now possible on almost any device, except for wearables and TVs. On mobile devices, the user experience of installing PWAs varies widely.
If this is for analytical purposes you could set the start URL in the manifest file to include a query string parameter, ex:
"start_url": "./?mode=standalone"
Then in your JavaScript you are able to check for this query string parameter.
Pete LePage wrote a blog on how to setup a custom dimension in Google Analytics using the code below which checks the display mode using window.matchMedia
:
let displayMode = 'browser'; const mqStandAlone = '(display-mode: standalone)'; if (navigator.standalone || window.matchMedia(mqStandAlone).matches) { displayMode = 'standalone'; } ga('set', 'dimension1', displayMode);
Read more: https://petelepage.com/blog/2020/08/measure-understand-how-installed-pwa-users-differ-from-browser-tab-users/
Alternatively you could check in JavaScript using:
if (window.matchMedia('(display-mode: standalone)').matches) { console.log("This is running as standalone."); }
Edit 11 Oct 2019: Added an extra switch to check if the app is launched via TWA - document.referrer.includes('android-app://')
This works for all - TWA, Chrome & Safari:
const isInStandaloneMode = () => (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://'); if (isInStandaloneMode()) { console.log("webapp is installed") }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With