web-dev-qa-db-fra.com

Problème avec PWA sur iOS 113

J'ai un PWA que j'utilise parfaitement jusqu'à ce que je mette à jour mon téléphone à la version 11.3 ( présente les supports de service Workers, de sorte que sur mon iPhone, ce n'était qu'un signet ) et tout fonctionnait à merveille. Après avoir mis à jour iOS 11.3, je ne pouvais pas accéder à mon application parce que je disposais d'un identifiant externe (dans un autre domaine). Chaque fois que j'essaye d'ouvrir mon open, cela ouvre un navigateur Safari pour en faire l'auth. Avant PWA dans iOS, les URL externes étaient ouvertes dans le même espace ouvert (sans safari ouvert). Savez-vous s'il s'agit du comportement correct et, s'il est correct, comment puis-je le résoudre?

Merci! 

4
Sergio

Il semble qu'avec la dernière version iOS 11.4, ce problème soit résolu, je pense que maintenant, safari partage le contexte entre le navigateur et le PWA et que, par exemple, les cookies PWA sont accessibles via le safari. un problème lorsque vous ouvrez le PWA et que vous êtes redirigé vers la connexion (le safari s'ouvre) une fois que vous êtes connecté, vous restez dans le navigateur (iOS ne revient pas au PWA, mais ceci est une première étape)

0
Sergio

J'ai réussi à résoudre ce problème en supprimant la balise META du manifeste:

<link rel="manifest" href="/tracker/site.webmanifest">

Mon projet est un simple PWA qui utilise OAuth de Google pour la connexion. J'étais en train de me rediriger vers Safari pour me connecter et je ne pouvais pas revenir à l'application (sur mon écran d'accueil). J'espère que cela fonctionne pour vous aussi, j'ai perdu 2 jours à essayer de trouver une solution.

La réponse de Anand me dit que les PWA capables de travailler hors connexion doivent implémenter des opérateurs de service, car ils sont pris en charge dans les manifestes 11.3 (ou 11.4, pas sûr) etNOT.

Quoi qu'il en soit, cela a fonctionné pour moi, j'espère que cela aidera également les autres.

5
Nikolay Dyankov

Lorsque les PWA sans service fonctionnent (votre navigateur ne les prend pas en charge ou que votre application n'en possède pas), ils sont ajoutés à l'écran d'accueil, c'est simplement un signet. Lorsque le navigateur trouve un logiciel, il crée un package (comme apk).

Comment tester ceci - Recherchez un site PWA sans opérateur dans Android et ajoutez-le à l'écran d'accueil. Lorsque je l'ai essayé dans l'un des appareils Samsung, il ne montrait que l'option "Supprimer" et aucune option de désinstallation. Quand j'ai ajouté un PWA qui avait SW, j'ai eu l'option de désinstallation. J'ai également pu localiser l'apk généré par Chrome lorsque le service worker est présent.

Maintenant sur iOS - 3 possibilités auxquelles je pouvais penser. 1) Ma théorie basée sur le comportement ci-dessus sur les PWA avec et sans Service worker, votre icône de maison créée par iOS 11.2.x est un signet et la nouvelle version de safari le traite comme un signet pour l'ouvrir dans le navigateur. Je ne pouvais pas tester cela car je suis déjà passé à 11.3 et je n'ai pas d'icône PWA antérieure à 11.3. 

2) Si vous avez réinstallé l'icône (en supprimant et en ajoutant de nouveau à l'écran d'accueil) et que le problème persiste, cela est probablement dû au fait que votre fichier de manifeste ou vos fichiers de service worker présentent un problème/une compatibilité avec Safari. 

Comme nous n'avons pas quelque chose comme Lighthouse pour safari, vous pouvez valider votre manifest.json et vos ouvriers de service dans Chrome Lighthouse

3) Vérifiez l'attribut scope dans le fichier manifeste pour vous assurer de couvrir l'intégralité du domaine que vous souhaitez recouvrir. Si vous couvrez uniquement domaine.com/monapp, domaine.com/otherapp sera ouvert dans le navigateur si vous tentez de l'ouvrir à partir de n'importe quelle source. 

1
Anand