web-dev-qa-db-fra.com

getUserMedia dans PWA avec manifeste sur iOS 11

J'ai créé un PWA qui utilise getUserMedia de WebRTC pour obtenir un flux de caméra en direct. Le PWA utilise un fichier manifest.json et fonctionne parfaitement sous Android.

Toutefois, sur iOS, l'application fonctionne également si j'ouvre le lien directement dans Mobile Safari, mais si je l'ajoute à l'écran d'accueil, il n'est pas défini (car iOS ne l'autorise que dans le contexte Safari).

En guise de solution de contournement, j'aimerais ouvrir l'application dans Mobile Safari au lieu du mode plein écran, mais je ne sais pas comment faire, car elle ouvre automatiquement l'écran plein après la détection du fichier manifest.json.

Quelqu'un a-t-il une idée sur la façon d'ouvrir une application avec un manifeste dans Safari?

Je vous remercie!

javascriptiosgetusermediamanifest.jsonpwa
6
DebboR

Il existe un moyen d'ouvrir le PWA en évitant le mode plein écran. Dans manifest.json, changez l'attribut d'affichage en "navigateur". 

"display": "browser"

Reportez-vous à cette documentation sous la section "Affichage". Vous pouvez également envisager l'option "minimal-ui" . N'oubliez pas que, lorsque vous apportez ce changement, il ne sera pas uniquement répercuté sur iOS, mais également sur Android. 

En ce qui concerne l'accès à getUserMeida, je ne comprends pas pourquoi cela ne fonctionne pas en mode plein écran. C'est juste une fonctionnalité HTML5 et rien de spécifique à PWA. Donc, idéalement, cela devrait également fonctionner en mode plein écran. Essayez de capturer toute erreur lorsque vous ouvrez en mode plein écran et postez-la ici si vous en trouvez. Cela peut également être dû aux autorisations et je recommande de résoudre le problème en mode plein écran pour une meilleure expérience utilisateur. 

3
Anand

Pour résoudre ce problème, j'ai ajouté deux fichiers manifest.json, l'un utilisé par défaut pour les périphériques non ios et l'autre pour les périphériques ios. Je crée également un script detect.js pour détecter si un périphérique ios accède au pwa et modifie le manifeste. Référence JSON sur le HTML. Il y a le code:

// Detects if device is on iOS 
const isIos = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|iPod/.test( userAgent );
  }

// change manifest.json
if (isIos()) {
    document.getElementById("manifest").href = "ios-manifest.json";
}
3
Rodrigo Oliveira

Je vous conseillerais de définir Apple-mobile-web-app-capable sur no avec cette balise meta en tête du document:

<meta name="Apple-mobile-web-app-capable" content="no">

Cela évitera à iOS de comprendre votre application Web en tant que PWA.

0
ekqnp