Nieuw in Chrome 84

Piet LePage

Chrome 84 begint nu stabiel te worden.

Dit is wat u moet weten:

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

Snelkoppelingen naar app-pictogrammen

App-pictogramsnelkoppelingen voor Twitter's PWA

Met app-pictogramsnelkoppelingen kunnen gebruikers eenvoudig algemene taken binnen uw app snel starten. Stel bijvoorbeeld een nieuwe tweet op, stuur een bericht of bekijk hun meldingen. Ze worden ondersteund in Chrome voor Android.

Deze snelkoppelingen worden opgeroepen door lang op het app-pictogram op Android te drukken. Het toevoegen van een snelkoppeling aan uw PWA is eenvoudig: maak een nieuwe shortcuts in uw webapp-manifest, beschrijf de snelkoppeling en voeg uw 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 volledige details.

Webanimaties-API

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

  • animation.ready en animation.finished zijn beloofd.
  • De browser kan nu oude animaties opschonen en verwijderen, waardoor geheugen wordt bespaard en de prestaties worden verbeterd.
  • En je kunt nu animaties combineren met behulp van samengestelde modi - met de opties voor add en accumulate .

Ik kan simpelweg geen recht doen aan alle verbeteringen en ook geen goede voorbeelden geven, dus bekijk de Web Animations API-verbeteringen in Chromium 84 voor volledige details.

API voor inhoudsindexering

Als uw inhoud beschikbaar is zonder netwerkverbinding. Maar de gebruiker weet er niets van? Is het echt beschikbaar? Er is een ontdekkingsprobleem!

Met de Content Indexing API, die net de oorspronkelijke proefperiode heeft afgerond, kunt u URL's en metagegevens toevoegen voor inhoud die offline beschikbaar is. Met behulp van die metadata wordt de inhoud vervolgens aan de gebruiker getoond, waardoor de vindbaarheid wordt verbeterd.

Als u inhoud aan de index wilt toevoegen, roept u index.add() aan bij de registratie van de servicemedewerker 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',
  }],
});

Wilt u zien wat er al in uw index staat? Roep index.getAll() aan voor de registratie van servicemedewerkers.

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 volledige details.

Wakelock-API

Wake lock-implementatie op de Betty Crocker-website.

Ik hou van koken, maar ik vind het super frustrerend als ik een recept volg en de schermbeveiliging in werking treedt! Met de wake lock API, die ook de oorspronkelijke proefperiode in Chrome 84 achter zich heeft gelaten, kunnen sites een wake lock aanvragen om te voorkomen dat het scherm dimt en vergrendelt.

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

Om een ​​wake lock te krijgen, roept u navigator.wakeLock.request() aan. Het retourneert een WakeLockSentinel object, dat wordt gebruikt om de wake lock te "vrijgeven".


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

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

Natuurlijk komt er nog iets meer bij kijken, dus kijk eens naar Blijf wakker met de Screen Wake Lock API , maar mijn scherm zal in ieder geval niet meer bedekt zijn met bloem!

Oorsprongsproeven

Er zijn twee nieuwe oorsprongsprocessen die ik wil noemen. Als u nog geen ervaring heeft met origin-proefversies, ga dan naar Aan de slag met de origin-proefversies van Chrome .

Inactieve detectie

De Idle Detection API waarschuwt u wanneer een gebruiker inactief is, wat aangeeft dat deze mogelijk niet achter zijn computer zit. Dit is geweldig voor zaken als chattoepassingen of sociale netwerksites, om gebruikers te laten weten of hun contacten beschikbaar zijn of niet.

// 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 origin-proef . Het introduceert bewerkingen die verwijzen naar algemeen beschikbare SIMD-instructies in hardware. SIMD-bewerkingen worden gebruikt om de prestaties te verbeteren, vooral in multimediatoepassingen.

Voor meer informatie over WebAssembly SIMD, bekijk Snelle, parallelle toepassingen met WebAssembly SIMD .

En meer

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

Verder lezen

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

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en ik heb nog steeds een knipbeurt nodig , maar zodra Chrome 85 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!