Javascript pour vérifier si PWA ou Mobile Web

Question

J'étais curieux de savoir si quelqu'un connaissait une méthode basée sur javascript pour détecter si l'expérience Web était exécutée en tant que PWA (application Web progressive) ou simplement en tant que site Web mobile standard (avec une interface utilisateur de navigateur complète).

Y a-t-il une différence entre un PWA qui est "installé" et un qui ne l'est pas, mais qui a toujours le cache du travailleur de service et/ou de l'application enregistré?

Answer 1

Si c'est à des fins analytiques, vous pouvez définir l'URL de début dans le fichier manifeste pour inclure un paramètre de chaîne de requête, par exemple:

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

Ensuite, dans votre JavaScript, vous pouvez vérifier ce paramètre de chaîne de requête.

Mise à jour (2017-01-20):

Vous pouvez également archiver JavaScript en utilisant:

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

Answer 2

Cela fonctionne pour les deux Chrome & Safari:

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

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

Answer 3

L'amélioration progressive est plus un concept qu'une fonction ou une méthode spécifique impliquant plusieurs technologies. Désormais, les applications Web progressives sont basées sur les travailleurs de service que vous pouvez vérifier si le navigateur le prend en charge.

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

Project lighthouse peut vous aider à détecter si une application est progressive progressive en effectuant des évaluations de plusieurs technologies. Jetez-y un œil.

J'espère que cette aide, pour clarifier.

Answer 4

Dans mon PWA, créé avec Microsoft Visual Studio 2017, l'instruction suivante fonctionne:

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