Nieuw in Chroom 93

Pete LePage

Dit is wat u moet weten:

  • U kunt nu CSS-stijlpagina's laden met import statements , net als JavaScript-modules.
  • Geïnstalleerde PWA's kunnen zich registreren als URL-handlers , waardoor gebruikers direct naar uw PWA kunnen gaan.
  • De Multi-Screen Window Placement API is bijgewerkt op basis van uw feedback en start een tweede proefperiode.
  • De PWA Summit vindt plaats op 6 en 7 oktober.
  • En er is nog veel meer .

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

CSS-modulescripts

Je kunt nu CSS-stijlbladen laden met import statements, net als JavaScript-modules. De stijlbladen kunnen vervolgens op dezelfde manier als construeerbare stijlbladen worden toegepast op het document of de schaduwroots.

De nieuwe CSS Module Scripts-functie is geweldig voor aangepaste elementen. En in tegenstelling tot andere manieren om CSS vanuit JavaScript toe te passen, is het niet nodig om elementen te maken of te rommelen met JavaScript-strings of CSS-tekst.

Om het te gebruiken importeert u het stijlblad met assert {type: 'css'} en past u het toe op het 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 u de assert weglaat, wordt het bestand behandeld als JavaScript en werkt het niet!

Zie CSS-modulescripts gebruiken om stijlbladen te importeren op web.dev voor meer informatie.

API voor plaatsing van vensters op meerdere schermen

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

De Multi-Screen Window Placement API maakt het mogelijk om de schermen die op de computer van de gebruiker zijn aangesloten te inventariseren en vensters op specifieke schermen te plaatsen. Dit is de tweede proefversie en we hebben een aantal wijzigingen doorgevoerd op basis van jullie feedback.

U kunt snel controleren 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() , dat alle details over de gekoppelde beeldschermen verschaft.

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

U kunt bijvoorbeeld het primaire scherm bepalen en vervolgens requestFullscreen() gebruiken om een ​​element op dat scherm weer te geven.

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 het biedt een manier om te luisteren naar wijzigingen, bijvoorbeeld als er een nieuw beeldscherm 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 Toms artikel Managing multiple displays with the Multi-Screen Window Placement API op web.dev voor meer informatie.

Verkorte releasecyclus

In maart maakten we bekend dat we de releasecyclus willen verkorten en elke vier weken een nieuwe versie van Chrome willen uitbrengen.

Het is zover en we lanceren Chrome 94 op 21 september. De geplande releasedata voor elke versie vindt u in de Chrome-kalender .

Nieuwe PWA-functies

Als u een Progressive Web App bouwt, zijn er twee nieuwe oorsprongstestversies die het bekijken waard zijn.

URL-handlers voor PWA's

Als u een PWA hebt geïnstalleerd en u klikt op een link naar die PWA, wilt u deze waarschijnlijk openen in de PWA en niet in een browsertabblad.

Door url_handlers op te geven in het manifest van uw web-app en een bestand web-app-origin-association toe te voegen aan uw map .well-known/ , kunt u de browser vertellen dat als een gebruiker op een koppeling naar uw PWA klikt, deze moet worden geopend binnen de geïnstalleerde PWA.

Voorbeeld url_handlers in het manifest.json -bestand:

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

Voorbeeld van web-app-origin-association :

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

En met een beetje extra verificatie kunt u uw PWA zelfs links laten verwerken van andere bronnen die u beheert.

Alle details over de oorsprongsproef zijn te vinden in PWA's als URL-handlers op web.dev.

Overlay van vensterbedieningen

Met de overlay van vensterbedieningen wordt het clientgebied uitgebreid zodat het het volledige venster beslaat, inclusief de titelbalk en de knoppen voor vensterbediening, zoals de knoppen voor sluiten, maximaliseren en minimaliseren.

Met deze functie kunt u uw geïnstalleerde PWA meer laten lijken op andere geïnstalleerde apps.

Voor meer informatie over de oorspronkelijke proefversie kunt u het artikel De overlay van vensterbedieningen in de titelbalk van uw PWA aanpassen raadplegen.

PWA-top

De PWA Summit vindt plaats in oktober. Het is een gratis online conferentie die erop gericht is iedereen te helpen succesvol te zijn 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 talloze geweldige presentaties en content. Je kunt meer informatie vinden en je registreren op PWASummit.org .

En nog veel meer!

Er is natuurlijk nog veel meer.

  • Flexbox en flexbox-items bieden ondersteuning voor de volgende uitlijningssleutelwoorden: start , end , self-start , self-end , left en right .
  • De async-klembord-API ondersteunt nu SVG-bestanden.
  • Bovendien wordt het media gehonoreerd bij het instellen van meta theme-color , zodat u verschillende thema-kleuren 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">

Verder lezen

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

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