Nouveautés de Chrome 84

Pete LePage

Chrome 84 commence à être déployé dans la version stable.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je tourne à la maison. Découvrons les nouveautés de Chrome 84 pour les développeurs.

Raccourcis d'icône d'application

Raccourcis d'icône 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, vous pouvez rédiger un nouveau tweet, envoyer un message ou consulter leurs notifications. Ils sont compatibles avec Chrome pour Android.

Pour accéder à ces raccourcis, appuyez de manière prolongée sur l'icône de l'application sur Android. Pour ajouter un raccourci à votre PWA, il est facile de créer une propriété shortcuts dans le fichier manifeste de votre application Web, de décrire le raccourci et d'ajouter 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 en savoir plus, consultez la page Effectuer rapidement des tâches avec les raccourcis d'application.

API Web Animations

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

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

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

API Content Indexing

Si votre contenu est disponible sans connexion réseau. Mais l'utilisateur n'en a pas connaissance ? Est-il 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() sur l'enregistrement du worker de service.

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 des pages accessibles hors connexion avec l'API Content Indexing.

API Wake Lock

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

J'aime cuisiner, mais je trouve ça très frustrant quand je suis 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'assombrissement et le verrouillage de l'écran.

Le site Web de Betty Crocker utilise déjà cette fonctionnalité et a publié une étude de cas sur web.dev montrant une augmentation de 300 % des indicateurs d'intention d'achat.

Pour obtenir un wake lock, appelez navigator.wakeLock.request(). Il renvoie un objet WakeLockSentinel, utilisé pour "libérer" le wake lock.


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

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

Bien sûr, il y a un peu plus à faire, alors consultez Rester activé avec l'API Screen Wake Lock, mais au moins mon écran ne sera plus recouvert de farine.

Phases d'évaluation

Il existe deux nouvelles phases d'évaluation. Si vous ne connaissez pas les phases d'évaluation des origines, consultez Premiers pas avec les phases d'évaluation des origines de Chrome.

Détection de l'inactivité

L'API Idle Detection vous avertit lorsqu'un utilisateur est inactif, et vous indique qu'il est potentiellement éloigné de son ordinateur. Cette fonctionnalité est particulièrement utile pour les applications de chat ou les sites de réseaux sociaux, qui permettent 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 Détecter les utilisateurs inactifs avec l'API Idle Detection pour en savoir plus sur l'API et découvrir comment commencer à l'utiliser dès aujourd'hui.

Web Assembly SIMD

Le SIMD Web Assembly lance un essai d'origine. Il présente des opérations correspondant à des 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 le SIMD WebAssembly, consultez Applications parallèles et rapides avec le SIMD WebAssembly.

Et bien plus encore

Chrome 84 est important, mais il y a d'autres mises à jour importantes que je tiens à souligner.

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 84.

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 et j'ai encore besoin de me faire couper les cheveux. Mais dès que Chrome 85 sera disponible, je serai là pour vous parler des nouveautés de Chrome.