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 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.

Nouveaux tests Origin

Les essais Origin nous permettent de valider les fonctionnalités et API expérimentales, et vous permettent de nous faire part de vos commentaires sur leur usabilité et leur efficacité lors d'un déploiement plus large.

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.

L'activation d'un essai d'origine vous permet de créer des démonstrations et des prototypes que vos utilisateurs de test bêta peuvent essayer pendant toute la durée de l'essai sans avoir à activer des indicateurs spéciaux 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'un de mes plus grands problèmes avec Google Slides est que si vous laissez la présentation ouverte sur une seule diapositive pendant trop longtemps, le verrouillage de l'écran se déclenche. 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. Par exemple, les défileurs contenant une grande quantité de contenu ou les UI à onglets où seul un certain nombre de contenus est visible à un moment donné.

Le nouvel attribut rendersubtree indique au navigateur qu'il peut ignorer le rendu de ce sous-arbre. Cela permet au navigateur de consacrer plus de temps au traitement du 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 que Chrome 80 sera disponible, je vous présenterai les nouveautés de Chrome.