Nieuw in Chroom 80

Piet LePage

Chrome 80 wordt nu uitgerold en er zitten een heleboel nieuwe dingen in voor ontwikkelaars!

Er is ondersteuning voor:

Ik ben Pete LePage , laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 80!

Modulewerkers

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

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

Door over te stappen op JavaScript-modules is ook het gebruik van dynamische import mogelijk voor het lazyloaden van code, zonder de uitvoering van de worker te blokkeren. Bekijk Jasons bericht Threading the web with moduleworkers op web.dev voor meer details.

Optionele kettingschakeling

Het proberen om diep geneste eigenschappen in een object te lezen kan foutgevoelig zijn, vooral als de kans bestaat 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, verandert gemakkelijk 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 optionele chaining . Als een van de eigenschappen met optionele ketening een nul of ongedefinieerd retourneert, in plaats van een fout te genereren, retourneert het hele ding eenvoudigweg ongedefinieerd.

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

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

Oorsprong proefafstudeerders

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

Periodieke achtergrondsynchronisatie

Ten eerste is er periodieke achtergrondsynchronisatie , deze synchroniseert periodiek gegevens op de achtergrond, zodat wanneer een gebruiker uw geïnstalleerde PWA opent, deze altijd over de nieuwste gegevens beschikt.

Contactkiezer

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

Het stelt gebruikers in staat alleen te delen wat ze willen, wanneer ze maar willen, en maakt het gemakkelijker voor gebruikers om hun vrienden en familie te bereiken en ermee in contact te komen.

En tot slot kunt u met de methode Get Installed Related Apps (Geïnstalleerde gerelateerde apps ophalen) uw webapp controleren of uw native app op het apparaat van een gebruiker is geïnstalleerd.

Een van de meest voorkomende gebruiksscenario's is het beslissen of u de installatie van uw PWA wilt promoten als uw systeemeigen app niet is geïnstalleerd. Of misschien wilt u bepaalde functionaliteit van de ene app uitschakelen als deze door de andere app wordt geleverd.

Nieuwe oorsprongsproeven

API voor inhoudsindexering

Hoe laat u gebruikers weten welke inhoud u in uw PWA heeft opgeslagen? Er is hier sprake van een ontdekkingsprobleem. Zullen ze weten dat ze uw app moeten openen? Of welke inhoud is beschikbaar?

De Content Indexing API is een nieuwe origin-proefversie waarmee u URL's en metagegevens van offline-compatibele inhoud kunt toevoegen aan een lokale index, die door de browser wordt bijgehouden en gemakkelijk zichtbaar is 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 servicemedewerker ophalen, vervolgens index.add aanroepen en metagegevens over de inhoud opgeven.

Zodra de index is ingevuld, wordt deze weergegeven in een speciaal gebied op de downloadpagina van Chrome voor Android. Bekijk het bericht van Jeff Indexing your offline-compatibele pagina's met de Content Indexing API op web.dev voor volledige details.

Meldingstriggers

Meldingen zijn een cruciaal onderdeel van veel apps. Maar pushmeldingen zijn slechts zo betrouwbaar als het netwerk waarmee u bent verbonden. Hoewel dat in de meeste gevallen werkt, gaat het soms kapot. Als u bijvoorbeeld geen agendaherinnering ontvangt waarin u op de hoogte wordt gesteld van een belangrijke gebeurtenis omdat u zich in de vliegtuigmodus bevindt, mist u de gebeurtenis mogelijk.

Met Notificatietriggers kunt u meldingen van tevoren plannen, zodat het besturingssysteem de melding op het juiste moment aflevert, zelfs als er geen netwerkverbinding is of als 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)
});

Als u een melding wilt plannen, roept u showNotification op bij de registratie van de servicemedewerker. Voeg in de meldingsopties een eigenschap showTrigger toe met een TimestampTrigger . Wanneer de tijd daar is, toont de browser de melding.

De origin-proefperiode loopt naar verwachting via Chrome 83, dus bekijk Tom's Notification Triggers- post op web.dev voor volledige details.

Andere oorsprongsproeven

Er zijn nog een paar andere origin-proefversies die beginnen in Chrome 80:

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

Rekening voor een volledige lijst met functies in de origin-proefversie.

En meer

Natuurlijk is er nog veel meer!

  • Je kunt nu rechtstreeks naar tekstfragmenten op een pagina linken door #:~:text=something te gebruiken. Chrome scrollt 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.
  • En Chrome ondersteunt nu het gebruik van SVG-afbeeldingen als favicons.

Verder lezen

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

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 zodra Chrome 81 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!