web-dev-qa-db-fra.com

Android OS NAV et barres d'état basculant sur et arrière sur PWA en plein écran

Mes pwa avec "display": "fullscreen" J'ai récemment commencé à se conduire mal. The Android NAVBar et barre d'état continuent à ré-comparaître pendant la lecture. Les applications se lancent toujours dans fullscreen normalement, mais chaque événement tactile réaffiche la navigation et les barres d'état supérieur du système d'exploitation brièvement (comme vous le verriez normalement en standalone affichage).

Je ne crois pas que cela a connu des changements de code sur ma fin, car certains de mes anciens PWA intacts ont récemment commencé à se comporter comme cela aussi.

Je suis sur un pixel 5, Android 11, dernière mise à jour au cours de la dernière semaine.

Voici un clip courte montrant le problème.

androidprogressive-web-apps
7
svidgen

la plupart des réponses sont Java et Kotlin, JavaScript est un peu délicate, vous pouvez l'adopter à peu près n'importe laquelle des saveurs/supersets JS. J'utilise l'autonome et en cache les commandes de la navigateur

Je pense que la question est que vous avez fullscreen, cela ne fonctionnera pas, vous avez besoin d'autonome "display": "standalone"

  1. Détectez d'abord si le PWA fonctionne en mode autonome dans notre application, comme ceci:
// on iOS Safari
window.navigator.standalone

// on Android Chrome 
// this is key for you..
window.matchMedia(
  '(display-mode: standalone)'
).matches

  1. Compte tenu de diverses plateformes, je vous recommande de définir un start_url à l'intérieur de votre manifest.json, ça vous sauvera à long terme :)

  2. Puis les deux pour afficher dans fullscreen & remove native controls, ajoutez la propriété d'affichage avec la valeur standalone (FullScreen ne fonctionnera pas). votre manifest devrait avoir quelque chose comme ceci:

// manifest.json
{
  "name": "Tykt.org App",
  "display": "standalone",
  "start_url": "/?standalone=true"
}

Assurez-vous de votre viewport-fit=cover is à l'intérieur:

<meta name="viewport"
    content="width=device-width; initial-scale=1; viewport-fit=cover">
  1. Ajoutez les métags de style mobile-Web-APP-Capable et de barre d'état:
<meta name="mobile-web-app-capable" content="yes">
<meta name="Apple-mobile-web-app-capable" content="yes">

<!-- Bonus if you want some translucency, for e.g. try default, black or black-translucent -->
<meta name="Apple-mobile-web-app-status-bar-style"
    content="black-translucent">
0
Transformer