Neu in Chrome 84

Pete LePage

Chrome 84 wird jetzt in der stabilen Version 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

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 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 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 Mit App-Verknüpfungen schnell Aufgaben 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 promiskuitiv gemacht.
  • 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.

Content Indexing API

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.

Wenn Sie dem Index Inhalte hinzufügen möchten, rufen Sie index.add() für die Service Worker-Registrierung auf und geben Sie die erforderlichen Metadaten zu den Inhalten an.


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 wissen, was bereits in Ihrem Index enthalten ist? Rufe index.getAll() für die Registrierung des Dienstmitarbeiters 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 super frustrierend, wenn ich einem Rezept folge und der Bildschirmschoner aktiviert wird. Mit der Wake Lock API, die in Chrome 84 aus der ursprünglichen Testphase herauskommt, können Websites ein Wake Lock anfordern, um zu verhindern, dass das Display gedimmt und gesperrt wird.

Die Website von Betty Crocker verwendet diese Funktion bereits und hat eine Fallstudie auf web.dev veröffentlicht, in der ein Anstieg der Kaufabsichts-Indikatoren um 300 % zu sehen ist.

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 ist es etwas komplizierter. Weitere Informationen finden Sie unter Mit der Screen Wake Lock API aktiv bleiben. Aber zumindest ist mein Display jetzt nicht mehr mit Mehl bedeckt.

Ursprungstests

Es gibt zwei neue Tests für die Herkunft, die ich hervorheben möchte. Wenn Sie noch keine Erfahrung mit Ursprungstests haben, lesen Sie den Hilfeartikel Einstieg in die Ursprungstests von Chrome.

Inaktivitätserkennung

Die API zur Inaktivitätserkennung benachrichtigt Sie, wenn ein Nutzer inaktiv ist, was darauf hindeutet, dass er möglicherweise nicht an seinem Computer sitzt. Das ist beispielsweise in Chat-Anwendungen oder in sozialen Netzwerken nützlich, um Nutzer darüber zu informieren, 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 sie sofort ausprobieren können, finden Sie unter Inaktive Nutzer mit der Idle Detection API erkennen.

Web Assembly SIMD

Für Web Assembly SIMD wird ein Ursprungstest gestartet. Es führt Operationen ein, die auf gängige SIMD-Anweisungen in der Hardware abgebildet werden. SIMD-Vorgänge werden verwendet, um die Leistung zu verbessern, insbesondere bei Multimediaanwendungen.

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

Und vieles mehr

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

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Ä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. Sobald Chrome 85 veröffentlicht wird, erzähle ich Ihnen hier, was es in Chrome Neues gibt.