Neu in Chrome 84

Pete LePage

Die Einführung von Chrome 84 in der stabilen Version hat begonnen.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es Neues für Entwickler in Chrome 84 gibt.

App-Symbol-Verknüpfungen

App-Symbolverknüpfungen für die PWA von Twitter

Mit App-Symbol-Verknüpfungen können Nutzer häufige Aufgaben in Ihrer App schnell starten, z. B. einen neuen Tweet verfassen, eine Nachricht senden oder ihre Benachrichtigungen aufrufen. Sie werden in Chrome für Android unterstützt.

Diese Verknüpfungen werden durch langes Drücken des App-Symbols auf Android-Geräten aufgerufen. Das Hinzufügen einer Verknüpfung zu Ihrer PWA ist ganz einfach: Erstellen Sie eine neue shortcuts-Eigenschaft in Ihrem Web-App-Manifest, beschreiben Sie die Verknüpfung und fügen Sie Ihre Symbole hinzu.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Weitere Informationen

Web Animations API

In Chrome 84 werden der Web Animations API eine Reihe von bisher nicht unterstützten Funktionen hinzugefügt.

  • animation.ready und animation.finished wurden in Promises umgewandelt.
  • Der Browser kann jetzt alte Animationen bereinigen und entfernen, wodurch Arbeitsspeicher gespart und die Leistung verbessert wird.
  • Außerdem können Sie jetzt Animationen mit den Optionen add und accumulate kombinieren.

Ich kann hier einfach nicht alle Verbesserungen angemessen darstellen oder gute Beispiele geben. Weitere Informationen finden Sie unter Web Animations API improvements in Chromium 84.

Content Indexing API

Wenn Ihre Inhalte ohne Netzwerkverbindung verfügbar sind. Aber der Nutzer weiß nichts davon? Ist es wirklich verfügbar? Es gibt ein Problem mit der Erkennung.

Mit der Content Indexing API, die gerade aus der ursprünglichen Testphase herausgekommen ist, können Sie URLs und Metadaten für offline verfügbare Inhalte hinzufügen. Anhand dieser Metadaten werden die Inhalte dann dem Nutzer präsentiert, was die Auffindbarkeit verbessert.

Rufen Sie index.add() für die Service Worker-Registrierung auf und geben Sie die erforderlichen Metadaten für die Inhalte an, um Inhalte dem Index hinzuzufügen.


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

Möchten Sie sehen, was bereits in Ihrem Index enthalten ist? Rufen Sie index.getAll() für die Service Worker-Registrierung auf.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Ausführliche Informationen finden Sie unter Offlinefähige Seiten mit der Content Indexing API indexieren.

Wake Lock API

Wakelock-Implementierung auf der Betty Crocker-Website.

Ich koche gern, aber es ist total frustrierend, wenn beim Kochen nach Rezept der Bildschirmschoner aktiviert wird. Mit der Wake Lock API, die in Chrome 84 ebenfalls aus dem Origin Trial-Status herauskommt, können Websites einen Wake Lock anfordern, um zu verhindern, dass der Bildschirm abgedunkelt und gesperrt wird.

Die Betty Crocker-Website verwendet diese Funktion bereits und hat auf web.dev eine Fallstudie veröffentlicht, in der ein Anstieg der Indikatoren für die Kaufabsicht um 300 % beschrieben wird.

Rufen Sie navigator.wakeLock.request() auf, um ein Wake Lock zu erhalten. Es wird ein WakeLockSentinel-Objekt zurückgegeben, mit dem das Wake Lock „freigegeben“ wird.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Natürlich ist das nicht alles, was es zu beachten gibt. Weitere Informationen finden Sie unter Mit der Screen Wake Lock API wach bleiben. Zumindest ist mein Bildschirm jetzt nicht mehr mit Mehl bedeckt.

Ursprungstests

Es gibt zwei neue Origin Trials, die ich hervorheben möchte. Wenn Sie noch nicht mit Ursprungstests vertraut sind, lesen Sie den Artikel Erste Schritte mit Ursprungstests in Chrome.

Erkennung von Inaktivität

Die Idle Detection API benachrichtigt Sie, wenn ein Nutzer inaktiv ist. Das bedeutet, dass er sich möglicherweise nicht an seinem Computer befindet. Das ist beispielsweise für Chat-Anwendungen oder soziale Netzwerke nützlich, damit Nutzer sehen können, ob ihre Kontakte verfügbar sind.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Weitere Informationen zur API und dazu, wie Sie sie noch heute ausprobieren können, finden Sie unter Inaktive Nutzer mit der Idle Detection API erkennen.

Web Assembly SIMD

Und WebAssembly SIMD startet einen Origin-Testlauf. Es werden Vorgänge eingeführt, die Hardware-SIMD-Befehlen entsprechen. SIMD-Operationen werden verwendet, um die Leistung zu verbessern, insbesondere in Multimedia-Anwendungen.

Weitere Informationen zu WebAssembly SIMD

Und vieles mehr

Chrome 84 ist ein großes Update, aber es gibt noch einige andere wichtige Neuerungen, auf die ich hinweisen möchte.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 84.

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 brauche immer noch einen Haarschnitt. Aber sobald Chrome 85 veröffentlicht wird, bin ich wieder da, um euch zu erzählen, was es Neues in Chrome gibt.