Nouveautés de Chrome 68

Pete LePage

Et ce n'est pas tout : beaucoup plus !

Je m'appelle Pete LePage. C'est parti pour découvrir les nouveautés de Chrome 68 pour les 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 de 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 "Ajouter à l'écran d'accueil". Au lieu de cela, vous contrôlez quand et comment inviter l'utilisateur.

Pour inviter l'utilisateur, écoutez l'événement beforeinstallprompt, puis enregistrez-le 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 répondant aux critères d'ajout à l'écran d'accueil. Une fois ignorée, la mini-barre d'informations ne s'affichera plus pendant un certain temps.

Modifications apportées au comportement de l'option "Ajouter à l'écran d'accueil" : affiche tous les détails, y compris des exemples de code que vous pouvez utiliser, etc.

API Page Lifecycle

Lorsqu'un grand nombre d'onglets sont en cours d'exécution, les ressources critiques telles que la mémoire, le processeur, la batterie et le réseau peuvent faire l'objet d'une sursouscription, ce qui nuit à l'expérience utilisateur.

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

Par exemple, si un utilisateur a un onglet en arrière-plan depuis un certain temps, le navigateur peut choisir de suspendre l'exécution du script sur cette page pour économiser les ressources. Avant cela, il déclenche l'événement freeze, ce qui vous permet de fermer IndexedDB ou les connexions réseau ouvertes, ou d'enregistrer tout état d'affichage 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é supprimé.

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);

Consultez l'article de Phil sur l'API Page Lifecycle pour en savoir plus, y compris des exemples de code, des conseils, etc. Vous trouverez la spec et une documentation explicative sur GitHub.

API Payment Handler

L'API Payment Request est une méthode ouverte et normalisée qui permet d'accepter des paiements. L'API Payment Handler étend la portée des requêtes de paiement en permettant aux applications de paiement 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 apparaît dans l'interface utilisateur de demande de paiement et l'utilisateur peut l'utiliser pour payer.

Eiji publie un article de qualité qui explique comment mettre en œuvre cette fonctionnalité pour les sites marchands et pour 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 sûr, mais il y en a bien d'autres.

Nouveautés des outils de développement

Consultez la page Nouveautés des outils pour les développeurs Chrome pour découvrir les nouveautés concernant les outils de développement dans Chrome 68.

S'abonner

Cliquez ensuite sur le bouton S'abonner sur notre chaîne YouTube. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera mise en ligne.

Je m'appelle Pete LePage. Dès la sortie de Chrome 69, je serai là pour vous dire : quelles sont les nouveautés de Chrome !