PWA sur iOS 15 : des améliorations ? [iOS 15.4 mis à jour]

Apple affirme qu'iOS 15 offre un meilleur moyen de rester connecté, de se concentrer et d'explorer avec sa liste importante de nouvelles fonctionnalités. Cependant, y a-t-il quelque chose qui peut faciliter la vie d'un développeur PWA ? Nous allons explorer tous les changements les plus importants, les déceptions, ainsi que des nouvelles intéressantes dans cet article.

Toutes les améliorations pour PWA

[iOS 15.4] Préchargement de navigation pour Service Worker

L'iOS 15.4 déploie de nouvelles améliorations pour les Service Workers, notamment le préchargement de la navigation et une meilleure prise en charge des fichiers générés par les Service Worker.

Dans certains cas, le démarrage du service worker peut augmenter le temps de réponse du réseau. Le préchargement de la navigation invite les requêtes réseau pendant le temps de démarrage du technicien de service, ce qui devrait améliorer les performances de la PWA.

[iOS 15.4] Manifeste d'application Web amélioré : icônes et plus

Bonnes nouvelles! Après une longue attente, les développeurs PWA peuvent enfin implémenter l'application Web sur iOS 15.4 avec une icône appropriée. Si aucune icône Apple-Touch n'est définie dans le fichier d'application Web, l'icône du manifeste d'application Web sera définie par défaut.

Cependant, le support n'est pas encore parfait. Il existe encore quelques bogues mineurs qui affectent l'expérience des utilisateurs et des développeurs, tels que :

• La forme et le format des icônes sont limités au format PNG carré uniquement.
• Les icônes sont automatiquement redimensionnées si elles ne correspondent pas aux tailles prédéfinies d'iOS (Ipads - 152 x 152 & 167 x 167, iPhones - 120×120 & 180 x180)
• Les icônes ne s'affichent pas lorsque vous ouvrez la feuille de partage, mais elles apparaissent éventuellement lorsque vous choisissez d'ajouter à l'écran d'accueil.
• Les icônes transparentes auront un fond noir ou blanc.

De plus, dans les versions précédentes, le manifeste de l'application Web n'est récupéré que lorsque les utilisateurs choisissent « Ajouter à l'écran d'accueil ». Pour iOS 15.4, le fichier est maintenant analysé et chargé lorsque la page se charge déjà. En conséquence, vous pouvez appliquer la couleur du thème directement au chargement de la page, ce qui rend les PWA plus fiables.

[iOS15.4] Notifications push Web

Lors de la rédaction d'un article pour PWA iOS 15 l'année dernière, nous partageons des preuves sur la façon dont les notifications push Web peuvent arriver et devinez ce qui se passe, cela se produit finalement.

Tout comme les icônes du manifeste de l'application Web, il existe encore quelques inconvénients liés au push Web. Par exemple, il est désactivé par défaut, donc les gens doivent d'abord le connaître pour pouvoir l'utiliser. De plus, certains développeurs PWA trouvent qu'il est impossible d'utiliser l'API Web Push pour demander des autorisations de notification bien qu'il existe des options pour cela.

Cependant, cela vaut la peine d'être célébré. Ce qui est mieux? Web Kit a annoncé la prise en charge de Web Push dans Safari 16 sur macOS Ventura. Selon leur teasing, Web Push pourrait être disponible sur iOS et iPadOS en 2023.

Couleur de thème prise en charge

Alors que le statut de prise en charge du manifeste de l'application Web est toujours "Prise en charge partielle", Safari 15 a désormais officiellement activé la couleur du thème dans les balises méta HTML et le manifeste Web . Vous pouvez désormais modifier les couleurs de la barre d'état et de la zone de surdéfilement , qui peuvent également être appliquées à la barre d'onglets et aux couleurs d' arrière-plan de surdéfilement dans la disposition des onglets compacts de Safari 15 sur Ipad OS 15, Big Sur et MacOS Monterey .

De plus, en utilisant l'attribut media, vous pouvez également activer un mode sombre/clair pour votre Progressive Web App sur Safari 15.

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme : light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme : dark)">

WebGL amélioré (bibliothèque graphique Web) et API de partage Web

iOS 15 assiste à une mise à niveau de WebGL 1 vers WebGL2. WebGL 2 s'est avéré être une amélioration significative qui est beaucoup plus rapide, offre beaucoup plus de texture que WebGL ainsi que de nombreux autres avantages.

En outre, Safari 15 inclut la prise en charge du niveau 2 de partage Web, qui ouvre la voie aux développeurs pour échanger efficacement des fichiers du navigateur vers des applications avec le dialogue de partage natif. Actuellement, il prend en charge l'image, la vidéo, l'audio, le fichier texte et plus encore.

Ce changement, par exemple, permet aux utilisateurs de partager directement des images de pages PWA vers leurs applications Twitter sans étapes supplémentaires d'enregistrement de photos dans la bibliothèque et de re-téléchargement.

Meilleure API de session multimédia

L'API de session multimédia donne plus de données et de contrôles de lecture, ce qui amène l'expérience multimédia à un niveau supérieur. À partir d'iOS 15, les utilisateurs peuvent accéder à la carte NOW PLAY depuis le Control Central , l' écran de verrouillage ainsi que la barre de menus de MacOS Monterey et contrôler certaines options de lecture simples. De plus, la nouvelle Media Session apporte l' expérience SharePlay , qui permet de regarder des films, d'écouter de la musique avec vos amis via Facetime. Cela peut être une bonne nouvelle pour les applications de podcast basées sur le Web.

Prise en charge audio WebM pour Safari, prise en charge WebM/VP9 pour Ipad

WebM est une technologie de streaming vidéo Web open source et libre de droits. Après avoir introduit l'image WebM pour la première fois dans iOS 14, Apple prend désormais en charge les conteneurs WebM de codec audio Opus dans Safari 15. De plus, les utilisateurs peuvent désormais diffuser des vidéos WebM/VP9 sur IpadOS15.

Cette mise à jour promet une prise en charge complète de WebM dans un avenir proche et nous pouvons nous attendre à ce que la vidéo WebM soit bientôt disponible sur Safari mobile. En conséquence, les propriétaires de PWA auront plus de choix pour afficher leurs médias vidéo afin d'offrir de meilleures expériences utilisateur.

Prise en charge du module ES6 dans Service Worker

ES6 marque le premier module intégré de JavaScript, fournit une structure solide avec laquelle il est facile de travailler, de maintenir, de mettre à l'échelle et d'encapsuler des comportements. Avec l'arrivée du nouveau module ES6 dans Service Worker, les développeurs peuvent désormais améliorer les performances et activer l'accès hors ligne pour iOS PWA de manière plus organisée. En conséquence, il est facile d'évoluer rapidement, d'augmenter les fonctionnalités PWA pour répondre aux demandes du marché en cas de besoin.

Multitâche plus simple pour iPad

L'iOS 15 a apporté quelques améliorations pour une expérience multitâche plus intuitive sur iPad tout en conservant ce qui fonctionnait auparavant. Par exemple, il y a un nouvel onglet à trois petits points représentant le menu multitâche en haut de l'écran qui rendra l'application en plein écran, en écran partagé ou en diapositive. En outre, une fenêtre centrée en survol est introduite dans SplitScreen, où vous pouvez ouvrir une fenêtre en haut de vos applications à écran partagé, puis l'envoyer à Slider Over, Split View ou Full Screen.

De plus, un nouveau raccourci clavier et une nouvelle interface utilisateur multitâche qui affiche toutes les applications (y compris celles de Slide Over) méritent une mention rapide.

Si loin des critiques, il semble que la nouvelle mise à jour sur le multitâche Ipad pour le Web et le PWA ait reçu des commentaires positifs pour être beaucoup plus conviviale que celle d'iOS 14.

Nouveau clip d'application - Une autre mise à jour notable

Nous avons mentionné le clip d'application dans notre PWA iOS 14 Wrapping Up comme quelque chose à attendre pour les PWA installables de type Android. Alors comment ça va maintenant ?

App Clip peut désormais être intégré à des sites Web, par conséquent, affiché dans Safari. La carte permet aux utilisateurs de terminer leurs tâches initiales comme commander de la nourriture, louer un vélo, puis les invite à installer des applications natives sur l'App Store. Le nouveau changement supprime quelques étapes supplémentaires d'iOS 14 pour découvrir les clips d'application dans la page Web et les applications tierces.

Malheureusement, il n'y a toujours pas de bannières d'installation PWA en vue. Apple rendra-t-il les clips d'application compatibles avec les PWA ? Ou essaient-ils de créer leur propre version PWA ? Ou peut-être que les clips d'application et les PWA ne sont tout simplement pas liés ? La réponse est encore dans le futur.

Aucune limitation majeure n'est abordée

Les nouvelles versions d'iOS 15 apportent sûrement quelques déceptions aux développements PWA, car ce que nous recherchons est toujours hors de propos. La mise en œuvre de PWA sur iOS 15 sans la disponibilité de ces fonctionnalités reste un travail assez difficile :

• Synchronisation en arrière-plan
• Poussée Web
• Avant l'invite d'installation et la bannière d'installation
• Audio de fond pour les PWA

De plus, il n'y a pas non plus de correction de certains points négatifs que nous avons mentionnés dans l'article iOS 14.

• Aucune icône PWA dans la bibliothèque d'applications
• Peu de modifications apportées à la prise en charge du manifeste d'application Web (en plus des couleurs de thème)
• La barre d'état est toujours black et black-translucent uniquement.
• Grande restriction de fonctionnalités sur les autres navigateurs Web

Emporter

Là, vous avez tout ce qu'iOS15 a pour PWA. Bien que la plupart des modifications apportées à la version 15 soient mineures, l'iOS 15.4 avec Web Push et d'autres supports de manifeste d'application Web ouvrent un avenir meilleur pour PWA sur iOS. Avec la version bêta d'iOS 16 sortie en septembre 2022, espérons que des changements plus importants seront à venir.