Nouveautés de Chrome 84

Pete LePage

Le déploiement de Chrome 84 en version stable commence maintenant.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je filme depuis chez moi. Découvrons les nouveautés de Chrome 84 pour les développeurs.

Raccourcis liés aux icônes de l'application

Raccourcis liés aux icônes d'application pour la PWA de Twitter

Les raccourcis des icônes d'application permettent aux utilisateurs de démarrer rapidement des tâches courantes dans votre application (par exemple, rédiger un nouveau tweet, envoyer un message ou consulter leurs notifications). Elles sont compatibles avec Chrome pour Android.

Pour appeler ces raccourcis, appuyez de manière prolongée sur l'icône de l'application sur Android. Pour ajouter facilement un raccourci à votre PWA, créez une propriété shortcuts dans le fichier manifeste de votre application Web, décrivez le raccourci et ajoutez vos icônes.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Pour plus d'informations, consultez la section Gagnez en efficacité grâce aux raccourcis d'application.

API Web Animations

Chrome 84 ajoute de nombreuses fonctionnalités précédemment non compatibles à l'API Web Animations.

  • animation.ready et animation.finished ont été promis.
  • Le navigateur peut désormais nettoyer et supprimer les anciennes animations, ce qui permet d'économiser de la mémoire et d'améliorer les performances.
  • De plus, vous pouvez désormais combiner des animations à l'aide de modes composites avec les options add et accumulate.

Je ne peux tout simplement pas rendre justice à toutes les améliorations ni donner de bons exemples ici. Pour en savoir plus, consultez les améliorations de l'API Web Animations dans Chromium 84.

API d'indexation de contenu

Votre contenu est disponible sans connexion réseau. Mais l'utilisateur ne le sait pas ? Est-ce vraiment disponible ? Un problème de découverte a été détecté.

Avec l'API Content Indexing, qui vient de sortir de la phase d'évaluation initiale, vous pouvez ajouter des URL et des métadonnées pour le contenu disponible hors connexion. À l'aide de ces métadonnées, le contenu est ensuite présenté à l'utilisateur, ce qui améliore la visibilité.

Pour ajouter du contenu à l'index, appelez index.add() sur l'enregistrement du service worker et fournissez les métadonnées requises sur le contenu.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Vous voulez voir ce qui figure déjà dans votre index ? Appelez index.getAll() lors de l'enregistrement du service worker.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Pour en savoir plus, consultez la section Indexer les pages accessibles hors connexion avec l'API Content Indexing.

API Wakelock

Implémentation du wakelock sur le site Web de Betty Crocker

J'aime cuisiner, mais je trouve ça super frustrant de suivre une recette et l'économiseur d'écran s'active ! Avec l'API wakelock, qui sort également de la phase d'évaluation dans Chrome 84, les sites peuvent demander un wakelock pour empêcher l'écran de s'assombrir et de se verrouiller.

D'ailleurs, le site Web de Betty Crocker l'utilise aujourd'hui et a publié une étude de cas sur web.dev montrant une augmentation de 300 % des indicateurs d'intention d'achat.

Pour obtenir un wakelock, appelez navigator.wakeLock.request(). Un objet WakeLockSentinel, utilisé pour "libérer" le wakelock, est renvoyé.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Bien sûr, il y a encore un peu plus à cela : consultez la page Restez éveillé avec l'API Screen Wake Lock, mais au moins mon écran ne sera plus recouvert de farine !

Phases d'évaluation

Je souhaite mettre en avant deux nouvelles phases d'évaluation. Si vous n'avez jamais utilisé les phases d'évaluation, consultez Premiers pas avec les phases d'évaluation de Chrome.

Détection d'inactivité

L'API Idle Detection vous avertit lorsqu'un utilisateur est inactif, ce qui vous indique qu'il n'est potentiellement pas à proximité de son ordinateur. Cette fonctionnalité est particulièrement utile pour les applications de chat ou les sites de réseaux sociaux, par exemple, pour permettre aux utilisateurs de savoir si leurs contacts sont disponibles ou non.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Consultez la page Détecter les utilisateurs inactifs avec l'API Idle Detection pour en savoir plus sur l'API et pour découvrir comment tester cette API dès aujourd'hui.

Web Assembly SIMD

Web Assembly SIMD lance une phase d'évaluation. Il présente des opérations correspondant aux instructions SIMD couramment disponibles dans le matériel. Les opérations SIMD sont utilisées pour améliorer les performances, en particulier dans les applications multimédias.

Pour en savoir plus sur WebAssembly SIMD, consultez la page Applications WebAssembly SIMD.

Et plus encore

Chrome 84 est grand, mais il existe d'autres mises à jour importantes que je veux souligner.

Complément d'informations

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

S'abonner

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage et j'ai toujours besoin d'une coupe de cheveux, mais dès la sortie de Chrome 85, je serai là pour vous dire : quelles sont les nouveautés de Chrome ?