Cette page a été traduite par l'API Cloud Translation.

Nouveautés de Chrome 84

Pete LePage

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

Voici les informations à retenir :

Les utilisateurs peuvent lancer des tâches courantes dans votre application à l'aide des raccourcis d'icône d'application.
L'API Web Animations prend en charge un grand nombre de fonctionnalités qui n'étaient pas prises en charge auparavant.
Le wakelock peut empêcher l'écran de s'assombrir ou de se verrouiller.
L'API Content Indexing permet d'afficher les contenus disponibles hors connexion.
De nouvelles phases d'évaluation d'origine sont disponibles pour la détection d'inactivité et le SIMD Web Assembly.
Les modifications apportées au Règlement sur les cookies SameSite commencent à être déployées à nouveau.
et bien d'autres encore.

Je m'appelle Pete LePage. Je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 84 pour les développeurs.

Raccourcis d'icône d'application

Les raccourcis d'icône d'application permettent aux utilisateurs de lancer rapidement des tâches courantes dans votre application, par exemple composer un nouveau tweet, envoyer un message ou consulter leurs notifications. Elles 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. Ajouter un raccourci à votre PWA est facile. 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 en savoir plus, consultez Réaliser des tâches rapidement avec les raccourcis d'application.

API Web Animations

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

animation.ready et animation.finished ont été promisifiés.
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.
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 proposer de bons exemples ici. Consultez donc les améliorations apportées à l'API Web Animations dans Chromium 84 pour en savoir plus.

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

Avec l'API Content Indexing, qui vient de sortir de la phase de test initiale, vous pouvez ajouter des URL et des métadonnées pour les contenus disponibles hors connexion. À l'aide de ces métadonnées, le contenu est ensuite présenté à l'utilisateur, ce qui améliore sa 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 est 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 vos pages compatibles avec le mode 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 de suivre une recette et que le verrouillage de l'écran se déclenche. Avec l'API Wake Lock, qui passe également de son test d'origine à Chrome 84, les sites peuvent demander un wake lock pour empêcher l'écran de s'assombrir et de se verrouiller.

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 que cela. Consultez Rester éveillé avec l'API Screen Wake Lock. Mais au moins, mon écran ne sera plus recouvert de farine !

Phases d'évaluation

Je voudrais vous présenter deux nouveaux tests d'origine. 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 d'inactivité

L'API Idle Detection vous avertit lorsqu'un utilisateur est inactif, ce qui signifie qu'il est potentiellement absent de son ordinateur. Cela est particulièrement utile pour les applications de chat ou les sites de réseaux sociaux, afin d'indiquer aux utilisateurs 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,
});

Pour en savoir plus sur l'API et découvrir comment commencer à l'utiliser dès aujourd'hui, consultez Détecter les utilisateurs inactifs avec l'API Idle Detection.

SIMD Web Assembly

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

Et bien plus encore

Chrome 84 est important, mais je voudrais souligner quelques autres nouveautés importantes.

Nous reprenons le déploiement progressif des modifications apportées aux cookies SameSite.
Les sites qui envoient des demandes d'autorisation abusives ou des notifications abusives seront automatiquement inscrits à notre interface utilisateur des notifications discrètes.
Un nouvel essai d'origine est disponible pour QuicTransport.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 84.

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 toujours besoin d'une coupe de cheveux, mais dès que Chrome 85 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.