Neu in Chrome 80

Pete LePage

Chrome 80 wird gerade eingeführt und bietet viele neue Funktionen für Entwickler.

Folgende Optionen werden unterstützt:

Mein Name ist Pete LePage. Als Nächstes sehen wir uns an, was es für Entwickler bei Chrome 80 Neues gibt.

Modul-Worker

Modul-Worker, ein neuer Modus für Web-Worker, der die Ergonomie und die Leistungsvorteile von JavaScript-Modulen bietet. Der Worker-Konstruktor akzeptiert eine neue {type: "module"}-Option, die die Art und Weise ändert, wie Skripts geladen und ausgeführt werden, damit sie <script type="module"> entspricht.

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

Durch die Migration zu JavaScript-Modulen können Sie auch den dynamischen Import für Lazy-Loading-Code nutzen, ohne die Ausführung des Workers zu blockieren. Weitere Informationen finden Sie in Jasons Beitrag zum Thema Threading the web withmodule Worker (Das Web mit Modul-Workern erstellen).

Optionale Verkettung

Der Versuch, tief verschachtelte Attribute in einem Objekt zu lesen, kann fehleranfällig sein, insbesondere wenn die Möglichkeit besteht, dass etwas nicht ausgewertet wird.

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

Die Überprüfung jedes Werts vor dem Fortfahren wird leicht in eine tief verschachtelte if-Anweisung umgewandelt oder erfordert einen try / catch-Block.

// 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 optionale Verkettung unterstützt. Wenn bei einer optionalen Verkettung ein NULL-Wert oder ein nicht definiertes Attribut zurückgibt, anstatt einen Fehler auszugeben, wird für das Ganze einfach „nicht definiert“ 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.

Absolventen des Ursprungstests

Es gibt drei neue Funktionen, die vom Ursprungstest zur stabilen Version übergegangen sind, sodass sie von jeder Website ohne Token verwendet werden können.

Regelmäßige Hintergrundsynchronisierung

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

Kontaktauswahl

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

Es ermöglicht Nutzern, jederzeit nur das freizugeben, was sie möchten. Außerdem können Nutzer so leichter mit Freunden und Familienmitgliedern in Kontakt treten.

Und schließlich kann Ihre Web-App mit der Methode Get Install Related Apps (Ähnliche Apps installieren) 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. Vielleicht möchten Sie aber auch einige Funktionen einer App deaktivieren, wenn diese von der anderen App bereitgestellt wird.

Neue Ursprungstests

API zur Contentindexierung

Wie informieren Sie Nutzer über Inhalte, die Sie in Ihrer PWA im Cache gespeichert haben? Hier gibt es ein Erkennungsproblem. Wird er darüber informiert, dass er deine App öffnen soll? Oder welche Inhalte sind verfügbar?

Die Content Detection API ist ein neuer Ursprungstest, mit dem Sie URLs und Metadaten von offline nutzbaren Inhalten 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 dem Index etwas 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 von Chrome for Android auf der Downloadseite angezeigt. Ausführliche Informationen finden Sie in Jeffs Beitrag Offline-fähige Seiten mit der Content Detection API indexieren 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, aber manchmal funktioniert es nicht. Wenn beispielsweise eine Kalendererinnerung, die Sie über einen wichtigen Termin benachrichtigt, nicht durchgestellt wird, weil Sie sich im Flugmodus befinden, können Sie den Termin verpassen.

Mit Benachrichtigungsauslösern 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 zum Planen einer Benachrichtigung showNotification für die Service Worker-Registrierung auf. Fügen Sie in den Benachrichtigungsoptionen ein showTrigger-Attribut mit einer TimestampTrigger hinzu. Wenn die Uhrzeit erreicht ist, zeigt der Browser die Benachrichtigung an.

Der Ursprungstest soll bis Chrome 83 laufen. Ausführliche Informationen hierzu findest du im Post Benachrichtigungstrigger von Tom auf web.dev.

Andere Ursprungstests

In Chrome 80 gibt es noch einige andere Ursprungstests:

  • Webserie
  • Die Möglichkeit, PWAs als Datei-Handler zu registrieren
  • Neue Eigenschaften für die Kontaktauswahl

Hier finden Sie eine vollständige Liste der Features im Ursprungstest.

Und noch 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 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 „Zurück und Aktualisieren“ hinzugefügt.
  • Außerdem unterstützt Chrome jetzt die Verwendung von SVG-Bildern als Favicons.

Weitere Informationen

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

Abo

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, sobald ein neues Video veröffentlicht wird.

Ich bin Pete LePage, und sobald Chrome 81 veröffentlicht wird, melde ich Ihnen, was es Neues in Chrome gibt!