PWA puissantes

Si certaines fonctionnalités des PWA sont bien connues, comme l'API Notifications qui permet à une application Web de recevoir et de publier des notifications de plate-forme, de nouvelles fonctionnalités sont en cours de développement pour booster vos applications Web. Le projet Chromium sur les fonctionnalités Web, également connu sous le nom de projet Fugu 🐡, vise à activer de nouvelles normes Web puissantes tout en préservant ce qui fait l'unicité du Web : sa sécurité axée sur l'utilisateur, sa simplicité et sa compatibilité multiplate-forme.

Remarque : Ces fonctionnalités sont à différents stades de développement, allant de l'étude à la mise en œuvre. Ce document se concentre sur les fonctionnalités qui fonctionnent sur les ordinateurs. Bien que les utilisateurs de ChromeOS soient susceptibles de bénéficier des fonctionnalités ciblées pour ordinateur de bureau dès qu'elles sont disponibles, la prise en charge multiplate-forme, même stable dans ChromeOS, peut parfois prendre plusieurs années. Consultez le suivi des fonctionnalités pour obtenir des informations plus précises sur les versions des fonctionnalités.

Combler le manque d'applications

La plupart de ces fonctionnalités visent à combler le fossé entre les applications Web et les applications mobiles ou de bureau traditionnelles. Les premières fonctionnalités majeures à être déployées permettent aux applications Web d'accéder aux sélecteurs de contacts et aux fonctionnalités de partage de la plate-forme, et aux PWA installées de s'enregistrer en tant que cible de partage de la plate-forme et d'afficher des badges d'icône, pour n'en citer que quelques-unes.

Chaque fonctionnalité est soumise à un processus de standardisation approfondi pour recueillir les commentaires de la communauté et ainsi façonner l'API, et s'assurer que la conception finale est sécurisée, privée et fiable. Les nouvelles fonctionnalités sont suivies dans un outil de suivi ouvert et peuvent être divisées en cinq catégories :

EXPÉDIÉ

Disponible dans la dernière version stable de Chrome. Peut être utilisé de manière fiable à condition que son utilisation soit correctement détectée.

DANS L'ESSAI ORIGIN

Disponible en tant que évaluation de l'origine (EO) Chrome, qui permet à l'équipe Chrome de valider les fonctionnalités et les API expérimentales en conditions réelles d'utilisation, et vous permet de fournir des commentaires sur l'utilisabilité et l'efficacité des API. Les OT sont activés par défaut et vous permettent de tester cette fonctionnalité en version bêta avec vos utilisateurs sans qu'ils aient besoin d'activer des indicateurs spéciaux dans leur navigateur. Les API peuvent changer après une OT, et les OT ne sont pas disponibles pendant un certain temps avant le lancement. Elles ne doivent donc pas être considérées comme un mécanisme de lancement anticipé pour les nouvelles API.

DANS LA VERSION D'ESSAI POUR LES DÉVELOPPEURS

Disponible derrière un flag dans Chrome. Ces API sont expérimentales et toujours en cours de développement. Elles ne sont pas prêtes pour la production, car il y a de fortes chances qu'elles contiennent des bugs et que les API changent. Les développeurs peuvent utiliser ce temps pour tester des fonctionnalités expérimentales par eux-mêmes, mais ne doivent pas demander à leurs utilisateurs d'activer des indicateurs pour utiliser leurs fonctionnalités.

DÉMARRÉ

Le développement a commencé, mais aucune API utilisable n'existe actuellement.

EN COURS D'EXAMEN

API pour lesquelles les utilisateurs ont manifesté de l'intérêt, mais dont l'implémentation n'a pas encore commencé. Si une API n'a pas encore été lancée, veuillez la suivre ou ajouter vos cas d'utilisation à son problème pour aider l'équipe Chromium à la prioriser.

Améliorer votre PWA

Lorsque vous développez votre PWA, pensez à implémenter les API et les bonnes pratiques suivantes pour améliorer considérablement l'expérience de votre application Web. Réparties par cas d'utilisation général, votre application peut bénéficier d'une ou plusieurs API pour améliorer l'expérience utilisateur globale. Les API marquées d'un 🔮 sont en version d'évaluation de l'origine, celles marquées d'un 🚩 sont en version d'évaluation pour les développeurs, celles marquées d'un 📱 sont actuellement stables sur mobile et leur implémentation sur ordinateur a commencé. Toutes les autres API mentionnées sont stables (mais il est possible qu'elles ne soient pas disponibles sur toutes les plates-formes). Seules les API disponibles dans les versions stables, bêta (marquées β) ou Canary (marquées α) actuelles de Chrome sont incluses. Cette liste devrait être mise à jour régulièrement pour refléter les API publiées.

Installation d'applications

Si vous souhaitez que votre application Web soit disponible à côté d'autres applications installées, comme dans la barre des tâches, le lanceur d'applications, le bureau et le sélecteur d'applications, envisagez d'implémenter les API suivantes afin que votre PWA soit installable. Éventuellement après avoir suivi cet atelier de programmation.

• Fichier manifeste d'application Web : fournit des informations sur votre application Web au navigateur et au système d'exploitation (nom, logo, URL de démarrage de l'application, mode d'affichage de votre application Web, etc.).
• Service Workers et API Cache Storage : permettent à votre application Web de créer un serveur proxy et de contrôler la façon dont le cache du navigateur est géré. Un service worker qui réagit à l'événement fetch d'un navigateur et qui peut répondre à une requête fetch pour l'URL de démarrage spécifiée dans le fichier manifeste de l'application Web avec du contenu hors connexion est une condition requise pour l'installation.
• Exécuter à la connexion 🚩β : vous permet de configurer votre PWA pour qu'elle se lance automatiquement lorsque l'utilisateur se connecte.
• Raccourcis vers l'icône de l'application : fournissez des raccourcis vers des URL spécifiques avec votre application Web (par exemple, démarrer une discussion, importer une photo, etc.) à partir du menu contextuel de l'icône de votre application installée (c'est-à-dire en appuyant de manière prolongée sur les appareils mobiles ou en effectuant un clic droit sur les ordinateurs de bureau), sur les plates-formes compatibles.
• getInstalledRelatedApps : permet à votre application Web de vérifier si votre PWA, votre application Android ou votre application Windows (UWP) a déjà été installée.

Adaptatif et accessible

Si vous souhaitez que votre application Web soit utilisable par des utilisateurs disposant de différents appareils et ayant des besoins physiques et/ou mentaux différents, vous devez envisager d'implémenter les éléments suivants :

• Conception responsives : assurez-vous que votre application Web offre une expérience utilisable, ou du moins non cassée, pour les petites et grandes tailles d'écran afin de permettre aux utilisateurs de différents appareils et emplacements de fenêtre d'utiliser votre application.
• Consignes WCAG 2.0 : assurez-vous que votre application Web est utilisable par des personnes ayant des capacités physiques et mentales variées, et pas seulement par des personnes neurotypiques et valides. Consultez également la page Do's and don'ts on designing for accessibility (À faire et à ne pas faire pour concevoir des produits accessibles) du gouvernement britannique.

Monétisation et distribution

• Web Payments : interface standard et flexible pour les paiements en ligne, conçue pour fonctionner sur n'importe quel navigateur ou appareil, et avec n'importe quel fournisseur de services de paiement.
• API Digital Goods 🔮 : interface standard et flexible permettant d'interroger et de gérer les achats via une application à partir d'applications Web. Elle est compatible avec les types d'achats courants, comme les achats ponctuels, les achats récurrents (comme les gemmes/devises dans les jeux) et les abonnements. Fonctionne conjointement avec les paiements Web.
• Activité Web fiable : créez une application Android pour votre PWA afin qu'elle puisse être proposée au téléchargement dans les plates-formes compatibles, par exemple Google Play.

Accès au presse-papiers

• Presse-papiers asynchrone : permet de lire et d'écrire du texte et des images dans le presse-papiers de l'utilisateur, et d'écouter les événements de copier-coller de l'utilisateur.

Notifications

Si votre application Web doit envoyer des notifications aux utilisateurs (par exemple, une application de chat ou un encodage en arrière-plan), vous pouvez envisager d'implémenter les API suivantes :

• Notifications push Web : une fois qu'un utilisateur a activé les notifications, votre application Web peut lui envoyer des notifications push.
• API Badging : permet à votre application Web installée de définir un badge à l'échelle de l'application sur l'icône de l'application, éventuellement avec un nombre.
• Déclencheurs de notification 🔮 : envoyez des notifications aux utilisateurs lorsqu'une condition de déclenchement est remplie, par exemple en fonction du temps ou de la localisation (comme les notifications d'événements de l'agenda).

Partage d'intentions et gestion de protocoles

• Enregistrement du protocole d'URL 🚩α : permet aux applications Web de s'enregistrer en tant que gestionnaires de protocoles/schémas d'URL personnalisés à l'aide de leur fichier manifeste d'installation.
• Partage Web : utilisez l'interface utilisateur de partage système intégrée sur les appareils compatibles pour partager des URL, du texte et des fichiers avec d'autres applications installées sur votre appareil. Votre application n'a pas besoin d'être installée.
• Cible de partage Web : rendez votre PWA installée disponible dans l'UI de partage système intégrée sur les appareils compatibles pour permettre aux utilisateurs de partager du texte et des fichiers avec votre application depuis d'autres applications.

Ouvrir et enregistrer des fichiers

• API File Handling 🚩 : permet à votre application Web installée d'indiquer au système d'exploitation sa capacité à gérer (lire/diffuser/modifier) des fichiers avec des types MIME et/ou des extensions de fichier spécifiques, ce qui lui permet, par exemple, d'apparaître dans la liste "Ouvrir avec…" d'un menu contextuel.
• API File System Access : accès robuste au système de fichiers de l'utilisateur par session, permettant les interactions suivantes (selon les besoins de votre application)
  • Lire des fichiers à partir du système de fichiers local : affiche un sélecteur de fichiers et permet à un utilisateur de choisir un ou plusieurs fichiers à ouvrir (facultatif), y compris en limitant les types de fichiers autorisés par type MIME et extension.
  • Enregistrer les modifications apportées au fichier ouvert : enregistrez directement les modifications apportées à un fichier ouvert avec FSA, sans demander à l'utilisateur de choisir où enregistrer le fichier ni de télécharger une copie.
  • Créer un fichier sur le système de fichiers local : permet à un utilisateur de créer un fichier sur son système de fichiers local, éventuellement avec une extension de fichier par défaut, auquel votre application peut ensuite accéder pour l'enregistrer.
  • Fichiers récemment ouverts : les gestionnaires de fichiers créés avec FSA peuvent être stockés dans IndexedDB, ce qui vous permet d'afficher une liste des fichiers récemment utilisés entre les sessions utilisateur (bien que les autorisations de modification ne persistent toujours pas entre les sessions).
  • Lire, écrire et manipuler un répertoire : permet à un utilisateur de choisir un répertoire sur son système de fichiers local, dont votre application peut ensuite lire le contenu, créer, lire et supprimer des fichiers et des sous-répertoires, et déterminer le chemin d'accès relatif aux fichiers.
• Flux de compression : compresser ou décompresser à l'aide des algorithmes de compression gzip et deflate.

Gestion des fenêtres

• API Fullscreen : permet à un utilisateur de faire en sorte qu'un élément de votre application Web, par exemple une vidéo, occupe tout l'écran.
• API Cross-Screen Window Placement 🔮 : permet à votre application Web d'obtenir des informations sur les écrans connectés et de positionner les fenêtres par rapport à ces écrans, ce qui permet de créer des applications Web multi-fenêtres et multi-écrans.
• Mode d'affichage des applications par onglets 🚩 : permet à votre application Web installée d'être affichée dans un ou plusieurs onglets, et pas seulement dans une seule fenêtre.

Intégration plus poussée à l'OS

• API Local Fonts 🔮 : permet à votre application Web de lister les polices installées localement et de demander un accès de bas niveau (orienté octet) au conteneur SFNT qui inclut les données de police complètes, ce qui permet à votre application d'afficher les polices installées localement de manière personnalisée.
• Wake Lock : permet à votre application Web d'empêcher l'écran de se mettre en veille, ce qui lui permet d'effectuer des tâches de longue durée sans risque d'interruption (par exemple, le transcodage de fichiers ou le maintien d'une recette à l'écran pendant la cuisson).
• Détection de l'inactivité 🔮 : permet à votre application Web de détecter quand l'utilisateur n'utilise pas activement son appareil.

Prise en charge hors connexion étendue

Si vous souhaitez que votre application Web fonctionne encore mieux hors connexion, vous pouvez envisager d'implémenter les API suivantes :

• Synchronisation en arrière-plan : lorsque vous êtes hors connexion, mettez en file d'attente les requêtes qui nécessitent une connexion, puis synchronisez les données de votre application Web en arrière-plan lorsque le réseau est disponible, au lieu de ne pas traiter du tout les requêtes hors connexion. Par exemple, autoriser l'envoi de messages ou la synchronisation des modifications incrémentales apportées à un document lorsque vous êtes de nouveau en ligne.
• Synchronisation périodique en arrière-plan : permet à votre application Web installée et fréquemment utilisée de réactiver périodiquement son service worker, en fonction d'un délai minimal, et de l'exécuter, par exemple pour mettre à jour un cache, ce qui permet au contenu d'être à jour lorsqu'un utilisateur ouvre l'application.
• API Content Indexing : permet à votre application Web d'indiquer au navigateur le contenu disponible hors connexion afin qu'il puisse le proposer aux utilisateurs.
• Récupération en arrière-plan : permet d'effectuer des récupérations en arrière-plan de longue durée, comme le téléchargement de films ou l'importation de vidéos et d'images, sans risquer que le service worker soit arrêté.

Streaming, encodage et décodage multimédias

Si votre application Web lit des fichiers multimédias, tels que des fichiers vidéo ou audio, vous pouvez envisager d'implémenter les API suivantes :

• Streaming adaptatif : permet aux flux vidéo de passer d'un débit binaire à un autre en fonction des performances du réseau.
• Picture-in-picture : permet à un utilisateur de sortir une vidéo de votre application Web dans une fenêtre toujours au premier plan, qui peut ensuite être déplacée et redimensionnée indépendamment.
• API Media Session : permet à un utilisateur de contrôler la lecture multimédia de votre application Web à l'aide de fonctionnalités logicielles au niveau du matériel et de l'OS (comme les boutons de lecture/pause/arrêt sur les claviers ou les écrans de verrouillage), ainsi que de contrôler les notifications multimédias au niveau de l'OS (comme le titre, l'artiste, l'album et la pochette).
• API Chromecast : permet à un utilisateur de caster des contenus multimédias sur un récepteur Chromecast disponible, par exemple pour lire une vidéo de votre application Web sur son téléviseur.
• WebCodecs 🔮 : accès aux encodeurs et décodeurs multimédias matériels et logiciels intégrés, utiles pour les cas d'utilisation en temps réel tels que le streaming en direct à faible latence, ainsi que l'encodage, le décodage et le transcodage de fichiers.

Prise en charge étendue des entrées

• Événements de pointeur : réagissez aux événements tactiles, de stylet et de souris à l'aide d'une seule API, ce qui offre plus d'options de saisie à vos utilisateurs. Consultez également les bonnes pratiques pour les UI tactiles et les commandes et saisies utilisateur.
• API Gamepad : permet à votre application Web de répondre aux entrées des manettes de jeu courantes.
• WebHID 🚩 : permet à votre application Web d'accéder à des périphériques d'interface humaine non standards (comme des contrôleurs personnalisés).

Compatibilité avancée avec les périphériques

• WebUSB : permet à votre application Web d'accéder aux périphériques USB non standards (claviers et souris, par exemple) depuis votre application.
• API Serial 🔮 : ajoute une API permettant de communiquer avec des appareils matériels via un port série physique ou virtuel.

Votre checklist PWA

Prêt à améliorer votre PWA avec ces nouvelles API puissantes ? Choisissez l'un des cas d'utilisation ci-dessous pour afficher un ensemble d'API recommandées à utiliser, ou créez votre propre checklist et essayez de la compléter !