Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 759
PorcupineRending Avatar asked Jan 19 '17 12:01

PorcupineRending


People also ask

How do you check if an app is installed from a webpage on an Android?

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.

Is PWA mobile only?

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.


2 Answers

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."); } 
like image 109
Kevin Farrugia Avatar answered Sep 20 '22 06:09

Kevin Farrugia


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") } 
like image 23
Gary Vernon Grubb Avatar answered Sep 21 '22 06:09

Gary Vernon Grubb