Ggtcf

Organic chemistry Iodoform Reaction

How do ultrasonic sensors differentiate between transmitted and received signals?

Are Warlocks Arcane or Divine?

Can the electrostatic force be infinite in magnitude?

Calculating the number of days between 2 dates in Excel

Blender - show edges angles “direction”

Perfect riffle shuffles

What will be the benefits of Brexit?

What is the opposite of 'gravitas'?

Indicating multiple different modes of speech (fantasy language or telepathy)

Installing PowerShell on 32-bit Kali OS fails

My boss asked me to take a one-day class, then signs it up as a day off

Is infinity mathematically observable?

Is a naturally all "male" species possible?

Why does this part of the Space Shuttle launch pad seem to be floating in air?

Invariance of results when scaling explanatory variables in logistic regression, is there a proof?

Hostile work environment after whistle-blowing on coworker and our boss. What do I do?

What (else) happened July 1st 1858 in London?

In Star Trek IV, why did the Bounty go back to a time when whales were already rare?

Superhero words!

Have I saved too much for retirement so far?

"lassen" in meaning "sich fassen"

What was required to accept "troll"?

What do you call the infoboxes with text and sometimes images on the side of a page we find in textbooks?

Javascript to check if PWA or Mobile Web

Is there a way to Detect if the app is running on web or PWA?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?Which equals operator (== vs ===) should be used in JavaScript comparisons?Setting “checked” for a checkbox with jQuery?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

17

6

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?

javascript progressive-web-apps

share|improve this question

edited Jan 19 '17 at 16:47

PorcupineRending

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That distinction is somewhat murky, since both are fundamentally built using the same technologies. What exactly do you want to detect?
  
  – deceze♦
  Jan 19 '17 at 13:15
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @deceze basically, whether or not it's been installed via as a legit PWA or if it's just running like a standard site. I'm not all that familiar with service workers and caches but I'm guessing that you can register both without something legitimately being installed as a PWA (like on a phone). Maybe the best way to check is whether the browser UI is visible but I'm not sure if that's accessible via JS.
  
  – PorcupineRending
  Jan 19 '17 at 16:45
  
  

  
  
  
  

add a comment | 

17

6

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?

javascript progressive-web-apps

share|improve this question

edited Jan 19 '17 at 16:47

PorcupineRending

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That distinction is somewhat murky, since both are fundamentally built using the same technologies. What exactly do you want to detect?
  
  – deceze♦
  Jan 19 '17 at 13:15
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @deceze basically, whether or not it's been installed via as a legit PWA or if it's just running like a standard site. I'm not all that familiar with service workers and caches but I'm guessing that you can register both without something legitimately being installed as a PWA (like on a phone). Maybe the best way to check is whether the browser UI is visible but I'm not sure if that's accessible via JS.
  
  – PorcupineRending
  Jan 19 '17 at 16:45
  
  

  
  
  
  

add a comment | 

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?

javascript progressive-web-apps

share|improve this question

edited Jan 19 '17 at 16:47

PorcupineRending

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

share|improve this question

edited Jan 19 '17 at 16:47

PorcupineRending

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

share|improve this question

edited Jan 19 '17 at 16:47

PorcupineRending

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

asked Jan 19 '17 at 12:59

PorcupineRendingPorcupineRending

175214

3 Answers
3

active

oldest

votes

35

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 (2017-01-20):

Alternatively you could check in JavaScript using:

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

share|improve this answer

edited Jan 20 '17 at 18:21

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Kevin, this is helpful. If this isn't possible, because of company politics (or other issues), can you think of any other way to differentiate the two?
  
  – PorcupineRending
  Jan 20 '17 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Updated my original answer, you are able to check in JavaScript using: window.matchMedia('(display-mode: standalone)').matches
  
  – Kevin Farrugia
  Jan 20 '17 at 18:21
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you Kevin this is awesome and seems to work perfectly!
  
  – PorcupineRending
  Jan 20 '17 at 23:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In case of setting start_url how will you detect this in JS code whethere app is running on which mode ?
  
  – Pardeep Jain
  Mar 16 '18 at 6:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PardeepJain you are able to check the query string, (ex: location.search.indexOf("mode"))
  
  – Kevin Farrugia
  Mar 16 '18 at 13:14
  
  

  
  
  
  

 | 
show 2 more comments

4

Progressive enhancement is more a concept than an specific function or method that involves several technologies. Now progressive web apps are base on service workers which you can verify if the browser support it.

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

Project lighthouse can help you to detect whether an application is progressive enhanced by performing evaluations of several technologies. Take a look on it.

Hope this help, to clarify.

share|improve this answer

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I guess I should specify. This is for analytics purposes so I want to know if there is a way to tell with Javascript whether someone is currently viewing the PWA version of the site or the regular version. I was thinking maybe checking to see if the service worker is registered but couldn't it be registered even on mobile web if the site hasn't been "installed"?
  
  – PorcupineRending
  Jan 19 '17 at 16:35
  

  
  
  
  

add a comment | 

4

This works for both Chrome & Safari:

const isInStandaloneMode = () =>
 (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) 
 console.log("webapp is installed")

share|improve this answer

edited Oct 14 '18 at 8:38

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41742390%2fjavascript-to-check-if-pwa-or-mobile-web%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

35

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 (2017-01-20):

Alternatively you could check in JavaScript using:

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

share|improve this answer

edited Jan 20 '17 at 18:21

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Kevin, this is helpful. If this isn't possible, because of company politics (or other issues), can you think of any other way to differentiate the two?
  
  – PorcupineRending
  Jan 20 '17 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Updated my original answer, you are able to check in JavaScript using: window.matchMedia('(display-mode: standalone)').matches
  
  – Kevin Farrugia
  Jan 20 '17 at 18:21
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you Kevin this is awesome and seems to work perfectly!
  
  – PorcupineRending
  Jan 20 '17 at 23:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In case of setting start_url how will you detect this in JS code whethere app is running on which mode ?
  
  – Pardeep Jain
  Mar 16 '18 at 6:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PardeepJain you are able to check the query string, (ex: location.search.indexOf("mode"))
  
  – Kevin Farrugia
  Mar 16 '18 at 13:14
  
  

  
  
  
  

 | 
show 2 more comments

35

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 (2017-01-20):

Alternatively you could check in JavaScript using:

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

share|improve this answer

edited Jan 20 '17 at 18:21

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Kevin, this is helpful. If this isn't possible, because of company politics (or other issues), can you think of any other way to differentiate the two?
  
  – PorcupineRending
  Jan 20 '17 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Updated my original answer, you are able to check in JavaScript using: window.matchMedia('(display-mode: standalone)').matches
  
  – Kevin Farrugia
  Jan 20 '17 at 18:21
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you Kevin this is awesome and seems to work perfectly!
  
  – PorcupineRending
  Jan 20 '17 at 23:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In case of setting start_url how will you detect this in JS code whethere app is running on which mode ?
  
  – Pardeep Jain
  Mar 16 '18 at 6:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PardeepJain you are able to check the query string, (ex: location.search.indexOf("mode"))
  
  – Kevin Farrugia
  Mar 16 '18 at 13:14
  
  

  
  
  
  

 | 
show 2 more comments

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 (2017-01-20):

Alternatively you could check in JavaScript using:

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

share|improve this answer

edited Jan 20 '17 at 18:21

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

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

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

share|improve this answer

edited Jan 20 '17 at 18:21

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

answered Jan 19 '17 at 19:13

Kevin FarrugiaKevin Farrugia

2,2311732

4

Progressive enhancement is more a concept than an specific function or method that involves several technologies. Now progressive web apps are base on service workers which you can verify if the browser support it.

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

Project lighthouse can help you to detect whether an application is progressive enhanced by performing evaluations of several technologies. Take a look on it.

Hope this help, to clarify.

share|improve this answer

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I guess I should specify. This is for analytics purposes so I want to know if there is a way to tell with Javascript whether someone is currently viewing the PWA version of the site or the regular version. I was thinking maybe checking to see if the service worker is registered but couldn't it be registered even on mobile web if the site hasn't been "installed"?
  
  – PorcupineRending
  Jan 19 '17 at 16:35
  

  
  
  
  

add a comment | 

4

Progressive enhancement is more a concept than an specific function or method that involves several technologies. Now progressive web apps are base on service workers which you can verify if the browser support it.

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

Project lighthouse can help you to detect whether an application is progressive enhanced by performing evaluations of several technologies. Take a look on it.

Hope this help, to clarify.

share|improve this answer

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I guess I should specify. This is for analytics purposes so I want to know if there is a way to tell with Javascript whether someone is currently viewing the PWA version of the site or the regular version. I was thinking maybe checking to see if the service worker is registered but couldn't it be registered even on mobile web if the site hasn't been "installed"?
  
  – PorcupineRending
  Jan 19 '17 at 16:35
  

  
  
  
  

add a comment | 

Progressive enhancement is more a concept than an specific function or method that involves several technologies. Now progressive web apps are base on service workers which you can verify if the browser support it.

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

Project lighthouse can help you to detect whether an application is progressive enhanced by performing evaluations of several technologies. Take a look on it.

Hope this help, to clarify.

share|improve this answer

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

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

share|improve this answer

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

answered Jan 19 '17 at 14:32

HosarHosar

2,67221623

4

This works for both Chrome & Safari:

const isInStandaloneMode = () =>
 (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) 
 console.log("webapp is installed")

share|improve this answer

edited Oct 14 '18 at 8:38

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

add a comment | 

4

This works for both Chrome & Safari:

const isInStandaloneMode = () =>
 (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) 
 console.log("webapp is installed")

share|improve this answer

edited Oct 14 '18 at 8:38

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

add a comment | 

This works for both Chrome & Safari:

const isInStandaloneMode = () =>
 (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) 
 console.log("webapp is installed")

share|improve this answer

edited Oct 14 '18 at 8:38

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

const isInStandaloneMode = () =>
 (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

 if (isInStandaloneMode()) 
 console.log("webapp is installed")

share|improve this answer

edited Oct 14 '18 at 8:38

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058

answered Oct 8 '18 at 4:19

Gary Vernon GrubbGary Vernon Grubb

51058