Nouveautés de Chrome 73

Pete LePage

Twitter GitHub Glitch Mastodon Page d'accueil

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

• Créez plus facilement du contenu portable grâce aux échanges HTTP signés.
• La modification dynamique des styles devient beaucoup plus facile grâce aux feuilles de style constructibles.
• Les progressive web apps sont désormais prises en charge sur Mac. Les PWA sont compatibles avec toutes les plates-formes mobiles et de bureau, ce qui facilite la création d'applications installables diffusées via le Web.

Et ce n'est pas tout : beaucoup plus !

Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 73 !

Journal des modifications

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

• Liste des modifications du dépôt source Chromium
• Mises à jour du site ChromeStatus.com pour Chrome 73
• Abandons et suppressions de Chrome 73
• Mises à jour multimédias de Chrome 73
• Nouveautés de JavaScript dans Chrome 73

Les progressive web apps fonctionnent partout

Les progressive web apps offrent une expérience installable semblable à une application, créées et diffusées directement via le Web. Dans Chrome 73, nous avons ajouté la compatibilité avec macOS, ce qui permet de prendre en charge les progressive web apps sur toutes les plates-formes de bureau (Mac, Windows, ChromeOS et Linux), ainsi que les mobiles, ce qui simplifie le développement d'applications Web.

Une progressive web app est rapide et fiable. Elle se charge et s'exécute toujours à la même vitesse, quelle que soit la connexion réseau. Ils offrent des expériences riches et attrayantes via des fonctionnalités Web modernes qui exploitent pleinement les fonctionnalités de l'appareil.

Les utilisateurs peuvent installer votre PWA à partir du menu contextuel de Chrome, ou vous pouvez promouvoir directement l'expérience d'installation à l'aide de l'événement beforeinstallprompt. Une fois installée, une PWA s'intègre au système d'exploitation pour se comporter comme une application native : les utilisateurs les trouvent et les lancent au même endroit que les autres applications, s'exécutent dans leur propre fenêtre, apparaissent dans le sélecteur de tâches, leurs icônes peuvent afficher un badge de notification, etc.

Nous souhaitons réduire l'écart de capacités entre le Web et le format natif afin de fournir une base solide pour les applications modernes disponibles sur le Web. Nous travaillons à ajouter de nouvelles fonctionnalités de plate-forme Web qui vous permettent d'accéder à des éléments tels que le système de fichiers, le wakelock, l'ajout d'un badge ambiant à la barre d'adresse pour indiquer aux utilisateurs que votre PWA peut être installée, l'installation de règles pour les entreprises et bien d'autres.

Si vous créez déjà une PWA mobile, il en va de même pour une PWA de bureau. En fait, si vous avez utilisé le responsive design, vous êtes probablement déjà prêt à vous lancer. Votre codebase unique fonctionnera sur ordinateur et sur mobile. Si vous débutez avec les PWA, vous serez surpris de la facilité avec laquelle il est possible de les créer.

1. Ajouter un fichier manifeste
2. Créer un ensemble d'icônes
3. Ajouter un service worker récurrent

Ensuite, procédez à des itérations à partir de là.

Signed HTTP Exchanges

Les échanges HTTP signés (SXG), qui font partie d'une technologie émergente appelée packages Web, sont désormais disponibles dans Chrome 73. Un échange HTTP signé permet de créer du contenu "portable" qui peut être diffusé par d'autres parties. C'est l'aspect essentiel, car il conserve l'intégrité et l'attribution du site d'origine.

Cela dissocie l'origine du contenu du serveur qui le diffuse, mais comme il est signé, il est comme s'il avait été transmis depuis votre serveur. Lorsque le navigateur charge cet échange signé, il peut afficher en toute sécurité votre URL dans la barre d'adresse, car la signature dans l'échange indique que le contenu provient initialement de votre origine.

Les échanges HTTP signés permettent aux utilisateurs de diffuser le contenu plus rapidement. Ils peuvent ainsi bénéficier des avantages d'un CDN sans avoir à céder le contrôle de la clé privée de votre certificat. L'équipe AMP prévoit d'utiliser des échanges HTTP signés sur les pages de résultats de recherche Google pour améliorer les URL AMP et accélérer le nombre de clics sur les résultats de recherche.

Consultez l'article de Kinuko sur les échanges HTTP signés pour savoir comment vous lancer.

Feuilles de style constructibles

Les feuilles de style constructibles, une nouveauté de Chrome 73, nous offrent une nouvelle façon de créer et de distribuer des styles réutilisables, ce qui est particulièrement important lorsque vous utilisez Shadow DOM.

Il a toujours été possible de créer des feuilles de style à l'aide de JavaScript. Créez un élément <style> à l'aide de document.createElement('style'). Accédez ensuite à sa propriété de feuille pour obtenir une référence à l'instance CSSStyleSheet sous-jacente et définir le style.

L'utilisation de cette méthode a tendance à entraîner une surcharge de la feuille de style. Pire encore, cela provoque un flash de contenu non stylisé. Les feuilles de style constructibles permettent de définir et de préparer des styles CSS partagés, puis d'appliquer ces styles à plusieurs racines fantômes ou au document facilement et sans dupliquer.

Les mises à jour d'une CSSStyleSheet partagée sont appliquées à toutes les racines où elle a été adoptée. L'adoption d'une feuille de style est rapide et synchrone une fois la feuille chargée.

Pour commencer, rien de plus simple : créez une instance de CSSStyleSheet, puis utilisez replace ou replaceSync pour mettre à jour les règles de la feuille de style.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Pour plus d'informations et d'exemples de code, consultez l'article de Jason Miller Constructable Stylesheets : Simple réutilisable styles (Feuilles de style constructibles : des styles simples et réutilisables) de Jason Miller.

Et bien plus !

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

• matchAll() est une nouvelle méthode de correspondance d'expression régulière sur le prototype de chaîne et renvoie un tableau contenant les correspondances complètes.
• L'élément <link> accepte désormais les propriétés imagesrcset et imagesizes pour correspondre aux attributs srcset et sizes de HTMLImageElement.
• L'implémentation du rayon de flou de l'ombre de Blink correspond désormais à Firefox et Safari.
• Le mode sombre pour l'interface utilisateur de Chrome est désormais compatible avec Mac et l'assistance pour Windows sera bientôt disponible. En outre, une tâche média CSS est en cours d'élaboration : prefers-color-scheme, qui permet de détecter si l'utilisateur a demandé au système d'utiliser un thème de couleurs claires ou sombres. Le bug de suivi est le suivant : Ajout de la prise en charge de la fonctionnalité multimédia prefers-color-scheme CSS pour Chrome et Firefox.

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 74, je serai là pour vous dire : quelles sont les nouveautés de Chrome !