Nouveautés de Chrome 80

Pete LePage

Chrome 80 est en cours de déploiement et contient une multitude de nouveautés pour les développeurs !

Les éléments suivants sont pris en charge:

Je m'appelle Pete LePage. Découvrons les nouveautés de Chrome 80 pour les développeurs.

Nœuds de calcul de module

Module Workers, un nouveau mode pour les workers Web offrant l'ergonomie et les avantages en termes de performances des modules JavaScript, est désormais disponible. Le constructeur de nœud de calcul accepte une nouvelle option {type: "module"}, qui modifie la façon dont les scripts sont chargés et exécutés pour correspondre à <script type="module">.

const worker = new Worker('worker.js', {
  type: 'module'
});

Le passage aux modules JavaScript permet également d'utiliser l'importation dynamique pour le chargement différé du code, sans bloquer l'exécution du worker. Pour en savoir plus, consultez l'article de Jason Threading the web with module workers (Exécuter des threads avec des nœuds de calcul de modules) sur web.dev.

Chaînage facultatif

Essayer de lire les propriétés profondément imbriquées dans un objet peut entraîner des erreurs, en particulier s'il est possible que quelque chose ne soit pas évalué.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Le fait de vérifier chaque valeur avant de continuer se transforme facilement en une instruction if profondément imbriquée ou nécessite un bloc try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 est compatible avec une nouvelle fonctionnalité JavaScript appelée chaînage facultatif. Avec le chaînage facultatif, si l'une des propriétés renvoie une valeur nulle ou non définie au lieu de générer une erreur, l'ensemble renvoie simplement une valeur non définie.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Pour en savoir plus, consultez l'article de blog Optional Chaining sur le blog de la version 8.

Passage à un niveau supérieur de la phase d'évaluation

Trois nouvelles fonctionnalités sont passées de la phase d'évaluation à la version stable. Elles peuvent être utilisées par n'importe quel site, sans jeton.

Synchronisation périodique en arrière-plan

Tout d'abord, il y a la synchronisation périodique en arrière-plan. Elle synchronise périodiquement les données en arrière-plan de sorte que lorsqu'un utilisateur ouvre votre PWA installée, il dispose toujours des données les plus récentes.

Outil de sélection de contacts

Vient ensuite l'API Contact Picker, une API à la demande qui permet aux utilisateurs de sélectionner des entrées dans leur liste de contacts et de partager des détails limités des entrées sélectionnées avec un site Web.

Elle permet aux utilisateurs de ne partager que ce qu'ils veulent, quand ils le souhaitent, et leur permet de contacter et de communiquer plus facilement avec leurs amis et leur famille.

Enfin, la méthode Installer les applications associées permet à votre application Web de vérifier si votre application native est installée sur l'appareil d'un utilisateur.

L'un des cas d'utilisation les plus courants consiste à décider s'il faut promouvoir l'installation de votre PWA si votre application native n'est pas installée. Vous pouvez également désactiver certaines fonctionnalités d'une application si elles sont fournies par l'autre application.

Nouvelles phases d'évaluation

API d'indexation de contenu

Comment informez-vous les utilisateurs concernant le contenu que vous avez mis en cache dans votre PWA ? Il y a un problème de découverte ici. Saura-t-il qu'il doit ouvrir votre application ? Ou quel contenu est disponible ?

L'API Content Indexing est une nouvelle phase d'évaluation qui vous permet d'ajouter des URL et des métadonnées de contenu hors connexion à un index local, géré par le navigateur et facilement visibles par l'utilisateur.

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

Pour ajouter un élément à l'index, je dois enregistrer le service worker, puis appeler index.add et fournir des métadonnées sur le contenu.

Une fois l'index renseigné, il s'affiche dans une zone dédiée de la page des téléchargements de Chrome pour Android. Pour en savoir plus, consultez l'article de Jeff Indexing your hors connexion pages with the Content Indexing API (Indexer vos pages accessibles hors connexion à l'aide de l'API Content Indexing) sur le site web.dev.

Déclencheurs de notification

Les notifications jouent un rôle essentiel dans de nombreuses applications. Toutefois, la fiabilité des notifications push dépend du réseau auquel vous êtes connecté. Bien que cela fonctionne dans la plupart des cas, cela arrive parfois en panne. Par exemple, si un rappel d'agenda vous informant d'un événement important n'arrive pas parce que vous êtes en mode Avion, vous risquez de manquer l'événement.

Les déclencheurs de notification vous permettent de planifier des notifications à l'avance, afin que le système d'exploitation les envoie au bon moment, même en l'absence de connectivité réseau ou en mode Économiseur de batterie.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Pour planifier une notification, appelez showNotification sur l'enregistrement du service worker. Dans les options de notification, ajoutez une propriété showTrigger avec un TimestampTrigger. Lorsque l'heure indiquée sera affichée, le navigateur affichera la notification.

La phase d'évaluation est prévue pour Chrome 83. Pour en savoir plus, consultez l'article de Tom sur les déclencheurs de notification sur web.dev.

Autres phases d'évaluation

D'autres phases d'évaluation sont disponibles à partir de Chrome 80:

  • Numéro de série Web
  • Possibilité pour les PWA de s'enregistrer en tant que gestionnaires de fichiers
  • Nouvelles propriétés pour le sélecteur de contacts

Consultez la liste complète des fonctionnalités de la phase d'évaluation.

Et plus encore

Bien sûr, ce n'est pas tout !

  • Vous pouvez maintenant créer un lien direct vers des fragments de texte sur une page à l'aide de #:~:text=something. Chrome fait défiler la page jusqu'à la première instance du fragment de texte et la met en surbrillance. Exemple : https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Définir display: minimal-ui sur une PWA de bureau ajoute un bouton de retour et d'actualisation à la barre de titre de la PWA installée.
  • Chrome prend désormais en charge l'utilisation d'images SVG en tant que favicons.

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

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. Dès la sortie de Chrome 81, je serai là pour vous dire quelles sont les nouveautés de Chrome !