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

Nouveautés de Chrome 68

Pete LePage

Le comportement d'ajout à l'écran d'accueil sur Android change pour vous donner plus de contrôle.
L'API Page Lifecycle vous indique quand votre onglet a été suspendu ou restauré.
L'API Payment Handler permet aux applications de paiement basées sur le Web de prendre en charge l'expérience de demande de paiement.

Et ce n'est pas tout : il y a encore beaucoup d'autres fonctionnalités !

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. Vous pouvez ainsi contrôler quand et comment inviter 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 répondant 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.

Pour en savoir plus, consultez Modifications à apporter au comportement de l'écran d'accueil.

API Page Lifecycle

Lorsqu'un utilisateur exécute un grand nombre d'onglets, 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 laissé 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 économiser des 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 sur l'API Page Lifecycle, consultez l'article de Phil. 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 basée sur le 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.

Le contenu intégré à un iframe requiert un geste de l'utilisateur pour accéder à une autre origine dans le contexte de navigation de niveau supérieur.

Depuis Chrome 1, les valeurs CSS cursor pour grab et grabbing sont préfixées. Nous acceptons désormais les valeurs standards sans préfixe. Enfin.
Et c'est un point important. Le cache HTTP est désormais ignoré lors de la demande de mises à jour d'un service worker, ce qui met Chrome en conformité avec la spécification et les autres navigateurs.

Nouveautés dans les 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.

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.