Neu in Chrome 80

Pete LePage

Chrome 80 wird jetzt eingeführt und bietet Entwicklern jede Menge neuer Funktionen.

Folgendes wird unterstützt:

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

Modul-Worker

Module Worker ist ein neuer Modus für Web Worker mit den Vorteilen in Bezug auf Ergonomie und Leistung von JavaScript-Modulen. Der Worker-Konstruktor akzeptiert eine neue {type: "module"}-Option, mit der sich die Art und Weise ändern lässt, wie Scripts geladen und ausgeführt werden, um <script type="module"> zu entsprechen.

const worker = new Worker('worker.js', {
  type: 'module'
});

Die Umstellung auf JavaScript-Module ermöglicht auch die Verwendung von dynamischem Import für Lazy-Loading-Code, ohne die Ausführung des Workers zu blockieren. Weitere Informationen finden Sie in Jasons Beitrag Threading the web with module workers (Das Web mit Modul-Workern durchsuchen) auf web.dev.

Optionale Verkettung

Das Lesen tief verschachtelter Eigenschaften in einem Objekt kann fehleranfällig sein, insbesondere wenn die Wahrscheinlichkeit besteht, dass etwas nicht ausgewertet wird.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Wenn Sie jeden Wert vor dem Fortfahren prüfen, kann das schnell zu einer tief verschachtelten if-Anweisung führen oder einen try-/catch-Block erfordern.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 unterstützt die neue JavaScript-Funktion optionale Verknüpfung. Wenn bei der optionalen bedingten Weiterleitung eines der Properties „null“ oder „undefined“ zurückgibt, wird anstelle eines Fehlers einfach „undefined“ zurückgegeben.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Weitere Informationen finden Sie im Blogpost Optionale Verkettung im V8-Blog.

Abschluss von Ursprungstests

Drei neue Funktionen wurden aus der Origin-Testphase in die stabile Version überführt und können jetzt von jeder Website ohne Token verwendet werden.

Regelmäßige Hintergrundsynchronisierung

Die erste ist die regelmäßige Hintergrundsynchronisierung. Dabei werden Daten regelmäßig im Hintergrund synchronisiert, damit Nutzer, die Ihre installierte PWA öffnen, immer die neuesten Daten sehen.

Kontaktauswahl

Als Nächstes folgt die Contact Picker API, eine On-Demand-API, mit der Nutzer Einträge aus ihrer Kontaktliste auswählen und eingeschränkte Details der ausgewählten Einträge mit einer Website teilen können.

Nutzer können so selbst entscheiden, was sie wann teilen möchten, und es wird ihnen leichter gemacht, mit Freunden und Familie in Kontakt zu bleiben.

Mit der Methode Get Installed Related Apps (Installierte ähnliche Apps abrufen) kann Ihre Webanwendung prüfen, ob Ihre native App auf dem Gerät eines Nutzers installiert ist.

Einer der häufigsten Anwendungsfälle ist die Entscheidung, ob Sie die Installation Ihrer PWA bewerben möchten, wenn Ihre native App nicht installiert ist. Möglicherweise möchten Sie auch einige Funktionen einer App deaktivieren, wenn diese von der anderen App bereitgestellt werden.

Neue Ursprungstests

Content Indexing API

Wie informieren Sie Nutzer über Inhalte, die Sie in Ihrer PWA im Cache gespeichert haben? Es gibt ein Problem bei der Erkennung. Wissen sie, wie sie Ihre App öffnen? Oder welche Inhalte sind verfügbar?

Die Content Indexing API ist ein neuer Test für Ursprünge, mit dem Sie URLs und Metadaten von offlinefähigen Inhalten zu einem lokalen Index hinzufügen können, der vom Browser verwaltet und für Nutzer gut sichtbar ist.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Wenn ich dem Index etwas hinzufügen möchte, muss ich die Registrierung des Dienst-Workers abrufen, dann index.add aufrufen und Metadaten zu den Inhalten angeben.

Sobald der Index erstellt wurde, wird er in einem speziellen Bereich von Chrome auf der Downloadseite von Android angezeigt. Weitere Informationen finden Sie im Blogpost Indexierung Ihrer offlinefähigen Seiten mit der Content Indexing API von Jeff auf web.dev.

Auslöser für Benachrichtigungen

Benachrichtigungen sind ein wichtiger Bestandteil vieler Apps. Push-Benachrichtigungen sind jedoch nur so zuverlässig wie das Netzwerk, mit dem Sie verbunden sind. Das funktioniert in den meisten Fällen, manchmal aber nicht. Wenn beispielsweise eine Kalendererinnerung zu einem wichtigen Termin nicht angezeigt wird, weil Sie sich im Flugmodus befinden, verpassen Sie diesen Termin möglicherweise.

Mit Benachrichtigungstriggern können Sie Benachrichtigungen im Voraus planen, damit das Betriebssystem sie zur richtigen Zeit sendet – auch wenn keine Netzwerkverbindung besteht oder sich das Gerät im Energiesparmodus befindet.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Wenn Sie eine Benachrichtigung planen möchten, rufen Sie showNotification in der Service Worker-Registrierung auf. Fügen Sie in den Benachrichtigungsoptionen eine showTrigger-Property mit einer TimestampTrigger hinzu. Wenn die Zeit gekommen ist, zeigt der Browser die Benachrichtigung an.

Der Ursprungstest soll bis Chrome 83 laufen. Weitere Informationen finden Sie in Toms Artikel Notification Triggers auf web.dev.

Andere Ursprungstests

Ab Chrome 80 gibt es noch einige weitere Ursprungstests:

  • Web Serial
  • Möglichkeit, PWAs als Datei-Handler zu registrieren
  • Neue Properties für die Kontaktauswahl

Eine vollständige Liste der Funktionen findest du im Test.

Und vieles mehr

Natürlich gibt es noch viel mehr!

  • Mit #:~:text=something können Sie jetzt direkt auf Textfragmente auf einer Seite verlinken. Chrome scrollt zur ersten Instanz dieses Textfragments und markiert es. Beispiel: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • Wenn Sie display: minimal-ui für eine Desktop-PWA festlegen, wird in der Titelleiste der installierten PWA eine Schaltfläche zum Zurückgehen und Aktualisieren hinzugefügt.
  • Außerdem werden in Chrome jetzt SVG-Bilder als Favicons unterstützt.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 80.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

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