Nieuw in Chroom 96

Pete LePage

Dit is wat u moet weten:

Ik ben Pete LePage en ik ben eindelijk aan het filmen in de studio . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 96.

Manifest id voor PWA's

Wanneer een gebruiker een PWA installeert, moet de browser deze op een unieke manier kunnen identificeren. Maar tot voor kort specificeerde de manifestspecificatie van de webapp niet hoe een PWA moest worden geïdentificeerd. Dit liet browsers zelf beslissen, wat leidde tot verschillende implementaties. In sommige browsers wordt de start_url gebruikt, terwijl in andere het pad naar het manifestbestand wordt gebruikt.

Dat maakt het onmogelijk om een ​​van deze velden te wijzigen zonder de installatie te verstoren. Er is nu een nieuwe, optionele id eigenschap waarmee je expliciet de id kunt definiëren die voor je PWA wordt gebruikt.

Door de id eigenschap aan het manifest toe te voegen, wordt de afhankelijkheid van de start_url of de locatie van het manifest verwijderd en kunnen deze velden worden bijgewerkt.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Ondersteuning voor de id eigenschap is beschikbaar in Chromium-desktopbrowsers vanaf Chrome 96. Ondersteuning voor mobiele apparaten, die momenteel de manifest-URL als unieke ID gebruiken, zou in de eerste helft van 2022 beschikbaar moeten zijn.

DevTools toont berekende app-ID

Als je al een PWA in productie hebt en een id aan je manifest wilt toevoegen, moet je de ID gebruiken die door de browser is toegewezen. Je vindt de id in het deelvenster Manifest van het paneel Applicatie in Dev Tools.

Voor een geheel nieuwe PWA kunt u de id instellen op elke gewenste tekenreekswaarde. Houd er echter rekening mee dat u deze later niet meer kunt wijzigen, dus kies verstandig.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Zie PWA's uniek identificeren met de manifest-id-eigenschap van de web-app voor meer informatie.

URL-protocolhandlers voor PWA's

Webapps kunnen navigator.registerProtocolHandler() gebruiken om zich te registreren als protocolhandler. Gmail kan bijvoorbeeld het mailto protocol registreren. Wanneer een gebruiker vervolgens op een link met het mailto: klikt, wordt Gmail geopend, waardoor het voor de gebruiker gemakkelijk is om een ​​e-mail te versturen.

Vanaf Chrome 96 kan een PWA zich registreren als protocolhandler tijdens de installatie. Om dit voor uw PWA te doen, voegt u de eigenschap protocol_handlers toe aan uw webapp-manifest, specificeert u het protocol dat u wilt verwerken en de url die moet worden geopend wanneer erop wordt geklikt.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Er gelden hier wel enkele beperkingen en u kunt niet zomaar elk protocol registreren. Bekijk daarom de URL-protocolhandlerregistratie voor PWA's voor alle details en hoe u de web+ -syntaxis kunt gebruiken om uw eigen protocollen te maken!

Prioriteitsaanwijzingen (oorspronkelijke proef)

Wanneer een browser een webpagina parseert en bronnen zoals afbeeldingen, scripts of CSS begint te detecteren en te downloaden, wijst hij hieraan een ophaalprioriteit toe om de paginalaadtijd te optimaliseren. Browsers zijn redelijk goed in het toewijzen van prioriteiten, maar zijn mogelijk niet in alle gevallen optimaal.

Prioriteithints zijn een experimentele functie, beschikbaar als proefversie vanaf Chrome 96, en kunnen helpen bij het optimaliseren van Core Web Vitals. Met het kenmerk importance kunt u de prioriteit opgeven voor resourcetypen zoals CSS, lettertypen, scripts, afbeeldingen en iframes.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Neem bijvoorbeeld de pagina van Google Flights. Die achtergrondafbeelding is de grootste contentful paint (LCP).

Schermafbeelding van Google Flights met grote achtergrondafbeelding

Laten we het eens bekijken, geladen met en zonder prioriteitsaanwijzingen. Met de prioriteit op de achtergrondafbeelding op high ingesteld, daalt de LCP van 2,6 seconden naar 1,9 seconden.

Bekijk Optimaliseren van resourcelading met de Fetch Priority API voor alle details, hoe u zich kunt registreren voor de origin trial en enkele geweldige voorbeelden van hoe u hiermee uw renderingprestaties kunt verbeteren.

Emuleer Chrome 100 in de UA-string

Begin volgend jaar bereiken we Chrome 100, een versienummer met drie cijfers. Elke code die versienummers controleert of de UA-string parseert, moet worden gecontroleerd om er zeker van te zijn dat deze drie cijfers verwerkt.

Vanaf Chrome 96 is er een nieuwe vlag #force-major-version-to-100 waarmee het huidige versienummer wordt gewijzigd naar 100. Zo kunt u controleren of alles werkt zoals verwacht.

Chrome Flags-pagina met de nieuwe optie #force-major-version-to-100

Zie Forceer Chrome's hoofdversie naar 100 in de User-Agent-tekenreeks voor meer informatie.

Chrome Dev Summit

De Chrome Dev Summit zit erop. Alle video's en content zijn online beschikbaar. Bekijk de website van Chrome Dev Summit , of als je de keynote of livestream hebt gemist, bekijk dan de CDS-afspeellijst op het Chrome Developers YouTube-kanaal .

En nog veel meer!

Er is natuurlijk nog veel meer.

  • De Back, forward cache (of bfcache ) is nu beschikbaar in stable en brengt Chrome op één lijn met Firefox en Safari.

Verder lezen

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

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 97 uitkomt, vertel ik u graag wat er nieuw is in Chrome!