Nieuw in Chrome 84

Pete LePage

Chrome 84 wordt nu uitgerold naar stabiele versies.

Dit is wat u moet weten:

Ik ben Pete LePage en ik werk en fotografeer vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 84!

Snelkoppelingen naar app-pictogrammen

App-pictogramsnelkoppelingen voor Twitter's PWA

Met snelkoppelingen naar app-pictogrammen kunnen gebruikers snel veelvoorkomende taken in je app starten. Bijvoorbeeld een nieuwe tweet schrijven, een bericht versturen of hun meldingen bekijken. Ze worden ondersteund in Chrome voor Android.

Deze snelkoppelingen worden aangeroepen door lang op het app-pictogram op Android te drukken. Het toevoegen van een snelkoppeling aan je PWA is eenvoudig: maak een nieuwe shortcuts aan in je webappmanifest, beschrijf de snelkoppeling en voeg je pictogrammen toe. 


"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" }
    ]
  },
]

Bekijk Dingen snel gedaan krijgen met app-snelkoppelingen voor alle details.

API voor webanimaties

Chrome 84 voegt een aantal voorheen niet-ondersteunde functies toe aan de Web Animations API.

  • animation.ready en animation.finished zijn beloofd.
  • De browser kan nu oude animaties opruimen en verwijderen, waardoor geheugen wordt bespaard en de prestaties verbeteren.
  • En u kunt nu animaties combineren met behulp van samengestelde modi, met de opties add en accumulate .

Ik kan hier niet alle verbeteringen opnoemen of goede voorbeelden geven, dus bekijk de verbeteringen aan de Web Animations API in Chromium 84 voor meer informatie.

API voor inhoudsindexering

Als je content beschikbaar is zonder netwerkverbinding, maar de gebruiker weet het niet? Is het dan wel echt beschikbaar? Dan is er een detectieprobleem!

Met de Content Indexing API, die net is uitgerold na de oorspronkelijke proefperiode, kun je URL's en metadata toevoegen voor content die offline beschikbaar is. Met behulp van die metadata wordt de content vervolgens aan de gebruiker getoond, wat de vindbaarheid verbetert.

Om inhoud aan de index toe te voegen, roept u index.add() aan bij de registratie van de service worker en geeft u de vereiste metagegevens over de inhoud op. 


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',
  }],
});

Wil je zien wat er al in je index staat? Roep index.getAll() aan bij de registratie van de service worker.

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.
}

Zie Uw offline pagina's indexeren met de Content Indexing API voor meer informatie.

Wakelock API

Implementatie van wakelock op de website van Betty Crocker.

Ik kook graag, maar ik vind het superfrustrerend als ik een recept volg en de screensaver inschakelt! Met de Wake Lock API, die ook al is uitgebracht na de oorspronkelijke proefperiode in Chrome 84, kunnen sites een Wake Lock aanvragen om te voorkomen dat het scherm dimt en vergrendelt.

De website van Betty Crocker maakt hier nu al gebruik van en publiceerde een casestudy op web.dev waaruit blijkt dat de indicatoren voor koopintentie met 300% zijn toegenomen.

Om een ​​wakelock te verkrijgen, roept navigator.wakeLock.request() aan. Deze retourneert een WakeLockSentinel -object, dat wordt gebruikt om de wakelock "vrij te geven". 


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

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

Natuurlijk zit er nog wat meer achter, kijk bijvoorbeeld eens naar Blijf wakker met de Screen Wake Lock API , maar in ieder geval zit mijn scherm straks niet meer onder het meel!

Oorsprongsproeven

Er zijn twee nieuwe oorsprongstests die ik wil noemen. Als je nog niet bekend bent met oorsprongstests, lees dan Aan de slag met de oorsprongstests van Chrome .

Detectie van inactiviteit

De Idle Detection API waarschuwt u wanneer een gebruiker inactief is, wat aangeeft dat hij of zij mogelijk niet achter de computer zit. Dit is handig voor bijvoorbeeld chattoepassingen of sociale netwerksites, om gebruikers te laten weten of hun contactpersonen beschikbaar zijn.

// 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,
});

Zie Inactieve gebruikers detecteren met de Idle Detection API voor meer informatie over de API en hoe u er vandaag nog mee kunt experimenteren.

Webassemblage SIMD

En Web Assembly SIMD start een proefperiode . Het introduceert bewerkingen die verwijzen naar algemeen beschikbare SIMD-instructies in hardware. SIMD-bewerkingen worden gebruikt om de prestaties te verbeteren, met name in multimediatoepassingen.

Wilt u meer weten over WebAssembly SIMD? Bekijk dan Snelle, parallelle toepassingen met WebAssembly SIMD .

En meer

Chrome 84 is groot, maar er zijn nog een paar andere belangrijke updates die ik wil noemen.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 84.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en mijn haar moet nog geknipt worden, maar zodra Chrome 85 uitkomt, vertel ik je wat er nieuw is in Chrome!