Neu in Chrome 84

Pete LePage

Die stabile Version von Chrome 84 wird nach und nach eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus und lasse uns ansehen, was es für Entwickler bei Chrome 84 Neues gibt.

Verknüpfungen für App-Symbole

App-Symbol-Verknüpfungen für die PWA von Twitter

Über Verknüpfungen für App-Symbole können Nutzer häufige Aufgaben in deiner App schnell starten. Beispielsweise kannst du einen neuen Tweet verfassen, eine Nachricht senden oder ihre Benachrichtigungen ansehen. Sie werden in Chrome für Android unterstützt.

Diese Tastenkombinationen werden durch langes Drücken des App-Symbols auf Android aufgerufen. Das Hinzufügen einer Verknüpfung zu Ihrer PWA ist einfach. Erstellen Sie in Ihrem Web-App-Manifest eine neue shortcuts-Eigenschaft, 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 finden Sie unter Aufgaben mit App-Verknüpfungen schnell erledigen.

Web Animations API

In Chrome 84 wird die Web Animations API um eine Reihe zuvor nicht unterstützter Funktionen erweitert.

  • animation.ready und animation.finished wurden versprochen.
  • Der Browser kann jetzt alte Animationen bereinigen und entfernen, was Arbeitsspeicher spart und die Leistung verbessert.
  • Außerdem lassen sich Animationen jetzt mithilfe von zusammengesetzten Modi kombinieren – mit den Optionen add und accumulate.

Ich kann allen Verbesserungen einfach nicht gerecht werden und hier auch keine guten Beispiele nennen. Ausführliche Informationen dazu findest du unter Web Animations API-Verbesserungen in Chromium 84.

API zur Contentindexierung

Ob Ihre Inhalte ohne Netzwerkverbindung verfügbar sind. Aber die Nutzenden wissen nichts davon? Ist sie wirklich verfügbar? Ein Erkennungsproblem ist aufgetreten!

Mit der Contentindexierungs-API, die gerade aus der ursprünglichen Testversion stammt, kannst du URLs und Metadaten für offline verfügbare Inhalte hinzufügen. Mithilfe dieser Metadaten werden die Inhalte dann dem Nutzer angezeigt, wodurch die Auffindbarkeit verbessert wird.

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 zum Inhalt 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 sehen, was sich bereits in Ihrem Index befindet? 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 Detection API indexieren.

Wakelock-API

Wakelock-Implementierung auf der Betty Crocker-Website.

Ich koche gerne, aber ich finde es total frustrierend, einem Rezept nachzuvollziehen, und der Bildschirmschoner aktiviert. Mit der Wakelock API, die ebenfalls aus dem Ursprungstest in Chrome 84 stammt, können Websites einen Wakelock anfordern, um zu verhindern, dass der Bildschirm gedimmt und gesperrt wird.

Tatsächlich nutzt die Betty-Crocker-Website bereits heute und veröffentlichte eine Fallstudie auf web.dev, die eine Steigerung der Kaufabsicht um 300 % belegt.

Um einen Wakelock zu erhalten, rufe navigator.wakeLock.request() auf. Es wird ein WakeLockSentinel-Objekt zurückgegeben, mit dem der Wakelock „freigegeben“ wird.


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

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

Natürlich gehört noch mehr dazu. Schau dir also Mit der Screen Wake Lock API aktiv bleiben an, aber zumindest ist mein Bildschirm nicht mehr mit Mehl bedeckt!

Ursprungstests

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

Inaktivitätserkennung

Die Idle Detection API benachrichtigt Sie, wenn ein Nutzer inaktiv ist und zeigt so an, dass er möglicherweise nicht an seinem Computer ist. Dies ist ideal für Dinge wie Chat-Anwendungen oder Websites von sozialen Netzwerken, um Nutzer wissen zu lassen, 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. Es werden Vorgänge eingeführt, die allgemein verfügbaren SIMD-Anweisungen auf der Hardware entsprechen. SIMD-Vorgänge werden zur Verbesserung der Leistung insbesondere bei Multimedia-Anwendungen verwendet.

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

Und noch mehr

Chrome 84 ist umfangreich, aber es gibt noch ein paar wichtige Updates, die ich erwähnen möchte.

Weitere Informationen

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

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 brauche immer noch einen Haarschnitt. Aber sobald Chrome 85 veröffentlicht wird, melde ich mich mit einem kurzen Überblick darüber, was es bei Chrome Neues gibt.