Nouveautés de Chrome 89

Le déploiement de Chrome 89 vers la version stable commence.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je filme depuis chez moi. Découvrons les nouveautés de Chrome 89 pour les développeurs.

WebHID, WebNFC et Web Serial

J'ai vraiment hâte de WebHID, WebNFC et Web Serial. Elles offrent aux utilisateurs de nouveaux scénarios qui n'étaient jamais possibles auparavant, en interagissant avec du matériel réel.

Elles permettent aux fabricants de se connecter à des applications de visioconférence amusantes et originales pour utiliser les boutons de téléphonie dédiés sur des enceintes spécialisées. ou d'autres cas d'utilisation.

À l'aide de Web Serial et d'environ 60 lignes de code, @AndreBan a créé une page pouvant interagir avec le REPL MicroPython sur un Raspberry Pi Pico. Web Serial est également utilisé par Espruino dans son IDE Web.

À l'occasion du CDS 2019, François a écrit un jeu amusant, rappelant la mémoire, à l'aide de la technologie Web NFC. Vous deviez appuyer le téléphone sur la bonne carte, dans le bon ordre.

StreamDeck avec pad de batterie Daft Punk

Et mon préféré, @bramus, a utilisé WebHID pour se connecter à un StreamDeck afin de créer un pad de batterie Daft Punk. Si vous n'avez pas de StreamDeck, regardez sa vidéo de démonstration sur YouTube et consultez le code sur GitHub.

Que ce soit votre site qui interagit avec votre matériel ou votre matériel qui peut interagir avec de nombreux sites, les utilisateurs sont gagnants, car ils n'ont pas besoin d'installer de pilotes ni de logiciels spéciaux.

Vous pouvez en savoir plus sur certains des appareils auxquels vous pouvez vous connecter sur web.dev/devices, ou consulter les guides de démarrage pour WebHID, WebNFC et Web Serial.

Modifications apportées aux critères d'installation des PWA

Depuis le début, la compatibilité hors connexion est un élément clé des critères des progressive web apps en termes d'installation. Comme pour les autres applications installées, les utilisateurs s'attendent à ce qu'elle fonctionne de manière fiable. Il devrait être rapide, et ils ne devraient jamais voir le dinosaure hors connexion !

Dans le courant de l'année, nous prévoyons de fermer une faille qui a permis à quelques sites de répondre aux critères d'installation, sans expérience hors connexion. Si votre PWA propose déjà une expérience hors connexion, vous n'avez rien d'autre à faire. Aucune action n'est requise de votre part, mais si ce n'est pas le cas, vous pouvez en ajouter une.

À partir de Chrome 89, si votre PWA ne fournit pas de réponse valide lorsqu'elle est hors connexion, un avertissement s'affichera dans les outils de développement dans l'onglet "Problèmes", et Lighthouse indiquera un problème. L'application sera appliquée dans Chrome 93 dans le courant de l'année.

Outils de développement affichant un message d'avertissement dans la console.
Message d'avertissement dans la console des outils pour les développeurs Chrome.
Les outils de développement affichent un message d'avertissement dans l'onglet "Application".
Message d'avertissement dans l'onglet Application > Manifeste > Installabilité.

Vous pouvez décider du type d'expérience hors connexion que vous souhaitez proposer. Idéalement, vous devez fournir autant d'expérience que possible. Toutefois, il peut s'agir, au minimum, d'une simple page de remplacement hors connexion.

Pour en savoir plus sur ce changement et sur les raisons de cette modification, consultez l'article Améliorer la détection de la compatibilité hors connexion des progressive web apps.

Si vous ne savez pas par où commencer, consultez Workbox. Il dispose d'un ensemble de bibliothèques pouvant alimenter un service worker prêt pour la production pour votre PWA. Pour une simple page de remplacement hors connexion, l'article Créer une page de remplacement hors connexion contient tout le code dont vous avez besoin. Vous pouvez copier et coller directement le code sur votre site.

Partage Web et cible de partage Web pour les ordinateurs

Si votre site permet aux utilisateurs de créer, de modifier ou d'interagir avec des fichiers, vous devez utiliser les API Web Share et Web Share Target. Ces API sont disponibles sur mobile depuis un certain temps, mais sont désormais compatibles avec ChromeOS et Windows.

Web Share permet aux utilisateurs d'envoyer des fichiers ou des données à d'autres applications installées sur leur appareil, par exemple en partageant une photo de Google Photos sur Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Pour vous enregistrer en tant que cible afin que d'autres applications puissent partager des fichiers ou des données avec vous, vous devez utiliser l'API Web Share Target.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Consultez les sections Intégrer à l'interface utilisateur de partage d'OS avec l'API Web Share et Recevoir des données partagées avec l'API Web Share Target pour obtenir des guides de démarrage.

Et plus encore

Et bien d'autres choses encore.

Chrome autorise désormais await de premier niveau dans les modules JavaScript.

Nouvelle icône d'installation dans l'omnibox pour les PWA

Afin d'éviter toute confusion pour les utilisateurs, nous avons mis à jour l'icône affichée dans l'omnibox pour les PWA installables.


Si vous avez utilisé une activité Web fiable pour rendre votre PWA disponible sur le Play Store pour ChromeOS, vous pouvez vous inscrire à la phase d'évaluation de l'API Digital Goods.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 89.

S'abonner

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage. Dès que Chrome 90 sera disponible, je serai là pour vous dire les nouveautés de Chrome !

Crédits

La photo du Raspberry Pis et de l'Arduino a été prise par Harrison Broadbent sur Unsplash.