Nieuw in Chrome 93

Pete LePage

U moet het volgende weten:

  • Je kunt nu CSS-stijlbladen laden met import-instructies, net als JavaScript-modules.
  • Geïnstalleerde PWA's kunnen zich registreren als URL-handlers, zodat gebruikers rechtstreeks naar je PWA kunnen gaan.
  • De Multi-Screen Window Placement API is geüpdatet op basis van je feedback en start een 2e origin-proefperiode.
  • De PWA Summit vindt plaats op 6 en 7 oktober.
  • En er is nog veel meer.

Ik ben Pete LePage. Ik werk en film vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 93.

Css-modulescripts

Je kunt nu CSS-stylesheets laden met import-instructies, net als JavaScript-modules. De stylesheets kunnen dan op dezelfde manier als constructable stylesheets worden toegepast op het document of de shadow roots.

De nieuwe functie CSS-modulescripts is ideaal voor aangepaste elementen. En in tegenstelling tot andere manieren om CSS toe te passen vanuit JavaScript, hoef je geen elementen te maken of te rommelen met JavaScript-tekenreeksen van CSS-tekst.

Als u deze wilt gebruiken, importeert u de stylesheet met assert {type: 'css'} en past u deze toe op de document of shadowRoot door adoptedStyleSheets aan te roepen.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Maar let op: als je de assert weglaat, wordt het bestand behandeld als JavaScript en werkt het niet.

Ga naar CSS-modulescripts gebruiken om stylesheets te importeren op web.dev voor alle informatie.

Multi-Screen Window Placement API

Voor sommige apps is het openen van nieuwe vensters en deze op specifieke plaatsen of specifieke schermen zetten een belangrijke functie. Als ik bijvoorbeeld Presentaties gebruik om te presenteren, wil ik dat de dia's op volledig scherm worden weergegeven op het primaire scherm en dat mijn sprekernotities op het andere scherm worden weergegeven.

Met de Multi-Screen Window Placement API kun je de schermen die zijn verbonden met het apparaat van de gebruiker opsommen en vensters op specifieke schermen plaatsen. Dit is de 2e origin trial en we hebben een aantal wijzigingen aangebracht op basis van je feedback.

Je kunt snel checken of er meer dan één scherm op het apparaat is aangesloten:

const isExtended = window.screen.isExtended;
// returns true/false

De belangrijkste functionaliteit bevindt zich in window.getScreens(), die alle informatie over de aangesloten schermen biedt.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Je kunt bijvoorbeeld het primaire scherm bepalen en dan requestFullscreen() gebruiken om een element op dat scherm te tonen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

En de API biedt een manier om te luisteren naar wijzigingen, bijvoorbeeld als een nieuw scherm wordt aangesloten of verwijderd.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Lees het artikel van Tom Managing several displays with the Multi-Screen Window Placement API op web.dev voor meer informatie.

Kortere releasecyclus

In maart hebben we onze plannen aangekondigd om de releasecyclus te verkorten en elke 4 weken een nieuwe versie van Chrome te leveren.

Dat moment is nu aangebroken en we leveren Chrome 94 op 21 september. Je vindt de geplande releasedatums voor elke versie in de Chrome-agenda.

Nieuwe PWA-functies

Als je een progressive web-app maakt, zijn er 2 nieuwe origin trials die de moeite waard zijn om te checken.

URL-handlers voor PWA's

Als je een PWA hebt geïnstalleerd en je op een link naar die PWA klikt, wil je waarschijnlijk dat deze wordt geopend in de PWA en niet in een browsertabblad.

Door url_handlers in te voeren in je web-app-manifest en een web-app-origin-association-bestand toe te voegen aan je .well-known/-directory, kun je de browser laten weten dat als een gebruiker op een link naar je PWA klikt, deze moet worden geopend in de geïnstalleerde PWA.

Voorbeeld van url_handlers in het bestand manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Voorbeeld van een web-app-origin-association-bestand:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Met een beetje extra verificatie kun je je PWA zelfs links laten verwerken van andere bronnen waarvan je de eigenaar bent.

Alle details over de origin trial vind je in PWA's als URL-handlers op web.dev.

Overlay voor bedieningselementen voor vensters

De overlay voor bedieningselementen voor vensters breidt het clientgebied uit zodat het hele venster wordt bedekt, inclusief de titelbalk en de knoppen voor vensterbeheer, zoals de knoppen voor sluiten, maximaliseren en minimaliseren.

Je kunt deze functie gebruiken om je geïnstalleerde PWA meer op andere geïnstalleerde apps te laten lijken.

Ga naar De overlay voor bedieningselementen voor vensters van de titelbalk van je PWA aanpassen voor meer informatie over de origin trial.

PWA Summit

In oktober vindt de PWA Summit plaats. Het is een kosteloze online conferentie die is bedoeld om iedereen te helpen succes te behalen met Progressive Web Apps. De PWA Summit is een samenwerking tussen mensen van een handvol verschillende bedrijven die betrokken zijn bij de ontwikkeling van PWA-technologieën: Google, Intel, Microsoft en Samsung.

Er zijn veel geweldige gesprekken en content. Je vindt meer informatie en kunt je registreren op PWASummit.org.

En meer

Er is natuurlijk nog veel meer.

  • Flexbox en flexbox-items hebben ondersteuning toegevoegd voor de uitlijningszoekwoorden: start, end, self-start, self-end, left en right.
  • De asynchrone klembord-API ondersteunt nu svg-bestanden.
  • Het kenmerk media wordt gerespecteerd als je meta theme-color instelt, zodat je verschillende themakleuren kunt opgeven voor de lichte en donkere modus.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Aanvullende informatie

Dit zijn maar een paar van de belangrijkste hoogtepunten. Check de links hieronder voor aanvullende wijzigingen in Chrome 93.

Abonneren

Abonneer je op het YouTube-kanaal van Chrome Developers om op de hoogte te blijven. Je krijgt dan een e-mailmelding als we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 94 wordt uitgebracht, ben ik er om je te vertellen wat er nieuw is in Chrome.