Javascript to check if PWA or Mobile Web
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?
Solution 1:
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.
Updated (2020-08-19)
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/
Updated (2017-01-20):
Alternatively you could check in JavaScript using:
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("This is running as standalone.");
}
Solution 2:
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")
}