Neu in Chrome 68

Pete LePage

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 68 für Entwickler neu ist.

Vollständige Liste der Änderungen ansehen Liste der Änderungen am Chromium-Quell-Repository

Änderungen an „Zum Startbildschirm hinzufügen“

Wenn Ihre Website die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, wird in Chrome kein Banner mehr angezeigt. Stattdessen können Sie festlegen, wann und wie der Nutzer dazu aufgefordert wird.

Wenn Sie den Nutzer darauf hinweisen möchten, warten Sie auf das Ereignis beforeinstallprompt, speichern Sie es und fügen Sie Ihrer App eine Schaltfläche oder ein anderes UI-Element hinzu, um anzuzeigen, dass es 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 Ereignis beforeinstallprompt aufgerufen. Daraufhin wird in Chrome das Dialogfeld „Dem Startbildschirm hinzufügen“ angezeigt.


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 Zeit haben, Ihre Website zu aktualisieren, wird in Chrome zum ersten Mal, wenn ein Nutzer eine Website besucht, die die Kriterien für das Hinzufügen zum Startbildschirm erfüllt, eine Mini-Infoleiste angezeigt. Nach dem Schließen wird die Mini-Infoleiste für eine Weile nicht mehr angezeigt.

Im Artikel Änderungen am Verhalten des Startbildschirms hinzufügen finden Sie alle Details, einschließlich Codebeispielen, die Sie verwenden können.

Page Lifecycle API

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

Wenn Ihre Website im Hintergrund ausgeführt wird, wird sie vom System möglicherweise angehalten, um Ressourcen zu sparen. Mit der neuen Page Lifecycle API können Sie jetzt auf diese Ereignisse warten und darauf reagieren.

Wenn ein Nutzer beispielsweise einen Tab schon länger im Hintergrund geöffnet hat, kann der Browser die Scriptausführung auf dieser Seite pausieren, um Ressourcen zu sparen. Zuvor wird das Ereignis freeze ausgelöst, damit Sie geöffnete IndexedDB- oder Netzwerkverbindungen schließen oder nicht gespeicherte Ansichtsstatus speichern können. Wenn der Nutzer den Tab dann wieder in den Fokus nimmt, wird das Ereignis resume ausgelöst. Hier können Sie alles neu initialisieren, was zuvor entfernt wurde.

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

In Phils Artikel Page Lifecycle API finden Sie viele weitere Informationen, einschließlich Codebeispielen und Tipps. Die Spezifikation und eine Erläuterungsdokumentation finden Sie auf GitHub.

Payment Handler API

Die Payment Request API ist eine offene, standardsbasierte Methode, um Zahlungen zu akzeptieren. Mit der Payment Handler API wird die Reichweite von Zahlungsanfragen erweitert, da webbasierte Zahlungs-Apps Zahlungen direkt über die Zahlungsanfrage ermöglichen.

Als Verkäufer können Sie eine vorhandene webbasierte Zahlungs-App ganz einfach hinzufügen, indem Sie der Property supportedMethods 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 zeigt, wie Sie dies für Händlerwebsites und Zahlungsabwickler implementieren.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 68 für Entwickler. Es gibt natürlich noch viele weitere.

Neu in den Entwicklertools

Weitere Informationen zu den Neuerungen in den Chrome-Entwicklertools in Version 68 finden Sie unter Neu in den Chrome-Entwicklertools.

Abonnieren

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

Ich bin Pete LePage. Sobald Chrome 69 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.