Progressive web apps de bureau

Les progressive web apps (PWA) pour ordinateur sont un excellent moyen de créer des applications multiplates-formes et multibrowsers avec un modèle de sécurité axé sur la sécurité et la confidentialité des utilisateurs, et de bénéficier du partage intégré grâce à la connectivité inhérente du Web. Créez une application Web ou améliorez celle que vous avez déjà en utilisant des API modernes pour lui donner des fonctionnalités, une fiabilité et une installabilité semblables à celles d'une application de bureau. Les PWA sont le meilleur moyen de proposer votre application Web pour ChromeOS.

Sur ChromeOS, la puissance de la plate-forme Web est au premier plan : les applications Web sont une fonctionnalité essentielle de la plate-forme. Les PWA installées s'affichent dans le lanceur d'applications ChromeOS, peuvent être épinglées à l'étagère et s'intègrent parfaitement au reste de l'OS.

Pour commencer, consultez la liste de contrôle des PWA et assurez-vous que votre application Web la respecte. Vous pouvez utiliser PWABuilder pour vous aider à fournir une page hors connexion personnalisée et à rendre votre application installable. Ensuite, suivez ces recommandations pour que votre PWA brille sur ChromeOS.

Rendre l'application installable

L'un des principaux avantages des PWA par rapport aux applications Web classiques est qu'elles peuvent être installées, tout comme les applications de bureau traditionnelles. Le parcours Progressive Web App sur web.dev comporte une section dédiée à la création d'une PWA installable. Utilisez-la pour commencer. Pour qu'une PWA soit identifiée comme installable sur ChromeOS, les critères suivants doivent être remplis. Vous pouvez les vérifier à l'aide de l'audit d'installabilité de Lighthouse :

Les icônes sont un élément important de l'identité de votre PWA. Assurez-vous qu'elles sont intéressantes et uniques. Elles peuvent même inclure de la transparence. Les PWA ayant une base de code partagée sur toutes les plates-formes, vous devez vous assurer d'avoir une icône masquable disponible. Assurez-vous également d'inclure des icônes normales pour les systèmes d'exploitation qui ne sont pas compatibles avec les icônes masquables.

Votre PWA est désormais installable et s'affiche sur ChromeOS, du lanceur au dock. L'installation de votre PWA vous offre également des fonctionnalités supplémentaires pour rendre votre application vraiment attrayante.

Remarque sur le travail hors connexion

Le simple fait de rendre votre application installable présente de nombreux avantages en termes de visibilité, d'usabilité et de fonctionnalités. Le fait de rendre votre PWA installable ne signifie pas que l'ensemble de votre expérience doit fonctionner hors connexion. Toutefois, pour qu'une application Web installée ressemble à une application traditionnelle, elle doit disposer d'une fonctionnalité hors connexion. Une page hors connexion personnalisée de base suffit pour commencer. Les utilisateurs s'attendent à ce que les applications installées ne plantent pas lorsque l'état de la connexion change. Tout comme une application traditionnelle n'affiche jamais de page vierge lorsqu'elle est hors connexion, les PWA ne doivent jamais afficher la page hors connexion par défaut du navigateur. Les pages hors connexion personnalisées peuvent aller d'un message indiquant à l'utilisateur qu'il a besoin d'une connexion à un jeu pour passer le temps jusqu'à ce qu'il soit à nouveau connecté. Proposer cette expérience hors connexion personnalisée pour les pages ou les fonctionnalités non mises en cache qui nécessitent une connexion permet de combler le fossé entre l'expérience utilisateur et l'application.

Vous pouvez créer une page hors connexion simple lors de l'événement install d'un service worker en prémettant en cache la page souhaitée pour une utilisation ultérieure et en y répondant si un utilisateur est hors connexion. Vous pouvez suivre notre exemple de page hors connexion personnalisée pour voir un exemple de cette fonctionnalité en action et apprendre à l'implémenter vous-même.

Si vous souhaitez offrir une expérience plus robuste, vous pouvez utiliser des fonctionnalités telles qu'IndexedDB pour le stockage NoSQL dans le navigateur et la synchronisation en arrière-plan pour permettre aux utilisateurs d'effectuer des actions hors connexion et de différer la communication avec le serveur jusqu'à ce qu'ils disposent à nouveau d'une connexion stable, en plus de l'API Cache Storage. Vous pouvez également implémenter des modèles tels que des sessions sécurisées et de longue durée pour maintenir l'authentification des utilisateurs et des écrans squelettes pour informer rapidement les utilisateurs que vous chargez du contenu qui peut revenir au contenu mis en cache ou à un indicateur hors connexion si nécessaire.

Rendez-le tactile

Presque tous les appareils ChromeOS sont tactiles et beaucoup sont également compatibles avec les stylets. Vous devez donc vous assurer que votre application fonctionne parfaitement avec ces deux types de saisie, en plus du clavier et de la souris classiques. L'API Pointer Events est spécialement conçue pour cela. Certains événements fondamentaux liés au pointeur ne nécessitent probablement aucune modification, comme les événements click. D'autres événements, comme mouseup ou touchstart, doivent être migrés vers leurs homologues d'événements de pointeur pour fonctionner de manière fluide avec n'importe quel type de pointeur. Vous pouvez même gérer différents types d'entrées séparément si vous le souhaitez. Pour les applications et les jeux qui reposent fortement sur les saisies tactiles des utilisateurs, le passage à l'API Pointer Events fera une énorme différence sur les appareils ChromeOS.

Dessiner de manière fluide sur le Web

Si vous développez une application permettant aux utilisateurs de dessiner avec leurs doigts ou un stylet, il a toujours été difficile de maintenir une latence suffisamment faible entre leur saisie et votre sortie pour que l'expérience soit fluide. Lorsque vous créez ce type d'applications optimisées par l'API Canvas pour ChromeOS, nous vous recommandons d'utiliser l'indice desynchronized pour canvas.getContext() afin de fournir un rendu à faible latence. Pour utiliser l'indication desynchronized pour un canevas, procédez comme suit : 

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

Considérations de conception pour le tactile

Il est important de prendre en compte la compatibilité avec les écrans tactiles et les stylets lorsque vous concevez vos applications Web. Les interactions que vous considérez comme acquises, comme le survol, ne fonctionnent pas bien, voire pas du tout, avec d'autres méthodes de saisie. Voici quelques bonnes pratiques à garder à l'esprit lorsque vous concevez des interfaces adaptées aux écrans tactiles et aux stylets :

  • Ne faites pas d'hypothèses sur les entrées en fonction de la taille de l'écran. Utilisez plutôt la détection de fonctionnalités, idéalement au moment de la saisie, pour déterminer comment répondre. N'oubliez pas que sur ChromeOS, les utilisateurs peuvent passer facilement de la souris au doigt ou au stylet au cours d'une même session.
  • Assurez-vous que les éléments que l'utilisateur est censé toucher ont une taille cible minimale suffisamment grande pour éviter de toucher accidentellement les éléments environnants.
  • Considérez le survol comme une amélioration progressive et assurez-vous que l'interaction peut être effectuée par d'autres moyens pour les écrans tactiles et les stylets (par exemple, un appui prolongé ou un appui simple).
  • Les utilisateurs d'écrans tactiles s'attendent à pouvoir interagir directement avec les éléments à l'écran, par exemple en pinçant pour zoomer sur les cartes au lieu d'utiliser les boutons de zoom avant/arrière. L'ajout de gestes tactiles courants, le cas échéant, peut contribuer à rendre votre application naturelle.

Rendez-le performant

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 nombreuses fonctionnalités nouvelles et à venir sont en cours de développement pour booster vos applications. 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 la spécificité du Web : la sécurité axée sur l'utilisateur, la simplicité et la compatibilité multiplate-forme.

Remarque : Ces fonctionnalités sont à différents stades de développement (de l'étude à la mise en œuvre). Elles peuvent être ciblées uniquement sur les ordinateurs ou les appareils mobiles, et non sur les deux. 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.