Javascript to check if PWA or mobile network is supported

Question

I was curious if anyone from the javascript method knows to determine if the web interface started as a PWA (progressive web application), or just started as a standard mobile site (with a full browser interface).

Is there any difference between the installed PWA and the one that does not, but still has a registered service employee and / or application cache?

Answer 1

If this is for analytical purposes, you can set the start URL in the manifest file to include the query string parameter, for example:

"start_url": "./?mode=standalone" 

Then in your JavaScript, you can check this query string parameter.

Updated (2017-01-20):

Alternatively, you can test JavaScript using:

 if (window.matchMedia('(display-mode: standalone)').matches) { console.log("This is running as standalone."); } 

Answer 2

Edit October 11, 2019: Added an additional switch to check application launch through TWA - document.referrer.include ('android-app: //')

This works for everyone - 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") } 

Answer 3

Progressive improvement is more a concept than a specific function or method that involves several technologies. Nowadays, progressive web applications are based on service employees who you can check to see if the browser supports it.

 // Check for browser support of service worker if ('serviceWorker' in navigator) 

The lighthouse project can help you determine if an application is progressively advanced by evaluating multiple technologies. Look at this.

Hope for this help to clarify.

Answer 4

 if (window.matchMedia('(display-mode: standalone)').matches) { console.log("This is running as standalone."); } 

This answer is correct, but it is worth mentioning that PWA can work in many display modes:

• full screen mode
• autonomous
• minimum
• browser

If you run PWA in full screen mode, it will return false , so additional checks are needed, such as:

 function isPwa() { var displayModes = ["fullscreen", "standalone", "minimal-ui"]; displayModes.forEach(function(displayMode) { if (window.matchMedia('(display-mode: ' + displayMode + ')').matches) { return true; } }); return false; } 

Note that checking window.matchMedia will return true for the browser display mode, even if it is not a installed PWA application.

Answer 5

In my PWA created using Microsoft Visual Studio 2017, the following statement works:

 var isPWA = navigator.userAgent.match(/MSAppHost/i);