Novità di Chrome 93

Pete LePage

Ecco cosa devi sapere:

  • Ora puoi caricare fogli di stile CSS con le istruzioni import, proprio come i moduli JavaScript.
  • Le PWA installate possono registrarsi come gestori di URL, consentendo agli utenti di accedere direttamente alla tua PWA.
  • L'API Multi-Screen Window Placement è stata aggiornata in base al tuo feedback e inizia una seconda prova dell'origine.
  • Il PWA Summit si terrà il 6 e il 7 ottobre.
  • E c'è molto altro.

Sono Pete LePage, lavoro e registro da casa. Vediamo subito le novità per gli sviluppatori in Chrome 93.

Script dei moduli CSS

Ora puoi caricare fogli di stile CSS con istruzioni import, proprio come i moduli JavaScript. I fogli di stile possono quindi essere applicati al documento o alle shadow root nello stesso modo dei fogli di stile costruibili.

La nuova funzionalità degli script dei moduli CSS è ideale per gli elementi personalizzati. Inoltre, a differenza di altri modi di applicare il CSS da JavaScript, non è necessario creare elementi o modificare stringhe JavaScript di testo CSS.

Per utilizzarlo, importa il foglio di stile con assert {type: 'css'}, quindi applicalo a document o shadowRoot chiamando adoptedStyleSheets.

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

Tuttavia, tieni presente che se ometti assert, il file verrà trattato come JavaScript e non funzionerà.

Per informazioni dettagliate, consulta Utilizzo degli script dei moduli CSS per importare i fogli di stile su web.dev.

API Multi-Screen Window Placement

Per alcune app, l'apertura di nuove finestre e il loro posizionamento in luoghi o display specifici è una funzionalità importante. Ad esempio, quando utilizzo Presentazioni per una presentazione, voglio che le slide vengano visualizzate a schermo intero sul display principale e che le note del relatore vengano visualizzate sull'altro display.

L'API Multi-Screen Window Placement consente di enumerare i display collegati al computer degli utenti e di posizionare le finestre su schermi specifici. Questo è il secondo origin trial e abbiamo apportato una serie di modifiche in base al tuo feedback.

Puoi verificare rapidamente se al dispositivo è collegato più di uno schermo:

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

Tuttavia, la funzionalità principale si trova in window.getScreens(), che fornisce tutti i dettagli sui display collegati.

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

Ad esempio, puoi determinare lo schermo principale e poi utilizzare requestFullscreen() per visualizzare un elemento su quello schermo.

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

Inoltre, fornisce un modo per rilevare le modifiche, ad esempio se un nuovo display viene collegato o rimosso.

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;
  }
});

Per saperne di più, consulta l'articolo di Tom Gestione di più display con l'API Multi-Screen Window Placement su web.dev.

Ciclo di rilascio ridotto

A marzo abbiamo annunciato i nostri piani per abbreviare il ciclo di rilascio e lanciare una nuova versione di Chrome ogni quattro settimane.

Quel momento è arrivato e Chrome 94 verrà rilasciato il 21 settembre. Puoi trovare le date di rilascio pianificate per ogni versione nel calendario di Chrome.

Nuove funzionalità delle PWA

Se stai creando un'app web progressiva, vale la pena dare un'occhiata a due nuove prove dell'origine.

Gestori di URL per le PWA

Se hai installato una PWA e fai clic su un link a quella PWA, probabilmente vuoi che si apra nella PWA, non in una scheda del browser.

Specificando url_handlers nel tuo manifest dell'app web e aggiungendo un file web-app-origin-association alla directory .well-known/, puoi indicare al browser che se un utente fa clic su un link alla tua PWA, questa deve aprirsi all'interno della PWA installata.

Esempio di url_handlers nel file manifest.json:

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

File web-app-origin-association di esempio:

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

Inoltre, con un po' di verifica aggiuntiva, puoi persino fare in modo che la tua PWA gestisca i link provenienti da altre origini di tua proprietà.

Tutti i dettagli sull'origin trial sono disponibili in PWA come gestori di URL su web.dev.

Overlay dei controlli delle finestre

L'overlay dei controlli della finestra estende l'area client in modo da coprire l'intera finestra, inclusa la barra del titolo e i pulsanti di controllo della finestra, come i pulsanti di chiusura, ingrandimento e riduzione a icona.

Puoi utilizzare questa funzionalità per fare in modo che la PWA installata assomigli di più alle altre app installate.

Per saperne di più sull'origin trial, consulta Personalizza l'overlay dei controlli delle finestre della barra del titolo della PWA.

PWA Summit

Il PWA Summit si terrà a ottobre. Si tratta di una conferenza online senza costi incentrata sull'aiutare tutti a ottenere risultati positivi con le app web progressive. Il PWA Summit è una collaborazione tra persone di diverse aziende coinvolte nella creazione di tecnologie PWA: Google, Intel, Microsoft e Samsung.

Ci sono tantissimi contenuti e interventi interessanti. Puoi scoprire di più e registrarti su PWASummit.org.

E tanto altro.

Ovviamente c'è molto altro.

  • Flexbox e gli elementi flexbox hanno aggiunto il supporto per le parole chiave di allineamento: start, end, self-start, self-end, left e right.
  • L'API Async Clipboard ora supporta i file SVG.
  • Inoltre, l'attributo media verrà rispettato quando imposti meta theme-color, così puoi specificare colori del tema diversi per le modalità Luce e Buio.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

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

Per approfondire

Questi sono solo alcuni dei punti salienti. Consulta i link di seguito per ulteriori modifiche in Chrome 93.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 94, sarò qui per raccontarti le novità di Chrome.