Nieuw in Chroom 96

Piet LePage

Dit is wat u moet weten:

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

Manifest- id voor PWA's

Wanneer een gebruiker een PWA installeert, heeft de browser een manier nodig om deze op unieke wijze te identificeren. Maar tot voor kort specificeerden de manifestspecificaties van de webapp niet hoe een PWA moest worden geïdentificeerd, waardoor de keuze aan de browsers werd overgelaten, wat tot verschillende implementaties leidde. 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-ervaring te onderbreken. Nu is er een nieuwe optionele id eigenschap waarmee u expliciet de ID kunt definiëren die voor uw PWA wordt gebruikt.

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

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

Ondersteuning voor de id eigenschap komt beschikbaar in desktop-Chromium-gebaseerde browsers vanaf Chrome 96. Ondersteuning voor mobiel, die momenteel de manifest-URL als de unieke ID gebruikt, zou in de eerste helft van 2022 moeten verschijnen.

DevTools toont de berekende app-ID

Als u al een PWA in productie heeft en een id aan uw manifest wilt toevoegen, moet u de ID gebruiken die door de browser is toegewezen. U kunt de id vinden in het paneel Manifest van het paneel Toepassing in Dev Tools.

Voor een geheel nieuwe PWA kun je de id instellen op elke gewenste tekenreekswaarde, maar onthoud dat je deze in de toekomst niet meer kunt wijzigen, dus kies verstandig.

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

Bekijk Uniek identificeren van PWA's met de eigenschap manifest-ID 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: -voorvoegsel klikt, wordt Gmail geopend, waardoor de gebruiker gemakkelijk een e-mail kan verzenden.

Vanaf Chrome 96 kan een PWA zich tijdens de installatie registreren als protocolhandler. Om dat voor uw PWA te doen, voegt u de eigenschap protocol_handlers toe aan uw web-app-manifest, geeft u het protocol op 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 zijn hier enkele beperkingen en u kunt niet zomaar elk protocol registreren. Bekijk dus de URL-protocolhandlerregistratie voor PWA's voor volledige details en hoe u de web+ -syntaxis kunt gebruiken om uw eigen protocollen te maken!

Prioriteitstips (originele proef)

Wanneer een browser een webpagina parseert en bronnen zoals afbeeldingen, scripts of CSS begint te ontdekken en downloaden, wijst deze een ophaalprioriteit toe om te proberen het laden van de pagina te optimaliseren. Browsers zijn redelijk goed in het toekennen van prioriteiten, maar zijn mogelijk niet in alle gevallen optimaal.

Priority Hints zijn een experimentele functie, beschikbaar als origin-proefversie vanaf Chrome 96, en kunnen helpen de Core Web Vitals te optimaliseren. Met het importance kunt u de prioriteit opgeven voor brontypen 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>

Dit is bijvoorbeeld de Google Flights-pagina. Die achtergrondafbeelding is de grootste contentful paint (LCP).

Screenshot van Google Flights met grote achtergrondafbeelding

Laten we eens kijken of het geladen is met en zonder prioriteitshints. Als de prioriteit voor het achtergrondbeeld high is ingesteld, daalt het LCP van 2,6 seconden naar 1,9 seconden.

Bekijk Optimaliseren van het laden van bronnen met de Fetch Priority API voor alle details, hoe u zich kunt registreren voor de origin-proefversie en enkele geweldige voorbeelden van hoe dit kan helpen uw weergaveprestaties te verbeteren.

Emuleer Chrome 100 in de UA-reeks

Begin volgend jaar bereiken we Chrome 100, een driecijferig versienummer. Elke code die versienummers controleert of de UA-reeks 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 die het huidige versienummer wijzigt in 100, zodat u ervoor kunt zorgen dat alles werkt zoals verwacht.

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

Zie de hoofdversie van Chrome forceren naar 100 in de User-Agent-reeks voor meer informatie.

Chrome Dev Summit

Chrome Dev Summit is een feit. Alle video's en inhoud zijn online beschikbaar. Bekijk de Chrome Dev Summit-site , of als je de keynote of livestream hebt gemist, bekijk dan de CDS-afspeellijst op het Chrome Developers YouTube-kanaal .

En meer!

Natuurlijk is er nog veel meer.

  • De Back, forward cache – of bfcache – is nu beschikbaar in stable en brengt Chrome in lijn met zowel Firefox als Safari.

Verder lezen

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

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 97 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!