Nouveautés de Chrome 73

Pete LePage

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

Et ce n'est pas tout : il y a encore beaucoup d'autres fonctionnalités !

Je m'appelle Pete LePage. Voyons ce que Chrome 73 propose aux 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 application Progressive Web App est rapide et fiable. Elle se charge et fonctionne toujours à la même vitesse, quelle que soit la connexion réseau. Elles 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 à 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 créez déjà une PWA mobile, la création d'une PWA pour ordinateur n'est pas différente. En fait, si vous avez déjà utilisé le Responsive Web Design, vous êtes probablement déjà prêt. Votre base de code unique fonctionnera sur ordinateur et mobile. 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. Un échange HTTP signé permet de créer du contenu "portatif" qui peut être diffusé par d'autres parties. Et c'est là 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 pour améliorer les URL AMP et 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, qui sont nouvelles dans Chrome 73, nous 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 non stylisé. 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 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 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 associé est Ajouter la prise en charge de la fonctionnalité multimédia CSS prefers-color-scheme pour Chrome et Firefox.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors 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.