Novità di Chrome 73

Pete LePage

Twitter GitHub Glitch Mastodon Homepage

In Chrome 73 abbiamo aggiunto il supporto di:

• Creazione più semplice di contenuti portabili con standard HTTP Exchange firmati.
• Il cambiamento dinamico degli stili è molto più semplice grazie ai fogli di stile costruibili.
• Il supporto per le app web progressive sarà disponibile su Mac, con il supporto delle PWA su tutte le piattaforme desktop e mobile. In questo modo, sarà più facile creare app installabili, fornite tramite il web.

E c'è molto altro ancora.

Mi chiamo Pete LePage. Analizziamo le novità di Chrome 73 per gli sviluppatori.

Log delle modifiche

Questo articolo illustra solo alcuni dei punti salienti. Controlla i link di seguito per scoprire ulteriori modifiche in Chrome 73.

• Elenco delle modifiche al repository di origine di Chromium
• Aggiornamenti di ChromeStatus.com per Chrome 73
• Ritiri e rimozioni di Chrome 73
• Aggiornamenti per i contenuti multimediali di Chrome 73
• Novità di JavaScript in Chrome 73

Le app web progressive funzionano ovunque

Le app web progressive offrono un'esperienza installabile, simile a quella di un'app, creata e distribuita direttamente tramite il web. In Chrome 73 abbiamo aggiunto il supporto per macOS, portando il supporto per le app web progressive su tutte le piattaforme desktop (Mac, Windows, ChromeOS, Linux e per i dispositivi mobili), semplificando lo sviluppo di app web.

Un'app web progressiva è veloce e affidabile; carica e opera sempre alla stessa velocità, indipendentemente dalla connessione di rete. Offrono esperienze avanzate e coinvolgenti tramite funzionalità web moderne che sfruttano al meglio le funzionalità dei dispositivi.

Gli utenti possono installare la PWA dal menu contestuale di Chrome oppure puoi promuovere direttamente l'esperienza di installazione utilizzando l'evento beforeinstallprompt. Una volta installata, una PWA si integra con il sistema operativo per comportarsi come un'applicazione nativa: gli utenti le trovano e le avviano dalla stessa posizione delle altre app, le eseguono nella propria finestra, vengono visualizzate nel selettore di attività, le loro icone possono mostrare badge delle notifiche e così via.

Vogliamo colmare il divario di capacità tra web e nativo per fornire una solida base per le moderne applicazioni distribuite sul web. Stiamo lavorando per aggiungere nuove funzionalità della piattaforma web che ti permettano di accedere a elementi come file system, wake lock, aggiunta di un badge dell'ambiente nella barra degli indirizzi per comunicare agli utenti la possibilità di installare la tua PWA, l'installazione dei criteri per le aziende e molto altro ancora.

Se stai già creando una PWA mobile, una PWA desktop non fa eccezione. Infatti, se hai utilizzato il adattamento reattivo, probabilmente non c'è problema. Il tuo singolo codebase funzionerà su computer e dispositivi mobili. Se hai appena iniziato a utilizzare le PWA, ti sorprenderà scoprire quanto sia facile crearle.

1. Aggiungere un manifest
2. Creare un insieme di icone
3. Aggiungere un service worker boilerplate

Poi, riesegui l'iterazione partendo da lì.

Piattaforme di scambio HTTP firmate

Signed HTTP Exchange (SXG), parte di una tecnologia emergente chiamata Web Packages, è ora disponibile in Chrome 73. Una piattaforma HTTP Exchange firmata consente di creare contenuti "portabili" che possono essere forniti da altre parti e questo è l'aspetto chiave: mantiene l'integrità e l'attribuzione del sito originale.

In questo modo l'origine dei contenuti viene disaccoppiata dal server che li pubblica. Tuttavia, poiché è firmato, è come se venissero consegnati dal tuo server. Quando il browser carica questo Signed Exchange, può mostrare in sicurezza il tuo URL nella barra degli indirizzi perché la firma nello scambio indica che i contenuti provengono originariamente dalla tua origine.

Gli scambi HTTP firmati consentono una distribuzione dei contenuti più rapida per gli utenti, consentendo di ottenere i vantaggi di una CDN senza dover cedere il controllo della chiave privata del certificato. Il team AMP ha intenzione di utilizzare piattaforme di scambio HTTP firmate nelle pagine dei risultati di ricerca di Google per migliorare gli URL AMP e velocizzare i clic sui risultati di ricerca.

Per informazioni dettagliate su come iniziare, consulta il post su Signed HTTP Exchanges di Kinuko.

Fogli di stile costruibili

I fogli di stile costruibili, una novità di Chrome 73, offrono un nuovo modo per creare e distribuire stili riutilizzabili, il che è particolarmente importante quando si utilizza Shadow DOM.

È sempre stato possibile creare fogli di stile utilizzando JavaScript. Crea un elemento <style> utilizzando document.createElement('style'). Poi accedi alla relativa proprietà del foglio per ottenere un riferimento all'istanza CSSStyleSheet sottostante e impostare lo stile.

L'utilizzo di questo metodo tende a causare dimensioni eccessive del foglio di stile. Ancora peggio, causa un lampo di contenuti privi di stile. I fogli di stile costruibili consentono di definire e preparare stili CSS condivisi e quindi di applicarli a più radici delle ombre o al documento in modo facile e senza duplicati.

Gli aggiornamenti a un elemento CSSStyleSheet condiviso vengono applicati a tutti i certificati radice in cui è stato adottato e l'adozione di un foglio di stile è rapida e sincrona dopo il caricamento del foglio.

Iniziare è facile. Crea una nuova istanza di CSSStyleSheet, quindi utilizza replace o replaceSync per aggiornare le regole del foglio di stile.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Per ulteriori dettagli ed esempi di codice, consulta il post di Jason Miller sui fogli di stile costruibili: stili riutilizzabili senza soluzione di continuità.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 73 per gli sviluppatori. Ovviamente, ce ne sono molte altre.

• matchAll(), è un nuovo metodo di corrispondenza di espressioni regolari sul prototipo di stringa e restituisce un array contenente le corrispondenze complete.
• L'elemento <link> ora supporta le proprietà imagesrcset e imagesizes per corrispondere agli attributi srcset e sizes di HTMLImageElement.
• L'implementazione del raggio di sfocatura delle ombre di Blink, ora corrisponde a Firefox e Safari.
• La modalità Buio per l'interfaccia utente di Chrome è ora supportata su Mac e presto sarà disponibile il supporto per Windows. È inoltre possibile lavorare su una query supporti CSS: prefers-color-scheme, che può essere utilizzata per rilevare se l'utente ha richiesto al sistema di utilizzare un tema di colore chiaro o scuro. Il bug di monitoraggio è: Aggiungi il supporto della funzionalità dei contenuti multimediali prefers-color-scheme del CSS Per Chrome e Firefox.

Iscriviti

Se vuoi tenerti sempre al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena uscirà Chrome 74, sarò qui per raccontarvi le novità di Chrome.