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?
Advertisement
Answer
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.
Update (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);
Update (2017-01-20):
Alternatively you could check in JavaScript using:
if (window.matchMedia('(display-mode: standalone)').matches) { console.log("This is running as standalone."); }