Neu in Chrome 68

Pete LePage

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 68 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im Chromium-Quell-Repository

Änderungen bei „Zum Startbildschirm hinzufügen“

Wenn Ihre Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, wird das Banner „Zum Startbildschirm hinzufügen“ in Chrome nicht mehr angezeigt. Stattdessen haben Sie die Kontrolle darüber, wann und wie Sie den Nutzer auffordern.

Um den Nutzer aufzufordern, hören Sie auf das beforeinstallprompt-Ereignis, speichern Sie das Ereignis und fügen Sie Ihrer App eine Schaltfläche oder ein anderes UI-Element hinzu, um anzugeben, dass sie installiert werden kann.

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

Wenn der Nutzer auf die Schaltfläche „Installieren“ klickt, wird prompt() für das gespeicherte beforeinstallprompt-Ereignis aufgerufen. Chrome zeigt dann das Dialogfeld „Zum Startbildschirm hinzufügen“ an.


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

Damit Sie genügend Zeit haben, Ihre Website zu aktualisieren, wird in Chrome beim ersten Besuch einer Website, die die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, eine Mini-Infoleiste angezeigt. Nach dem Schließen wird die Mini-Infoleiste eine Weile nicht mehr angezeigt.

Änderungen am Verhalten von „Zum Startbildschirm hinzufügen“ enthält alle Details, einschließlich Codebeispielen, die Sie verwenden können.

Page Lifecycle API

Wenn ein Nutzer viele Tabs geöffnet hat, können kritische Ressourcen wie Arbeitsspeicher, CPU, Akku und Netzwerk überlastet werden, was zu einer schlechten Nutzererfahrung führt.

Wenn Ihre Website im Hintergrund ausgeführt wird, kann das System sie anhalten, um Ressourcen zu sparen. Mit der neuen Page Lifecycle API können Sie jetzt auf diese Ereignisse reagieren.

Wenn ein Nutzer beispielsweise einen Tab längere Zeit im Hintergrund geöffnet hat, kann der Browser die Ausführung von Scripts auf dieser Seite unterbrechen, um Ressourcen zu sparen. Vorher wird das Ereignis freeze ausgelöst, sodass Sie offene IndexedDB- oder Netzwerkverbindungen schließen oder einen nicht gespeicherten Ansichtsstatus speichern können. Wenn der Nutzer den Tab dann wieder in den Fokus rückt, wird das Ereignis resume ausgelöst. Sie können dann alles, was abgebaut wurde, neu initialisieren.

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

Im Beitrag Page Lifecycle API von Phil finden Sie viele weitere Details, darunter Codebeispiele und Tipps. Die Spezifikation und ein Dokument mit Erläuterungen finden Sie auf GitHub.

Payment Handler API

Die Payment Request API ist eine offene, auf Standards basierende Methode, um Zahlungen zu akzeptieren. Die Payment Handler API erweitert die Reichweite von Payment Request, da webbasierte Zahlungs-Apps Zahlungen direkt im Payment Request-Ablauf ermöglichen.

Als Verkäufer können Sie eine vorhandene webbasierte Zahlungs-App ganz einfach hinzufügen, indem Sie der supportedMethods-Property einen Eintrag hinzufügen.

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

Wenn ein Service Worker installiert ist, der die angegebene Zahlungsmethode verarbeiten kann, wird er in der Benutzeroberfläche für Zahlungsanfragen angezeigt und der Nutzer kann damit bezahlen.

Eiji hat einen tollen Beitrag verfasst, in dem er beschreibt, wie sich das für Händlerwebsites und Zahlungs-Handler implementieren lässt.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 68 für Entwickler.

Neues in den Entwicklertools

Neu in den Chrome-Entwicklertools

Abonnieren

Klicke dann auf unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du erhältst dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 69 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.