Nouveautés de Chrome 76

Pete LePage

Dans Chrome 76, nous avons ajouté la compatibilité avec les éléments suivants :

Je m'appelle Pete LePage. Je vais vous présenter les nouveautés de Chrome 76 pour les développeurs.

Bouton d'installation de la PWA dans l'Omnibox

Dans Chrome 76, nous facilitons l'installation des applications Web progressives sur ordinateur en ajoutant un bouton d'installation à la barre d'adresse, parfois appelée barre 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 permet à l'utilisateur d'installer facilement votre PWA.

Pour en savoir plus, consultez Installation de la barre d'adresse pour les applications Web progressives sur l'ordinateur.


Contrôler davantage 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 s'il répond aux critères d'installabilité des applications Web progressives. Vous nous avez fait part de votre souhait d'empêcher l'affichage de la mini-barre d'informations en proposant votre propre promotion d'installation à la place.

À partir de Chrome 76, l'appel de preventDefault() sur l'événement beforeinstallprompt empêche 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);
});

Veillez à mettre à jour votre interface utilisateur pour que les utilisateurs sachent que votre PWA peut être installée. Consultez Modèles pour promouvoir l'installation de PWA pour découvrir les bonnes pratiques recommandées pour promouvoir l'installation de vos applications Web progressives.

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'installation effectuée, Chrome vérifie régulièrement si le fichier manifeste de l'application Web a changé (par exemple, si vous avez modifié les icônes ou les couleurs, ou si vous avez modifié le nom de l'application) pour voir si un nouveau WebAPK est requis.

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

Pour en savoir plus, consultez la section Mettre à jour les WebAPK plus fréquemment.

Mode sombre

De nombreux systèmes d'exploitation sont désormais compatibles avec un mode sombre ou un thème sombre.

La requête multimédia prefers-color-scheme vous permet d'ajuster l'apparence de votre site en fonction du 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 old friends sur web.dev qui contient tout ce que vous devez savoir, ainsi que des conseils pour concevoir l'architecture de vos feuilles de style afin qu'elles prennent en charge un mode clair et un mode sombre.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 76 pour les développeurs.

Promise.allSettled()

Personnellement, je suis très enthousiaste à propos de Promise.allSettled(). Il est semblable à Promise.all(), mais il attend que toutes les promesses soient réglées avant de renvoyer une valeur.

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(). Cela signifie que nous n'avons plus besoin de créer de wrapper autour du 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);
});

Compatibilité avec les images dans l'API Async Clipboard

Nous avons également ajouté la compatibilité avec les images à l'API Clipboard asynchrone, ce qui permet de copier et coller facilement des images de manière programmatique.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points forts. Pour en savoir plus sur les modifications apportées à Chrome 76, consultez les liens ci-dessous.

S'abonner

Ne manquez pas nos dernières vidéos, puis abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 77 sera disponible, je vous présenterai les nouveautés de Chrome.