L'État des Progressive Web Apps sur iOS : Limitations et Solutions de Contournement

Dans un article précédent, j’ai largement couvert le sujet des Progressive Web Apps (PWA) : ce qu’elles sont, les garanties qu’elles fournissent aux utilisateurs, et les bénéfices pour les développeurs. J’ai aussi expliqué comment transformer votre site Hugo en PWA. Cependant, dans cette pièce, j’ai soigneusement évité le cas spécifique des PWA sur iOS.

Cet article se concentre exclusivement sur les Progressive Web Apps pour iOS. Nous explorerons l’état actuel de la technologie, ses limitations, et comment les surmonter pour minimiser l’écart d’expérience utilisateur comparé aux autres appareils. Enfin, je partagerai quelques idées sur comment rendre votre PWA aussi native que possible sur un iPhone.

Prérequis

Puisque cet article se concentre uniquement sur iOS, je supposerai que vous êtes déjà familier avec le concept de Progressive Web Apps. Je suppose aussi que vous avez une PWA fonctionnelle pour les autres systèmes d’exploitation et cherchez maintenant à l’optimiser pour les appareils Apple. Si ce n’est pas le cas, je recommande chaudement de lire mon article précédent sur ce sujet et de vérifier les références fournies là-bas.

PWA x iOS : Le Contexte

Au moment d’écrire ces lignes, Apple a été quelque peu hésitant concernant le support PWA sur iPhone et iPad. Le support reste partiel, et le consensus général est qu’Apple préfère maintenir l’App Store comme la méthode primaire pour installer des applications.

Début 2024, le Digital Markets Act (DMA) en Europe a imposé de nouvelles régulations sur les acteurs majeurs de la tech. En conséquence directe, Apple a initialement supprimé le support PWA dans les bêtas iOS, prétendant que c’était un choix intentionnel pour se conformer au DMA (voir cet article). Cependant, un mois plus tard—suite à une réaction négative significative et des critiques—ils ont inversé cette décision et restauré le support PWA (voir cet article).

Bien que la situation soit revenue à la normale (et ce drame spécifique concernait surtout l’Europe), cela donne une indication claire de la position d’Apple sur les Progressive Web Apps au sein de leur écosystème.

Il vaut la peine de noter que cela s’applique à iOS et iPadOS (watchOS ne supporte simplement pas les PWA), mais pas macOS. macOS est intrinsèquement plus ouvert ; installer des applications en dehors de l’App Store est commun, et les PWA peuvent être facilement installées via n’importe quel navigateur. Sur mobile, cependant, l’écosystème est plus fermé. De plus, tous les navigateurs sur iOS sont actuellement forcés d’utiliser le moteur WebKit, ce qui définit effectivement le plafond pour la fonctionnalité PWA sur la plateforme.

Je recommande de garder un œil sur cet article de Maximiliano Firtman. Il est régulièrement mis à jour et décrit précisément quelles fonctionnalités PWA sont actuellement supportées sur l’OS mobile d’Apple.

Comment installer une PWA sur iOS

Installer une PWA sur un iPhone est direct, mais différent des autres plateformes. Contrairement à Android—qui affiche une bannière d’installation native—ou Chrome bureau—qui montre un bouton d’installation dans la barre d’adresse—iOS n’offre aucun mécanisme intégré pour informer l’utilisateur que le site web est une PWA et peut être installé.

Pour installer une PWA sur un iPhone, l’utilisateur doit taper sur le bouton “Partager” (dans la barre du bas sur Safari, ou près de la barre d’adresse sur Chrome), et ensuite sélectionner “Sur l’écran d’accueil”. L’icône de l’app apparaîtra alors sur l’écran d’accueil et peut être lancée juste comme une app native.

Puisque Apple exige que tous les navigateurs utilisent le moteur WebKit, le processus est relativement constant à travers les différents navigateurs. Notez que cette exigence de moteur de navigateur pourrait changer dans le futur, particulièrement en Europe, à cause du DMA (source).

Installation d’une PWA sur iOS via Chrome

Installation d’une PWA sur iOS via Safari

Comment ajouter un écran de démarrage (Splash Screen)

Selon la connexion internet et la performance du site web, une PWA peut prendre un moment à charger. Pour améliorer l’expérience utilisateur, il est possible d’afficher un écran de démarrage pendant que l’app s’initialise.

Splash screen PWA de ce site web, affiché sur iOS

Comment ça marche sur Android

Sur Android, un écran de démarrage est dynamiquement généré basé sur la propriété background_color et les icônes définies dans le fichier manifest.json. Je n’entrerai pas dans les détails ici, mais vous pouvez vérifier la section splash screen de mon article précédent pour plus d’information.

Et sur iOS

Sur iOS, le comportement automatique trouvé sur Android ne fonctionne pas du tout.

À la place, nous devons nous reposer sur une solution plutôt rudimentaire et “bricolée”. Vous devez ajouter des lignes spécifiques au <head> HTML de votre PWA pour dire à iOS quelle image utiliser comme écran de démarrage. De façon cruciale, ce n’est pas juste une icône, mais une image plein écran. Par conséquent, pour obtenir un résultat parfait, vous devez fournir une image différente pour chaque résolution d’écran et orientation possible.

Ci-dessous est un exemple d’une de ces lignes de mon site web :

    <link rel="apple-touch-startup-image"
          media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
          href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">

J’ai personnellement défini 34 images distinctes, référencées dans 34 lignes séparées de HTML similaires à celle ci-dessus.

Heureusement, il y a des outils en ligne pour rendre cela plus facile. J’ai utilisé le “PWA Icons & iOS Splash Screen Generator” de progressier.com. Vous fournissez simplement une image source et une couleur de fond, et il génère toutes les images de splash screen nécessaires pour diverses résolutions iOS, avec le code HTML à copier-coller. Il gère aussi les icônes pour le manifest. C’est un outil incroyablement utile pour les PWA en général, et un sauveur pour le support iOS.

Raccourcis

Sur de nombreuses plateformes, vous pouvez créer des raccourcis pour accéder à des parties spécifiques d’une PWA directement depuis l’icône de l’écran d’accueil (ex. un “Force Touch” ou appui long sur Android peut montrer un menu pour sauter directement vers des articles spécifiques).

Sur iOS, ce n’est simplement pas encore supporté. Même si vous définissez des raccourcis dans votre manifest, ils n’apparaîtront pas lors d’un appui long sur l’icône de l’app.

Un force touch sur une PWA installée sur iOS n’affiche pas les raccourcis

Notifications Web Push

Pendant longtemps, le manque de notifications push était le plus gros point de blocage (deal-breaker) pour les PWA sur iOS. Cependant, cela a changé significativement avec iOS 16.4.

Apple supporte maintenant la Web Push API, permettant aux PWA d’envoyer des notifications aux utilisateurs, tout comme les apps natives. Il y a, cependant, une exigence stricte : l’utilisateur doit avoir ajouté la PWA à son écran d’accueil pour que les notifications fonctionnent. Vous ne pouvez pas abonner un utilisateur aux notifications simplement depuis l’onglet du navigateur ; ils doivent “installer” l’app d’abord.

Une fois installée, vous pouvez demander la permission en utilisant Notification.requestPermission(). Si accordée, vous pouvez gérer les badges sur l’icône de l’app (le petit point rouge avec un nombre) en utilisant l’API navigator.setAppBadge(), qui est aussi supportée maintenant. C’est un pas de géant pour combler l’écart avec les applications iOS natives.

Modes d’Affichage

Il y a quatre modes d’affichage standard pour les PWA : fullscreen, standalone, minimal-ui, et browser.

iOS supporte actuellement seulement deux :

Browser : L’app s’ouvre dans le navigateur avec les contrôles UI standard.
Standalone : L’app s’ouvre dans sa propre fenêtre, similaire à une app native, mais la barre de statut iOS (batterie, heure, signal) reste visible.

Si vous réglez votre PWA sur minimal-ui, iOS se rabattra (fallback) sur browser. Si vous la réglez sur fullscreen, elle se rabattra sur standalone.

La PWA, avec l'affichage réglé sur "fullscreen"
La PWA, avec l’affichage réglé sur “fullscreen”

La PWA, avec l'affichage réglé sur "browser"
La PWA, avec l’affichage réglé sur “browser”

Icônes

En plus des problèmes d’écran de démarrage, il y a une nuance importante concernant les icônes sur iOS : actuellement, seules les images PNG sont supportées de manière fiable. Une bonne pratique est d’adopter le format PNG pour vos icônes PWA par défaut pour maximiser la compatibilité à travers toutes les plateformes.

Site web exemple minimal

Pour conclure, voici quelques liens pour vous guider si vous voulez implémenter ces changements sur votre propre site :

Conclusion

Bien que pas encore parfaite, l’expérience PWA sur les appareils iOS est assez décente. Avec quelques ajustements spécifiques à iOS, l’expérience d’usage devient presque indiscernable des apps natives une fois installée.

Le plus grand obstacle reste le processus d’installation lui-même. À ce jour, il n’y a pas de bannière “Installer” native sur iOS, et aucun moyen simple d’inviter l’utilisateur programmatiquement. Nous pouvons espérer un meilleur support dans le futur, mais étant donné la position protectrice d’Apple sur l’App Store, il est peu probable que ce soit une priorité pour eux.