Neu in Chrome 68

Pete LePage

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 68 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

„Zu Startbildschirm hinzufügen“-Änderungen

Wenn Ihre Website die Kriterien zum Hinzufügen zum Startbildschirm erfüllt, wird in Chrome das Banner „Zum Startbildschirm hinzufügen“ nicht mehr angezeigt. Stattdessen bestimmen Sie selbst, wann und wie Sie die Nutzer auffordern.

Wenn Sie den Nutzer dazu auffordern möchten, warten Sie auf das beforeinstallprompt-Ereignis. Speichern Sie dann das Ereignis und fügen Sie Ihrer App eine Schaltfläche oder ein anderes UI-Element hinzu, um anzugeben, 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 Installationsschaltfläche klickt und prompt() für das gespeicherte beforeinstallprompt-Ereignis aufruft, wird in Chrome das Dialogfeld „Zum 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 zum Aktualisieren Ihrer Website haben, zeigt Chrome beim ersten Besuch einer Website, die die Kriterien für „Zum Startbildschirm hinzufügen“ erfüllt, eine Miniinfoleiste an. Nach dem Schließen wird die Miniinfoleiste eine Zeit lang nicht mehr angezeigt.

Unter Änderungen am Verhalten von „Zum Startbildschirm hinzufügen“ finden Sie alle Details, einschließlich Codebeispielen, die Sie verwenden können, und mehr.

Page Lifecycle API

Wenn ein Nutzer eine große Anzahl von Tabs hat, kann es sein, dass kritische Ressourcen wie Arbeitsspeicher, CPU, Akku und das Netzwerk überlastet sind, was zu einer schlechten Nutzererfahrung führt.

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

Wenn ein Nutzer beispielsweise eine Zeit lang einen Tab im Hintergrund hatte, kann der Browser die Skriptausführung auf dieser Seite aussetzen, um Ressourcen zu sparen. Zuvor wird das Ereignis freeze ausgelöst, sodass Sie offene IndexedDB- oder Netzwerkverbindungen schließen oder nicht gespeicherte Ansichtsstatus speichern können. Wenn der Nutzer dann den Tab wieder fokussiert, wird das resume-Ereignis ausgelöst. Damit können Sie alles neu initialisieren, was 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);

Im Page Lifecycle API-Beitrag von Phil finden Sie viele weitere Informationen, unter anderem Codebeispiele und Tipps. Die spec und ein Erläuterungsdokument finden Sie auf GitHub.

Payment Handler API

Die Payment Request API ist eine offene, standardbasierte Methode zur Annahme von Zahlungen. Die Payment Handler API erweitert die Reichweite von Zahlungsanfragen durch die Aktivierung webbasierter Zahlungs-Apps, um Zahlungen direkt über die Zahlungsanforderung zu vereinfachen.

Für dich als Verkäufer ist das Hinzufügen einer vorhandenen webbasierten Zahlungs-App genauso einfach wie das Hinzufügen eines Eintrags zur Property 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' }
  }
});

Wenn ein Service Worker installiert ist, der die angegebene Zahlungsmethode verarbeiten kann, wird er in der Zahlungsanforderungs-UI angezeigt und der Nutzer kann damit bezahlen.

Eiji hat einen praktischen Beitrag zur Implementierung dieser Funktion für Händlerwebsites und für Zahlungs-Handler.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 68 für Entwickler. Und natürlich gibt es noch viel mehr.

Neu in den Entwicklertools

Unter Neu in den Chrome-Entwicklertools erfahren Sie, was es Neues bei den Entwicklertools in Chrome 68 gibt.

Abonnieren

Klicke anschließend in unserem YouTube-Kanal auf die Schaltfläche Abonnieren. Du wirst dann jedes Mal per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 69 veröffentlicht wird, melde ich mich, um Sie über die Neuheiten in Chrome zu informieren.