Nouveautés de Chrome 80

Pete LePage

Chrome 80 est en cours de déploiement, et il contient de nombreuses nouveautés pour les développeurs.

Les éléments suivants sont compatibles:

Je m'appelle Pete LePage. Je vais vous présenter les nouveautés de Chrome 80 pour les développeurs.

Nœuds de calcul de module

Les nœuds de calcul de module, un nouveau mode pour les nœuds de calcul Web, avec les avantages ergonomiques et de performances des modules JavaScript, sont désormais disponibles. Le constructeur Worker 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 code de chargement différé, sans bloquer l'exécution du worker. Pour en savoir plus, consultez l'article Threading the web with module workers (Threading le Web avec des workers de module) de Jason sur web.dev.

Chaînage facultatif

Essayer de lire des propriétés profondément imbriquées dans un objet peut être source d'erreurs, en particulier si un élément ne peut pas être évalué.

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

Vérifier chaque valeur avant de continuer se transforme facilement en 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înement facultatif. Avec la chaîne de liaison facultative, si l'une des propriétés renvoie une valeur null ou undefined, au lieu de générer une erreur, l'ensemble renvoie simplement undefined.

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

Étapes de l'essai Origin

Trois nouvelles fonctionnalités sont passées de la version Origin Trial à la version stable, ce qui leur permet d'être utilisées par n'importe quel site, sans jeton.

Synchronisation périodique en arrière-plan

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

Sélecteur de contacts

L'API Contact Picker est une API à la demande qui permet aux utilisateurs de sélectionner des entrées dans leur liste de contacts et de partager des informations limitées sur les 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 de rester facilement en contact avec leurs amis et leur famille.

Enfin, la méthode Get Installed Related Apps (Obtenir les applications associées installé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 de 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.

Nouveaux tests Origin

API Content Indexing

Comment informer les utilisateurs du contenu que vous avez mis en cache dans votre PWA ? Il y a un problème de découverte ici. Seront-ils invités à ouvrir votre application ? Ou quels contenus sont disponibles ?

L'API Content Indexing est un nouvel essai d'origine qui vous permet d'ajouter des URL et des métadonnées de contenus compatibles avec le mode hors connexion à un index local, géré par le navigateur et facilement visible 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 obtenir l'enregistrement du 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 "Téléchargements" de Chrome pour Android. Pour en savoir plus, consultez l'article Indexer vos pages compatibles avec le mode hors connexion avec l'API Content Indexing de Jeff sur web.dev.

Déclencheurs de notification

Les notifications constituent un élément essentiel de nombreuses applications. Toutefois, les notifications push ne sont fiables que si le réseau auquel vous êtes connecté l'est. Bien que cela fonctionne dans la plupart des cas, il arrive que cela ne fonctionne pas. Par exemple, si un rappel d'agenda vous informant d'un événement important ne s'affiche pas, car vous êtes en mode avion, vous risquez de manquer l'événement.

Les déclencheurs de notifications vous permettent de planifier des notifications à l'avance afin que le système d'exploitation les envoie au bon moment, même s'il n'y a pas de connectivité réseau ou si l'appareil est en mode économie d'énergie.

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. Ensuite, lorsque le moment sera venu, le navigateur affichera la notification.

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

Autres phases d'évaluation de l'origine

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

  • Web Serial
  • 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 disponibles dans le test de l'origine.

Et bien plus encore

Bien sûr, il y a bien plus !

  • Vous pouvez désormais créer des liens directs vers des fragments de texte sur une page à l'aide de #:~:text=something. Chrome fait défiler la page jusqu'à la première instance de ce fragment de texte et la met en surbrillance. Par exemple : https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Définir display: minimal-ui sur une PWA pour ordinateur ajoute un bouton "Retour" et "Actualiser" à la barre de titre de la PWA installée.
  • Chrome accepte désormais les images SVG comme favicons.

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

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 81 sera disponible, je vous présenterai les nouveautés de Chrome.