Neu in Chrome 80

Pete LePage

Chrome 80 wird gerade eingeführt und bietet Entwicklern viele Neuerungen.

Unterstützt werden:

Ich bin Pete LePage und wir sehen uns jetzt an, was es Neues für Entwickler in Chrome 80 gibt.

Modul-Worker

Module Workers, ein neuer Modus für Web Workers mit den ergonomischen und leistungsstarken Vorteilen von JavaScript-Modulen, ist jetzt verfügbar. Der Worker-Konstruktor akzeptiert eine neue {type: "module"}-Option, die die Art und Weise ändert, wie Skripts geladen und ausgeführt werden, um <script type="module"> zu entsprechen.

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

Durch die Umstellung auf JavaScript-Module kann auch der dynamische Import für das Lazy Loading von Code verwendet werden, ohne die Ausführung des Workers zu blockieren. Weitere Informationen finden Sie im web.dev-Beitrag von Jason.

Optionale Verkettung

Das Lesen von tief verschachtelten Attributen in einem Objekt kann fehleranfällig sein, insbesondere wenn die Gefahr 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;

In Chrome 80 wird eine neue JavaScript-Funktion namens optional chaining unterstützt. Wenn eine der Eigenschaften einen Nullwert oder „undefined“ zurückgibt, wird mit der optionalen Verkettung nicht etwa ein Fehler ausgegeben, sondern 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 Optional Chaining im V8-Blog.

Abschluss von Ursprungstests

Drei neue Funktionen sind vom Origin Trial in den stabilen Status übergegangen und können daher von jeder Website ohne Token verwendet werden.

Regelmäßige Hintergrundsynchronisierung

Die erste Funktion ist die regelmäßige Hintergrundsynchronisierung. Sie synchronisiert Daten regelmäßig im Hintergrund, sodass Nutzer immer die neuesten Daten haben, wenn sie Ihre installierte PWA öffnen.

Kontakte auswählen

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

Nutzer können nur das teilen, was sie möchten, und es ist einfacher, mit Freunden und Familie in Kontakt zu treten.

Mit der Methode Get Installed Related Apps kann Ihre Web-App prüfen, ob Ihre native App auf dem Gerät eines Nutzers installiert ist.

Einer der häufigsten Anwendungsfälle ist die Entscheidung, ob die Installation Ihrer PWA beworben werden soll, wenn Ihre native App nicht installiert ist. Möglicherweise möchten Sie auch einige Funktionen einer App deaktivieren, wenn sie 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? Hier liegt ein Problem mit der Auffindbarkeit vor. Wissen sie, dass sie Ihre App öffnen müssen? Oder welche Inhalte sind verfügbar?

Die Content Indexing API ist ein neuer Origin-Trial, mit dem Sie URLs und Metadaten von Offline-fähigen Inhalten zu einem lokalen Index hinzufügen können, der vom Browser verwaltet wird und für den Nutzer leicht 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',
  }],
});

Um etwas dem Index hinzuzufügen, muss ich die Service Worker-Registrierung abrufen, dann index.add aufrufen und Metadaten zum Inhalt angeben.

Sobald der Index gefüllt ist, wird er in einem speziellen Bereich der Seite „Downloads“ von Chrome für Android angezeigt. Weitere Informationen finden Sie im web.dev-Beitrag Indexing your offline-capable pages with the Content Indexing API von Jeff.

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, aber manchmal nicht. Wenn Sie beispielsweise eine Kalendererinnerung an einen wichtigen Termin nicht erhalten, weil Sie sich im Flugmodus befinden, verpassen Sie den Termin möglicherweise.

Mit Benachrichtigungstriggern können Sie Benachrichtigungen im Voraus planen, sodass das Betriebssystem die Benachrichtigung zum richtigen Zeitpunkt 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)
});

Rufen Sie showNotification in der Service Worker-Registrierung auf, um eine Benachrichtigung zu planen. Fügen Sie in den Benachrichtigungsoptionen das Attribut showTrigger mit einem TimestampTrigger hinzu. Wenn es dann so weit ist, wird die Benachrichtigung im Browser angezeigt.

Der Ursprungstest soll bis Chrome 83 laufen. Weitere Informationen finden Sie im Beitrag Notification Triggers von Tom auf web.dev.

Weitere Ursprungstests

In Chrome 80 werden einige weitere Ursprungstests gestartet:

  • Web Serial
  • PWAs können sich als Dateihandler registrieren
  • Neue Eigenschaften für die Kontaktauswahl

Eine vollständige Liste der Funktionen im Ursprungstest finden Sie unter.

Und vieles mehr

Natürlich gibt es noch viel mehr!

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

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 80 finden Sie unter den folgenden Links.

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, wenn wir ein neues Video veröffentlichen.

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