Nieuw in Chroom 80

Pete LePage

Chrome 80 wordt nu uitgerold en bevat een hoop nieuwigheden voor ontwikkelaars!

Er is ondersteuning voor:

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 80!

Modulewerkers

Module Workers, een nieuwe modus voor webworkers – met de ergonomie en prestatievoordelen van JavaScript-modules – is nu beschikbaar. De Worker-constructor accepteert een nieuwe {type: "module"} optie, die de manier waarop scripts worden geladen en uitgevoerd, aanpast aan <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Door over te stappen op JavaScript-modules, wordt ook dynamische import voor lazy-loading code mogelijk, zonder de uitvoering van de worker te blokkeren. Bekijk Jasons bericht Threading the web with module workers op web.dev voor meer informatie.

Optionele ketting

Het lezen van diep geneste eigenschappen in een object kan foutgevoelig zijn, vooral als er een kans is dat iets niet wordt geëvalueerd.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Het controleren van elke waarde voordat u verdergaat, resulteert al snel in een diep geneste if instructie of vereist een try / catch -blok.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 voegt ondersteuning toe voor een nieuwe JavaScript-functie genaamd optional chaining . Met optional chaining retourneert het geheel, als een van de eigenschappen een null of undefined retourneert, in plaats van een fout te genereren, simpelweg undefined.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Bekijk de blogpost Optional Chaining op de v8-blog voor alle details!

Afstudeerproeven van de oorsprong

Er zijn drie nieuwe mogelijkheden die van Origin Trial naar stable zijn doorontwikkeld, waardoor ze door elke site gebruikt kunnen worden, zonder token.

Periodieke achtergrondsynchronisatie

De eerste is de periodieke achtergrondsynchronisatie . Hiermee worden gegevens op gezette tijden op de achtergrond gesynchroniseerd, zodat gebruikers altijd over de meest recente gegevens beschikken wanneer ze uw geïnstalleerde PWA openen.

Contactkiezer

Vervolgens is er de Contact Picker API , een on-demand API waarmee gebruikers items uit hun contactenlijst kunnen selecteren en beperkte details van de geselecteerde items met een website kunnen delen.

Hierdoor kunnen gebruikers alleen delen wat ze willen, wanneer ze dat willen. Ook kunnen ze zo makkelijker contact maken met hun vrienden en familie.

En tot slot kunt u met de methode Gerelateerde apps installeren controleren of uw native app is geïnstalleerd op het apparaat van een gebruiker.

Een van de meest voorkomende toepassingen is om te beslissen of je de installatie van je PWA wilt promoten als je native app niet is geïnstalleerd. Of misschien wil je bepaalde functionaliteit van een app uitschakelen als die door de andere app wordt aangeboden.

Nieuwe oorsprongsproeven

API voor inhoudsindexering

Hoe laat je gebruikers weten welke content je in je PWA hebt gecached? Er is hier een probleem met de detectie. Weten ze dat ze je app moeten openen? Of welke content beschikbaar is?

De Content Indexing API is een nieuwe proefversie waarmee u URL's en metagegevens van offline-geschikte inhoud kunt toevoegen aan een lokale index. Deze wordt beheerd door de browser en is eenvoudig zichtbaar voor de gebruiker.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Om iets aan de index toe te voegen, moet ik de registratie van de service worker ophalen, vervolgens index.add aanroepen en metagegevens over de inhoud opgeven.

Zodra de index is gevuld, wordt deze weergegeven in een speciaal gedeelte van de downloadpagina van Chrome voor Android. Lees Jeffs bericht 'Indexing your offline-capable pages with the Content Indexing API' op web.dev voor meer informatie.

Meldingstriggers

Meldingen zijn een cruciaal onderdeel van veel apps. Maar pushmeldingen zijn slechts zo betrouwbaar als het netwerk waarmee je verbonden bent. Hoewel dat in de meeste gevallen werkt, werkt het soms niet. Als een agenda-herinnering die je op de hoogte stelt van een belangrijke gebeurtenis bijvoorbeeld niet doorkomt omdat je de vliegtuigmodus gebruikt, mis je de gebeurtenis mogelijk.

Met Meldingstriggers kunt u meldingen van tevoren plannen, zodat het besturingssysteem de melding op het juiste moment levert, zelfs als er geen netwerkverbinding is of het apparaat in de batterijbesparingsmodus staat.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Om een ​​melding te plannen, roept u showNotification aan bij de registratie van de service worker. Voeg in de meldingsopties een eigenschap showTrigger toe met een TimestampTrigger . Zodra het tijdstip is bereikt, toont de browser de melding.

De oorspronkelijke proefperiode zal naar verwachting worden uitgevoerd via Chrome 83. Bekijk daarom Toms bericht over meldingstriggers op web.dev voor meer informatie.

Andere oorsprongsproeven

Er zijn nog een paar andere oorsprongsproeven die in Chrome 80 beginnen:

  • Webserie
  • De mogelijkheid voor PWA's om zich te registreren als bestandsbehandelaars
  • Nieuwe eigenschappen voor de contactkiezer

Rekening voor een complete lijst met functies in de oorspronkelijke proefversie.

En meer

Er is uiteraard nog veel meer!

  • Je kunt nu rechtstreeks linken naar tekstfragmenten op een pagina met behulp van #:~:text=something . Chrome scrollt dan naar het eerste exemplaar van dat tekstfragment en markeert het. Bijvoorbeeld: https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • display: minimal-ui op een Desktop PWA voegt een terug- en herlaadknop toe aan de titelbalk van de geïnstalleerde PWA.
  • Chrome ondersteunt nu ook het gebruik van SVG-afbeeldingen als favicons.

Verder lezen

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

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 zodra Chrome 81 uitkomt, vertel ik u wat er nieuw is in Chrome!