Neu in Chrome 68

Pete LePage

Und viele weitere Funktionen!

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

Möchtest du eine vollständige Liste der Änderungen erhalten? 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 genügend Zeit für die Aktualisierung Ihrer Website haben, zeigt Chrome eine Miniinfoleiste an, wenn ein Nutzer eine Website zum ersten Mal aufruft, die die Kriterien zum Hinzufügen zum Startbildschirm erfüllt. Nach dem Schließen wird die Mini-Infoleiste für eine Weile nicht mehr angezeigt.

Unter Änderungen an der Funktionsweise des Startbildschirms hinzufügen findest du alle Details, einschließlich Codebeispielen, die du verwenden kannst, und mehr.

Page Lifecycle API

Wenn ein Nutzer eine große Anzahl von Tabs aktiv hat, können kritische Ressourcen wie Arbeitsspeicher, CPU, Akku und Netzwerk überlastet werden, was die Nutzerfreundlichkeit beeinträchtigt.

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

Befindet sich ein Nutzer beispielsweise eine Zeit lang einen Tab im Hintergrund, kann der Browser die Skriptausführung auf dieser Seite aussetzen, um Ressourcen zu sparen. Zuvor wird das Ereignis freeze ausgelöst, mit dem Sie offene IndexedDB- oder Netzwerkverbindungen schließen oder den nicht gespeicherten Ansichtsstatus speichern können. Wenn der Nutzer den Tab dann wieder fokussiert, wird das Ereignis resume ausgelöst, mit dem Sie alles neu initialisieren können, was gelöscht 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 sie in der Benutzeroberfläche für Zahlungsanfragen angezeigt und der Nutzer kann damit bezahlen.

Eiji hat einen tollen Beitrag veröffentlicht, in dem gezeigt wird, wie dies für Händlerwebsites und Zahlungs-Handler implementiert werden kann.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 68 für Entwickler. Natürlich gibt es 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.