Nouveautés de Chrome 68

Pete LePage

Et ce n'est pas tout ! En savoir plus

Je m'appelle Pete LePage. Voyons ce que Chrome 68 a de nouveau à offrir aux développeurs.

Vous souhaitez consulter la liste complète des modifications ? Consultez la liste des modifications apportées au dépôt source Chromium.

Modifications apportées à l'option "Ajouter à l'écran d'accueil"

Si votre site répond aux critères d'ajout à l'écran d'accueil, Chrome n'affichera plus la bannière d'ajout à l'écran d'accueil. Au lieu de cela, vous contrôlez quand et comment envoyer une invite à l'utilisateur.

Pour inviter l'utilisateur, écoutez l'événement beforeinstallprompt, puis enregistrez l'événement et ajoutez un bouton ou un autre élément d'interface utilisateur à votre application pour indiquer qu'elle peut être installée.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Lorsque l'utilisateur clique sur le bouton d'installation, appelez prompt() sur l'événement beforeinstallprompt enregistré. Chrome affiche ensuite la boîte de dialogue d'ajout à l'écran d'accueil.


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

Pour vous laisser le temps de mettre à jour votre site, Chrome affiche une mini-barre d'informations la première fois qu'un utilisateur accède à un site qui répond aux critères d'ajout à l'écran d'accueil. Une fois fermée, la mini-barre d'informations ne s'affiche plus pendant un certain temps.

Modifications à apporter au comportement de l'écran d'accueil contient tous les détails, y compris des exemples de code que vous pouvez utiliser et plus encore.

API Page Lifecycle

Lorsqu'un utilisateur a un grand nombre d'onglets ouverts, des ressources critiques telles que la mémoire, le processeur, la batterie et le réseau peuvent être surabonnées, ce qui entraîne une mauvaise expérience utilisateur.

Si votre site s'exécute en arrière-plan, le système peut le suspendre pour économiser des ressources. Avec la nouvelle API Page Lifecycle, vous pouvez désormais écouter et répondre à ces événements.

Par exemple, si un utilisateur a ouvert un onglet en arrière-plan pendant un certain temps, le navigateur peut choisir de suspendre l'exécution du script sur cette page pour préserver les ressources. Avant de le faire, il déclenche l'événement freeze, ce qui vous permet de fermer les connexions IndexedDB ou réseau ouvertes, ou d'enregistrer tout état de vue non enregistré. Ensuite, lorsque l'utilisateur recentre l'onglet, l'événement resume est déclenché, ce qui vous permet de réinitialiser tout ce qui a été détruit.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Pour en savoir beaucoup plus, consultez l'article de Phil sur l'API Page Lifecycle, qui contient des exemples de code, des conseils et plus encore. Vous trouverez la spécification et une documentation explicative sur GitHub.

API Payment Handler

L'API Payment Request est un moyen ouvert et basé sur des normes d'accepter les paiements. L'API Payment Handler étend la portée de la demande de paiement en permettant aux applications de paiement basées sur le Web de faciliter les paiements directement dans l'expérience de demande de paiement.

En tant que vendeur, ajouter une application de paiement Web existante est aussi simple que d'ajouter une entrée à la propriété supportedMethods.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Si un service worker capable de gérer le mode de paiement spécifié est installé, il s'affiche dans l'UI de la demande de paiement et l'utilisateur peut payer avec lui.

Eiji a rédigé un excellent article qui explique comment implémenter cette fonctionnalité pour les sites marchands et les gestionnaires de paiement.

Et bien plus !

Ce ne sont là que quelques-unes des modifications apportées à Chrome 68 pour les développeurs. Bien entendu, il y en a bien d'autres.

Nouveautés des outils de développement

Consultez Nouveautés dans les outils pour les développeurs Chrome pour découvrir les nouveautés de DevTools dans Chrome 68.

S'abonner

Cliquez ensuite sur le bouton S'abonner sur notre chaîne YouTube. 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 69 sera disponible, je vous présenterai les nouveautés de Chrome.