Nouveautés de Chrome 73

Pete LePage

Dans Chrome 73, nous prenons en charge les éléments suivants:

  • Créez plus facilement du contenu portable grâce aux échanges HTTP signés.
  • Les feuilles de style modulables permettent de modifier les styles de manière dynamique beaucoup plus facilement.
  • La compatibilité avec les applications Web progressives est désormais disponible sur Mac, ce qui permet de les utiliser sur toutes les plates-formes de bureau et mobiles. Vous pouvez ainsi créer facilement des applications installables diffusées via le Web.

Et ce n'est pas tout ! En savoir plus

Je m'appelle Pete LePage. Entrons dans le vif du sujet et découvrons les nouveautés de Chrome 73 pour les développeurs.

Journal des modifications

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

Les progressive web apps fonctionnent partout

Les progressive web apps offrent une expérience semblable à celle d'une application installée, conçue et diffusée directement via le Web. Dans Chrome 73, nous avons ajouté la compatibilité avec macOS, ce qui permet de rendre les applications Web progressives compatibles avec toutes les plates-formes de bureau (Mac, Windows, ChromeOS et Linux, ainsi que les appareils mobiles), ce qui simplifie le développement d'applications Web.

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

Les utilisateurs peuvent installer votre PWA à partir du menu contextuel de Chrome ou vous pouvez directement promouvoir l'expérience d'installation à l'aide de l'événement beforeinstallprompt. Une fois installée, une PWA s'intègre à l'OS pour se comporter comme une application native : les utilisateurs peuvent la trouver et la lancer depuis le même emplacement que les autres applications, elle s'exécute dans sa propre fenêtre, elle apparaît dans le sélecteur de tâches, ses icônes peuvent afficher des badges de notification, etc.

Nous voulons combler l'écart de fonctionnalités entre le Web et les applications natives afin de fournir une base solide aux applications modernes diffusées sur le Web. Nous travaillons à ajouter de nouvelles fonctionnalités de plate-forme Web qui vous donnent accès à des éléments tels que le système de fichiers, le verrouillage de réveil, l'ajout d'un badge d'ambiance dans 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 plus.

Si vous développez déjà une PWA mobile, il en va de même pour les PWA de bureau. En fait, si vous avez déjà utilisé le Responsive Web Design, vous êtes probablement déjà prêt. Votre codebase unique fonctionnera sur les ordinateurs et les mobiles. Si vous débutez avec les PWA, vous serez surpris de voir à quel point il est facile de les créer.

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

Ensuite, itérez à partir de là.

Signed HTTP Exchanges

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

Échange signé: l'essentiel

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

Les échanges HTTP signés permettent de diffuser plus rapidement le contenu auprès des utilisateurs, ce qui permet de profiter 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 afin d'améliorer les URL AMP et d'accélérer les clics sur les résultats de recherche.

Consultez l'article Signed HTTP Exchanges (Échanges HTTP signés) de Kinuko pour savoir comment commencer.

Feuilles de style construesibles

Les feuilles de style construesibles, disponibles pour la première fois dans Chrome 73, offrent un nouveau moyen de créer et de distribuer des styles réutilisables, ce qui est particulièrement important lorsque vous utilisez le 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, puis définissez le style.

Schéma illustrant la préparation et l&#39;application du CSS

Cette méthode a tendance à entraîner un gonflement de la feuille de style. Pire encore, cela provoque un flash de contenu sans style. Les feuilles de style construesibles permettent de définir et de préparer des styles CSS partagés, puis d'appliquer ces styles à plusieurs racines d'ombre ou au document facilement et sans duplication.

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, 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 en savoir plus et obtenir des exemples de code, consultez l'article Constructable Stylesheets: seamless reusable styles (Feuilles de style construesibles : styles réutilisables fluides) de Jason Miller.

Et bien plus !

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

  • matchAll() est une nouvelle méthode de mise en correspondance d'expressions régulières 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 floutage de l'ombre de Blink correspond désormais à celle de Firefox et de Safari.
  • Le mode sombre de l'interface utilisateur de Chrome est désormais compatible avec Mac, et la compatibilité avec Windows est en cours. De plus, une requête média CSS, prefers-color-scheme, est en cours de développement. Elle peut être utilisée pour détecter si l'utilisateur a demandé au système d'utiliser un thème de couleurs clair ou sombre. Le bug de suivi dans ce cas est Ajout de la prise en charge de la fonctionnalité multimédia CSS prefers-color-scheme pour Chrome et Firefox.

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 74 sera disponible, je vous présenterai les nouveautés de Chrome.