Nouveautés de Chrome 76

Pete LePage

Dans Chrome 76, nous avons ajouté la prise en charge des éléments suivants:

Je m'appelle Pete LePage. Penchons-nous sur les nouveautés de Chrome 76 pour les développeurs.

Bouton d'installation de l'omnibox PWA

Dans Chrome 76, nous facilitons l'installation de progressive web apps sur le bureau en ajoutant un bouton d'installation à la barre d'adresse, parfois appelé omnibox.

Si votre site répond aux critères d'installation des progressive web apps, Chrome affiche un bouton d'installation dans l'omnibox pour indiquer à l'utilisateur que votre PWA peut être installée. Si l'utilisateur clique sur le bouton d'installation, cela revient essentiellement à appeler prompt() sur l'événement beforeinstallprompt. La boîte de dialogue d'installation s'affiche, ce qui facilite l'installation de votre PWA.

Pour en savoir plus, consultez Installer la barre d'adresse pour les progressive web apps sur le bureau.


Plus de contrôle sur la mini-barre d'informations des PWA

Exemple de mini-barre d'informations "Ajouter à l'écran d'accueil" pour AirHorner

Sur mobile, Chrome affiche la mini-barre d'informations la première fois qu'un utilisateur accède à votre site si celui-ci répond aux critères d'installation des progressive web apps. Vous nous avez fait part de votre souhait de pouvoir empêcher l'affichage de la mini-barre d'informations et de proposer à la place votre propre promotion pour l'installation.

À partir de Chrome 76, l'appel de preventDefault() sur l'événement beforeinstallprompt empêchera l'affichage de la mini-barre d'informations.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

N'oubliez pas de mettre à jour votre interface utilisateur pour informer les utilisateurs que votre PWA peut être installée. Consultez les modèles de promotion de l'installation de PWA pour connaître les bonnes pratiques que nous recommandons de suivre pour promouvoir l'installation de progressive web apps.

Mises à jour plus rapides des WebAPK

Lorsqu'une progressive web app est installée sur Android, Chrome demande et installe automatiquement un APK Web. Une fois l'application installée, Chrome vérifie régulièrement si le fichier manifeste de l'application Web a changé (si vous avez mis à jour les icônes, les couleurs ou le nom de l'application, par exemple) afin de déterminer si un nouveau WebAPK est nécessaire.

À partir de Chrome 76, Chrome vérifiera le fichier manifeste plus fréquemment (tous les jours plutôt que tous les trois jours). Si l'une des propriétés clés a changé, Chrome demande et installe un nouveau WebAPK, en s'assurant que le titre, les icônes et les autres propriétés sont à jour.

Pour en savoir plus, consultez Mettre à jour les WebAPK plus souvent.

Mode sombre

De nombreux systèmes d'exploitation sont désormais compatibles avec le mode sombre.

La requête média prefers-color-scheme vous permet d'ajuster l'apparence de votre site pour qu'elle corresponde au mode préféré de l'utilisateur.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom propose un excellent article Hello darkness, my vieux ami sur web.dev, qui contient tout ce que vous devez savoir, ainsi que des conseils pour concevoir vos feuilles de style afin de prendre en charge à la fois les modes clair et sombre.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 76 pour les développeurs, bien sûr, mais il y en a bien d'autres.

Promise.allSettled()

Personnellement, ce qui m'intéresse beaucoup, c'est Promise.allSettled(). Elle est semblable à Promise.all(), sauf qu'elle attend que toutes les promesses soient résolues avant de renvoyer un résultat.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Il est plus facile de lire les blobs

Les Blob sont plus faciles à lire grâce à trois nouvelles méthodes: text(), arrayBuffer() et stream(). Il n'est donc plus nécessaire de créer un wrapper pour le lecteur de fichiers.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Prise en charge des images dans l'API du presse-papiers asynchrone

Par ailleurs, nous avons ajouté la prise en charge des images à l'API Asynchronous Clipboard, ce qui facilite le copier-coller programmatique des images.

Complément d'informations

Cet article ne présente que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 76.

S'abonner

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.

Je m'appelle Pete LePage et, dès la sortie de Chrome 77, je serai là pour vous dire : quelles sont les nouveautés de Chrome !