Nouveautés de Chrome 79

Pete LePage

Chrome 79 est en cours de déploiement !

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

Icônes masquables

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

Heureusement, Chrome 79 prend désormais en charge les icônes masquables pour les applications Web progressives installées. Vous devrez concevoir votre icône pour qu'elle s'adapte à la zone de sécurité, qui est essentiellement 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 article sur CSS Tricks intitulé Maskable Icons: Android Adaptive Icons for Your PWA (Icônes masquables : icônes adaptatives Android pour votre PWA) qui contient tous les détails. Il propose également un excellent outil que vous pouvez utiliser pour tester vos icônes afin de vous assurer qu'elles s'adaptent.

Web XR

Vous pouvez désormais créer des expériences immersives pour les smartphones et les écrans montés sur la tête avec l'API WebXR Device.

WebXR permet un large éventail d'expériences immersives. Vous pouvez utiliser la réalité augmentée pour voir à quoi ressemblerait un nouveau canapé dans votre maison avant de l'acheter, ou encore jouer à des jeux de réalité virtuelle et regarder des films à 360 degrés, et plus encore.

Pour commencer à utiliser la nouvelle API, consultez La réalité virtuelle arrive sur le Web.

Nouvelles phases d'évaluation

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

Les fonctionnalités expérimentales ne sont généralement disponibles que derrière un indicateur, mais lorsque nous proposons un essai Origin pour une fonctionnalité, vous pouvez vous inscrire à cet essai pour activer la fonctionnalité pour tous les utilisateurs de votre origine.

En activant la phase d'évaluation, vous pouvez créer des démonstrations et des prototypes que les utilisateurs des tests bêta peuvent essayer pendant la durée de la phase d'essai, sans qu'ils aient à activer un indicateur spécial dans Chrome.

Pour en savoir plus sur les phases d'évaluation d'origine, consultez le guide des phases d'évaluation d'origine pour les développeurs Web. Vous pouvez consulter la liste des essais d'origine actifs et vous y inscrire sur la page Essais d'origine Chrome.

Wakelock

L'une de mes plus grandes bêtises avec Google Slides, c'est que si vous laissez trop longtemps la présentation ouverte sur une seule diapositive, l'économiseur d'écran s'active. Avant de pouvoir 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 le verrouillage de l'écran de s'activer. Il est parfait pour les diapositives, mais il est également utile pour des sites de recettes, par exemple, où vous pouvez laisser l'écran allumé pendant que vous suivez les instructions.

Pour demander un verrouillage de réveil, 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 appeliez 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 web.dev/wakelock.

rendersubtree attribut

Il peut arriver que vous ne souhaitiez pas que certaines parties du DOM soient affichées immédiatement. Il peut s'agir, par exemple, de pages de défilement contenant une grande quantité de contenu ou d'UI à onglets dans lesquelles 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 pas dessiné ni testé, ce qui permet d'optimiser le rendu.

Si vous remplacez rendersubtree par activatable, le contenu devient visible en supprimant l'attribut invisible et en affichant le contenu.

Chrome Dev Summit 2019

Si vous avez manqué le sommet des développeurs Chrome, toutes les conférences sont disponibles sur notre chaîne YouTube.

Jake a également publié un excellent fil Twitter avec tous les événements amusants qui se sont déroulés entre les conférences, y compris le nouveau membre de notre équipe, Surjiko.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 78.

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 la sortie de Chrome 80, je serai là pour vous présenter les nouveautés de Chrome.