javascriptprogressive-web-apps

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

  • 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);

    Read more: https://petelepage.com/blog/2020/08/measure-understand-how-installed-pwa-users-differ-from-browser-tab-users/

    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.");
}