Neu in Chrome 84

Pete LePage

Die stabile Version von Chrome 84 wird schrittweise eingeführt.

Dazu sollten Sie Folgendes wissen:

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

App-Symbolverknüpfungen

Tastenkombinationen für das App-Symbol 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 Tastenkürzel werden auf Android-Geräten durch langes Drücken des App-Symbols aufgerufen. Das Hinzufügen eines Shortcuts zu Ihrer PWA ist ganz einfach. Erstellen Sie dazu eine neue shortcuts-Property in Ihrem Web-App-Manifest, beschreiben Sie den Shortcut 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" }
    ]
  },
]

Ausführliche Informationen finden Sie unter Aufgaben mit App-Verknüpfungen schnell erledigen.

Web Animations API

Chrome 84 fügt der Web Animations API eine Reihe zuvor nicht unterstützter Funktionen hinzu.

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

Ich kann hier einfach nicht allen Verbesserungen gerecht werden oder gute Beispiele nennen. Weitere Informationen finden Sie unter Verbesserungen der Web Animations API in Chromium 84.

API für die Inhaltsindexierung

Ob deine Inhalte ohne Netzwerkverbindung verfügbar sind. Aber der Nutzer weiß davon nichts? Ist das Produkt wirklich verfügbar? Es gibt ein Problem bei der Erkennung.

Mit der Content Indexing API, die gerade die ursprüngliche Testphase abgeschlossen hat, können Sie URLs und Metadaten für offline verfügbare Inhalte hinzufügen. Anhand dieser Metadaten werden die Inhalte dann den Nutzern präsentiert, was die Auffindbarkeit verbessert.

Rufen Sie index.add() in der Service Worker-Registrierung auf und geben Sie die erforderlichen Metadaten zum Inhalt an, um dem Index Inhalte 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 steht? 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 findest du unter Offline-fähige Seiten mit der Content Index API indexieren.

Wake Lock API

Wakelock-Implementierung auf der Betty Crocker-Website.

Ich koche gerne, finde es aber total frustrierend, ein Rezept nachzukochen, und der Bildschirmschoner wird aktiviert! Mit der Wakelock API, die in Chrome 84 aus der ursprünglichen Testphase herauskommt, können Websites einen Wakelock anfordern, um zu verhindern, dass das Display gedimmt und gesperrt wird.

Tatsächlich verwendet die Website von Betty Crocker das bereits heute und veröffentlichte eine Fallstudie auf web.dev, die zeigt, dass die Indikatoren für die Kaufabsicht um 300 % gestiegen sind.

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


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

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

Natürlich gibt es noch ein bisschen mehr zu bieten. Sieh dir mit der Screen Wake Lock API wach bleiben an, aber zumindest mein Bildschirm ist nicht mehr mit Mehl bedeckt.

Ursprungstests

Es gibt zwei neue Tests für die Herkunft, die ich hervorheben möchte. Wenn Sie mit Ursprungstests noch nicht vertraut sind, lesen Sie den Artikel Erste Schritte mit Ursprungstests von Chrome.

Inaktivitätserkennung

Die Idle Detection API benachrichtigt Sie, wenn ein Nutzer inaktiv ist, und gibt an, dass er möglicherweise nicht mehr an seinem Computer ist. Dies ist ideal für Chatanwendungen oder Websites von sozialen Netzwerken, um Nutzern mitzuteilen, ob ihre Kontakte verfügbar sind oder nicht.

// 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 noch heute damit experimentieren können, finden Sie unter Inaktive Nutzer mit der Idle Detection API erkennen.

Web Assembly SIMD

Und Web Assembly SIMD startet einen Ursprungstest. Dabei werden Vorgänge eingeführt, die den gängigen SIMD-Anweisungen in der Hardware entsprechen. SIMD-Vorgänge werden zur Verbesserung der Leistung verwendet, insbesondere in Multimediaanwendungen.

Weitere Informationen zu WebAssembly SIMD finden Sie unter Schnelle, parallele Anwendungen mit WebAssembly SIMD.

Und vieles mehr

Chrome 84 ist umfangreich, aber es gibt noch ein paar andere wichtige Updates, die ich hervorheben möchte.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. 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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage und brauche noch einen Haarschnitt, aber sobald Chrome 85 veröffentlicht wird, erzähle ich dir gleich, was es bei Chrome Neues gibt.