Nouveautés de Chrome 79

Pete LePage

Le déploiement de Chrome 79 est en cours.

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

Icônes masquables

Si vous utilisez Android O ou une version ultérieure, et si vous avez installé une progressive web app, vous avez probablement remarqué l'ennuyeux cercle blanc autour de l'icône.

Heureusement, Chrome 79 est désormais compatible avec les icônes masquables pour les progressive web apps installées.Vous devez concevoir votre icône pour qu'elle s'adapte à la zone de sécurité, c'est-à-dire un cercle dont le diamètre correspond à 80% du canevas.

Ensuite, dans le fichier manifeste de l'application Web, vous devez ajouter une nouvelle propriété purpose à l'icône et définir sa valeur sur maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes a publié un excellent post sur les CSS Tricks : Maskable Icons: Android Adaptive Icons for Your PWA (Icônes masquées pour votre PWA). Il propose également un excellent outil que vous pouvez utiliser pour tester vos icônes afin de vous assurer qu'elles conviennent.

Web XR

Vous pouvez désormais créer des expériences immersives pour les smartphones et les casques avec l'API WebXR Device.

WebXR permet d'offrir tout un éventail d'expériences immersives. De l'utilisation de la réalité augmentée pour voir à quoi pourrait ressembler un nouveau canapé avant de l'acheter, aux jeux de réalité virtuelle, aux films à 360 degrés et plus encore.

Pour faire vos premiers pas avec la nouvelle API, consultez l'article La réalité virtuelle arrive sur le Web.

Nouvelles phases d'évaluation

Les phases d'évaluation nous permettent de valider des fonctionnalités et des API expérimentales, et de nous faire part de vos commentaires sur leur facilité d'utilisation et leur efficacité dans un déploiement plus large.

Les fonctionnalités expérimentales ne sont généralement disponibles que derrière un drapeau. Toutefois, lorsque nous proposons une phase d'évaluation pour une fonctionnalité, vous pouvez vous inscrire à cette phase d'évaluation afin d'activer la fonctionnalité pour tous les utilisateurs de votre origine.

L'activation d'une phase d'évaluation vous permet de créer des démonstrations et des prototypes que les utilisateurs participant aux tests bêta peuvent essayer pendant toute la durée de l'essai sans qu'ils aient à émettre de signalements spéciaux dans Chrome.

Pour en savoir plus sur les phases d'évaluation, consultez le Guide des phases d'évaluation pour les développeurs Web. Vous pouvez consulter la liste des phases d'évaluation actives et vous y inscrire sur la page Phases d'évaluation de Chrome.

Wakelock

L'une de mes pires bêtes de Google Slides est que si vous laissez la présentation ouverte trop longtemps sur une seule diapositive, l'économiseur d'écran s'active. Avant de continuer, vous devez déverrouiller votre ordinateur. Y'en a marre !

Toutefois, avec la nouvelle API Wake Lock, une page peut demander un verrouillage et empêcher l'écran de s'assombrir ou l'économiseur d'écran de s'activer. Il est idéal pour Slides, mais il est également utile pour les sites de recettes, sur lesquels vous pouvez garder l'écran allumé pendant que vous suivez les instructions.

Pour demander un wakelock, vous devez appeler navigator.wakeLock.request() et enregistrer l'objet WakeLockSentinel qu'il renvoie.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Le verrouillage est maintenu jusqu'à ce que l'utilisateur quitte la page ou que vous appelez release sur l'objet WakeLockSentinel que vous avez enregistré précédemment.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Pour en savoir plus, consultez la page web.dev/wakelock.

rendersubtree attribut

Il peut arriver qu'une partie du DOM ne s'affiche pas immédiatement. Il peut s'agir, par exemple, d'éléments de défilement comportant une grande quantité de contenu, ou d'interfaces utilisateur à onglets dont seule une partie du contenu est visible à un moment donné.

Le nouvel attribut rendersubtree indique au navigateur qu'il peut ignorer l'affichage de cette sous-arborescence. Le navigateur peut ainsi passer plus de temps à traiter le reste de la page, ce qui améliore les performances.

Lorsque rendersubtree est défini sur invisible, le contenu de l'élément n'est ni dessiné, ni soumis à un test de positionnement, ce qui permet d'optimiser le rendu.

Remplacez rendersubtree par activatable pour rendre le contenu visible en supprimant l'attribut invisible et en affichant le contenu.

Sommet des développeurs Chrome 2019

Si vous avez manqué le Chrome Dev Summit, toutes les discussions sont disponibles sur notre chaîne YouTube.

Jake a également créé un excellent fil de discussion Twitter avec toutes les informations amusantes qui se sont déroulées entre les discussions, y compris le dernier membre de notre équipe, Surjiko.

Complément d'informations

Nous n'abordons ici que certains des points forts. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 78.

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. Dès la sortie de Chrome 80, je serai là pour vous dire : les nouveautés de Chrome !