Faire en sorte que votre progressive web app ne ressemble pas à un site Web, mais à une "vraie" application
Lorsque vous jouez au bingo avec des mots à la mode pour les progressive web apps, vous pouvez définir l'option "Les PWA ne sont que des sites Web". La documentation sur les PWA de Microsoft accepte, nous l'indiquons sur ce même site. Frances Berriman et Alex Russell, nominés pour les PWA, les écrivent aussi. Certes, les PWA ne sont que des sites Web, mais elles sont bien plus que cela. Si elle est bien conçue, une PWA ne ressemblera pas à un site Web, mais à une "vraie" application. Qu'est-ce que cela signifie d'être une vraie application ?
Pour répondre à cette question, prenons l'exemple de l'application Podcasts d'Apple. Elle est disponible sous macOS sur ordinateur et sur iOS (et iPadOS respectivement) sur mobile. Bien que Podcasts soit une application multimédia, les idées principales que j'illustre par ce biais s'appliquent également à d'autres catégories d'applications.
Exécution hors connexion possible
Si vous prenez du recul et pensez aux applications spécifiques à la plateforme que vous avez sur votre téléphone mobile ou votre ordinateur de bureau, une chose ressort clairement: vous n'en obtenez jamais rien. Dans l'application Podcasts, il y a toujours du contenu, même hors connexion. En l'absence de connexion réseau, l'application s'ouvre naturellement. La section Meilleurs classements n'affiche aucun contenu, mais revient au message Impossible de se connecter pour le moment associé à un bouton Réessayer. Ce n'est peut-être pas l'expérience la plus accueillante, mais j'ai quelque chose.
L'application Podcasts suit le modèle de shell d'application. Tout le contenu statique nécessaire pour afficher l'application principale est mis en cache localement, y compris les images décoratives telles que les icônes du menu de gauche et les icônes de l'interface utilisateur du lecteur principal. Le contenu dynamique, tel que les données des Meilleurs classements, n'est chargé qu'à la demande, et un contenu de remplacement mis en cache localement est disponible en cas d'échec du chargement. Lisez l'article Modèle de shell d'application pour apprendre à appliquer ce modèle architectural à votre application Web.
Contenu hors connexion disponible et contenu multimédia pouvant être lu
En mode hors connexion, je peux toujours accéder à la section Téléchargés dans le panneau de gauche pour profiter des épisodes de podcast téléchargés prêts à être lus et affichés avec toutes les métadonnées, comme les illustrations et les descriptions.
Le contenu multimédia déjà téléchargé peut être diffusé à partir du cache, par exemple à l'aide de la recette Diffuser les contenus audio et vidéo mis en cache de la bibliothèque Workbox. D'autres contenus peuvent toujours être stockés dans le cache ou dans IndexedDB. Pour en savoir plus et pour savoir quand utiliser quelle technologie de stockage utiliser, consultez l'article Stockage pour le Web. Si vous souhaitez stocker des données de manière persistante sans risquer d'être supprimées définitivement lorsque la quantité de mémoire disponible devient faible, vous pouvez utiliser l'API Persistent Storage.
Téléchargement proactif en arrière-plan
Lorsque je suis à nouveau en ligne, je peux bien sûr rechercher du contenu en saisissant une requête comme http 203. Lorsque je décide de m'abonner au résultat de recherche, le podcast HTTP 203, le dernier épisode de la série est immédiatement téléchargé, sans poser de questions.
Le téléchargement d'un épisode de podcast peut prendre plus de temps. L'API Background Fetch vous permet de déléguer les téléchargements au navigateur, qui s'en charge en arrière-plan. Sur Android, le navigateur peut même déléguer davantage ces téléchargements au système d'exploitation. Le navigateur n'a donc pas besoin d'être exécuté en continu. Une fois le téléchargement terminé, le service worker de votre application s'active et vous pouvez décider de la suite à donner à la réponse.
Partage et interaction avec d'autres applications
L'application Podcasts s'intègre naturellement à d'autres applications. Par exemple, lorsque je fais un clic droit sur un épisode qui me plaît, je peux le partager avec d'autres applications sur mon appareil, comme Messages. De plus, il s'intègre naturellement au presse-papiers du système. Je peux faire un clic droit sur un épisode et copier un lien vers celui-ci.
L'API Web Share et l'API Web Share Target permettent à votre application de partager et de recevoir du texte, des fichiers et des liens vers et depuis d'autres applications de l'appareil. Bien qu'il ne soit pas encore possible pour une application Web d'ajouter des éléments de menu au menu intégré du système d'exploitation par un clic droit, il existe de nombreuses autres façons de créer un lien vers et depuis d'autres applications sur l'appareil. L'API Async Clipboard vous permet de lire et d'écrire par programmation des données de texte et d'image (images PNG) dans le presse-papiers du système. Sur Android, vous pouvez utiliser l'API Contact Picker pour sélectionner des entrées dans le gestionnaire de contacts de l'appareil. Si vous proposez à la fois une application propre à la plate-forme et une PWA, vous pouvez utiliser l'API Get installed gamme Apps pour vérifier si l'application spécifique à la plate-forme est installée. Dans ce cas, vous n'avez pas besoin d'encourager l'utilisateur à installer la PWA ni à accepter les notifications push Web.
Actualisation de l'application en arrière-plan
Dans les paramètres de l'application Podcasts, je peux configurer le téléchargement automatique des nouveaux épisodes. Comme ça, je n'ai même pas besoin d'y penser : les contenus mis à jour seront toujours là. C'est magique.
L'API Periodic Background Sync permet à votre application d'actualiser régulièrement son contenu en arrière-plan, sans qu'elle ait besoin de s'exécuter. Les nouveaux contenus sont ainsi disponibles de façon proactive, ce qui permet aux utilisateurs de les explorer immédiatement dès qu'ils le souhaitent.
État synchronisé sur le cloud
En même temps, mes abonnements sont synchronisés sur tous les appareils que je possède. Dans un monde fluide, je n'ai pas à me soucier de synchroniser manuellement mes abonnements à des podcasts. De même, je n'ai pas peur que la mémoire de mon appareil mobile soit consommée par les épisodes que j'ai déjà écoutés sur mon ordinateur. L'état de lecture reste synchronisé, et les épisodes écoutés sont automatiquement supprimés.
Vous pouvez déléguer la synchronisation des données d'état de l'application à l'API de synchronisation en arrière-plan. L'opération de synchronisation en elle-même n'a pas besoin de se produire immédiatement, mais à terme, voire même lorsque l'utilisateur a déjà fermé l'application.
Commandes des touches multimédias matérielles
Lorsque je suis occupé avec une autre application, par exemple en lisant une page d'actualités dans le navigateur Chrome, je peux toujours contrôler l'application Podcasts à l'aide des touches multimédias de mon ordinateur portable. Il n'est pas nécessaire de passer à l'application pour avancer ou revenir en arrière.
Les clés multimédias sont compatibles avec l'API Media Session. Les utilisateurs peuvent ainsi utiliser les touches multimédias matérielles de leur clavier physique ou de leur casque, ou même contrôler l'application Web à l'aide des touches multimédias logicielles de leur montre connectée. Pour fluidifier les opérations de recherche, une autre idée consiste à envoyer un schéma de vibration lorsque l'utilisateur recherche une partie importante du contenu, par exemple en transmettant le générique d'ouverture ou la limite d'un chapitre.
Multitâche et raccourci d'application
Bien sûr, je peux toujours revenir à l'application Podcasts à tout moment, où que je sois. L'application comporte une icône clairement identifiable que je peux également placer sur le bureau ou dans la barre d'applications afin que les podcasts puissent être lancés immédiatement quand j'en ai envie.
Sur ordinateur comme sur mobile, les progressive web apps peuvent être installées sur l'écran d'accueil, dans le menu Démarrer ou dans la barre d'applications. L'installation peut avoir lieu sur une invite proactive ou être entièrement contrôlée par le développeur de l'application. L'article En quoi consiste une installation ? couvre tout ce que vous devez savoir. En mode multitâche, les PWA apparaissent indépendamment du navigateur.
Actions rapides dans le menu contextuel
Les actions les plus courantes dans les applications, Rechercher de nouveaux contenus et Rechercher de nouveaux épisodes, sont accessibles directement depuis le menu contextuel de l'application dans le Dock. Je peux également ouvrir l'application depuis le menu Options au moment de la connexion.
En spécifiant des raccourcis pour les icônes d'application dans le fichier manifeste de l'application Web de la PWA, vous pouvez enregistrer des itinéraires rapides vers les tâches courantes que les utilisateurs peuvent accéder directement à partir de l'icône de l'application. Sur des systèmes d'exploitation tels que macOS, les utilisateurs peuvent également effectuer un clic droit sur l'icône de l'application et configurer l'application pour qu'elle se lance au moment de la connexion. Une proposition d'exécution à la connexion est en cours de développement.
Agir en tant qu'application par défaut
D'autres applications iOS, et même des sites Web ou des e-mails peuvent s'intégrer à l'application Podcasts en utilisant le schéma d'URL podcasts://. Si je suis un lien comme podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 dans le navigateur, je suis directement redirigé vers l'application Podcasts et je peux décider de m'abonner au podcast ou de l'écouter.
Il n'est pas encore possible de gérer des schémas d'URL entièrement personnalisés, mais une proposition de gestion des protocoles d'URL pour les PWA est en cours de développement. Actuellement, registerProtocolHandler() avec un préfixe de schéma web+ constitue la meilleure alternative.
Intégration du système de fichiers local
Vous n'y pensez peut-être pas immédiatement, mais l'application Podcasts s'intègre naturellement au système de fichiers local. Lorsque je télécharge un épisode de podcast sur mon ordinateur portable, il est stocké dans ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. Contrairement à ~/Documents, ce répertoire n'est évidemment pas destiné à être consulté directement par les utilisateurs standards, mais il est présent.
D'autres mécanismes de stockage que les fichiers sont référencés dans la section Contenu hors connexion.
L'API File System Access permet aux développeurs d'accéder au système de fichiers local de l'appareil. Vous pouvez l'utiliser directement ou via la bibliothèque Support browser-fs-access qui fournit une solution de remplacement transparente pour les navigateurs non compatibles avec l'API. Pour des raisons de sécurité, les répertoires système ne sont pas accessibles sur le Web.
Aspect de la plate-forme
Il existe un aspect plus subtil pour une application iOS telle que Podcasts: aucune des étiquettes de texte ne peut être sélectionnée et l'ensemble du texte se fond dans la police système de la machine. De plus, mon choix de thème de couleurs système (mode sombre) est respecté.
En utilisant la propriété CSS user-select avec la valeur none, vous pouvez protéger les éléments d'interface utilisateur contre toute sélection accidentelle.
Veillez toutefois à ne pas utiliser cette propriété de manière abusive en créant des contenus d'application non sélectionnables.
Elle ne doit être utilisée que pour les éléments d'interface utilisateur tels que le texte des boutons, etc. La valeur system-ui pour la propriété CSS font-family vous permet de spécifier la police d'interface utilisateur par défaut du système à utiliser pour votre application. Enfin, votre application peut respecter les préférences de jeu de couleurs de l'utilisateur en respectant son choix prefers-color-scheme, avec un bouton d'activation/désactivation du mode sombre facultatif.
Vous devez également décider de ce que le navigateur doit faire lorsqu'il atteint la limite d'une zone de défilement, par exemple pour implémenter une fonctionnalité pull to refresh personnalisée.
Ceci est possible avec la propriété CSS overscroll-behavior.
Barre de titre personnalisée
Lorsque vous regardez la fenêtre de l'application Podcasts, vous remarquez qu'elle ne comporte pas de barre de titre ni de barre de titre classique, comme la fenêtre du navigateur Safari, mais une interface personnalisée ressemblant à une barre latérale ancrée à la fenêtre principale du lecteur.
Ce n'est pas possible pour le moment, mais nous travaillons actuellement à la personnalisation de la barre de titre.
Vous pouvez (et devez toutefois spécifier) les propriétés display et theme-color du fichier manifeste de l'application Web pour déterminer l'apparence de la fenêtre de votre application et déterminer quelles commandes du navigateur par défaut (voire aucune) doivent être affichées.
Animations dynamiques
Les animations dans l'application sont dynamiques et fluides dans Podcasts. Par exemple, lorsque j'ouvre le panneau Notes de l'épisode à droite, il s'insère élégamment à l'intérieur. Lorsque je supprime un épisode de mes téléchargements, les autres épisodes flottent et occupent l'espace d'écran libéré par l'épisode supprimé.
Vous pouvez créer des animations performantes sur le Web si vous tenez compte des bonnes pratiques décrites dans l'article Animations et performances. Les animations de défilement que l'on constate couramment dans le contenu paginé ou les carrousels multimédias peuvent être considérablement améliorées à l'aide de la fonctionnalité CSS Scroll Snap. Pour un contrôle total, vous pouvez utiliser l'API Web Animations.
Contenu affiché en dehors de l'application
L'application Podcasts sur iOS peut afficher des contenus à d'autres endroits que l'application proprement dite, par exemple dans la vue "Widgets" du système ou sous la forme d'une suggestion Siri. Les incitations à l'action proactives basées sur l'utilisation et l'interaction d'un simple geste peuvent augmenter considérablement le taux de réengagement pour une application comme Podcasts.
L'API Content Index permet à votre application d'indiquer au navigateur le contenu de la PWA disponible hors connexion. Cela permet au navigateur d'afficher ce contenu en dehors de l'application principale. En marquant le contenu intéressant de votre application pour qu'il soit adapté à la lecture audio parlante et en utilisant le balisage structuré en général, vous pouvez aider les moteurs de recherche et les assistants virtuels tels que l'Assistant Google à présenter vos offres sous un jour idéal.
Widget des commandes multimédias de l'écran de verrouillage
Lorsqu'un épisode de podcast est en cours de lecture, l'application Podcasts affiche un superbe widget de commandes sur l'écran de verrouillage. Celui-ci contient des métadonnées telles que la pochette de l'épisode, son titre et le nom du podcast.
L'API Media Session vous permet de spécifier des métadonnées telles que des illustrations, des titres de titres, etc. qui seront ensuite affichées sur l'écran de verrouillage, sur les montres connectées ou sur d'autres widgets multimédias du navigateur.
Notifications push
Les notifications push sont devenues pénibles sur le Web (même si les invites de notification sont désormais beaucoup plus silencieuses). Mais s'ils sont utilisés correctement, ils peuvent apporter beaucoup de valeur ajoutée. Par exemple, l'application Podcasts sur iOS peut éventuellement m'informer lorsque de nouveaux épisodes de podcasts auxquels je suis abonné, m'en recommander de nouveaux, et m'avertir des nouvelles fonctionnalités de l'application.
L'API Push permet à votre application de recevoir des notifications push qui vous permettent d'informer vos utilisateurs des événements importants concernant votre PWA. Pour les notifications qui doivent se déclencher à une heure connue dans le futur et qui ne nécessitent pas de connexion réseau, vous pouvez utiliser l'API Notification Triggers.
Badge d'icône d'application
Chaque fois que de nouveaux épisodes sont disponibles pour l'un des podcasts auxquels je suis abonné, un badge d'icône d'application sur l'icône de l'écran d'accueil Podcasts s'affiche pour m'encourager à utiliser de nouveau l'application sans être intrusive.
Vous pouvez définir des badges d'icône d'application avec l'API Badging. Cela est particulièrement utile lorsque votre PWA comporte la notion d'éléments "non lus" ou lorsque vous avez besoin d'un moyen pour attirer discrètement l'attention de l'utilisateur sur l'application.
La lecture des contenus multimédias est prioritaire sur les paramètres de l'économiseur d'énergie.
Lorsqu'un podcast est en cours de lecture, l'écran peut s'éteindre, mais le système ne passe pas en mode veille. Les applications peuvent aussi laisser l'écran activé, par exemple pour afficher les paroles ou les sous-titres.
L'API Screen Wake Lock vous permet d'empêcher l'écran de s'éteindre. La lecture de contenus multimédias sur le Web empêche automatiquement le système de passer en mode veille.
Découverte des applications via une plate-forme de téléchargement d'applications
L'application Podcasts fait partie de l'expérience pour ordinateur macOS, mais sur iOS, elle doit être installée depuis l'App Store.
Une recherche rapide sur podcast, podcasts ou apple podcasts permet d'afficher immédiatement l'application dans l'App Store.
Bien qu'Apple n'autorise pas les PWA sur l'App Store, sur Android, vous pouvez envoyer votre PWA encapsulée dans une activité Web de confiance.
Avec le script bubblewrap, cette opération est simple.
Ce script est également utilisé en interne par la fonctionnalité d'exportation d'applications Android de PWABuilder. Vous pouvez l'utiliser sans toucher la ligne de commande.
Résumé des fonctionnalités
Le tableau ci-dessous présente une brève présentation de toutes les fonctionnalités et une liste de ressources utiles pour les mettre en œuvre sur le Web.
Conclusion
Les PWA ont beaucoup progressé depuis leur lancement en 2015. Dans le cadre du Project Fugu 🐡, l'équipe Chromium interentreprises s'efforce de combler les dernières lacunes restantes. En suivant ne serait-ce que quelques-uns des conseils de cet article, vous pouvez vous rapprocher de cette sensation d'application et faire oublier à vos utilisateurs qu'ils ne gèrent qu'un site Web. En effet, la plupart d'entre eux ne se soucient pas de la conception de votre application (et pourquoi devraient-ils le faire), tant qu'elle a l'air d'une vraie application.
Remerciements
Cet article a été lu par Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Grantet Reilly Grant.