Novità di Chrome 73

Pete LePage

In Chrome 73 abbiamo aggiunto il supporto per:

• Facilitare la creazione di contenuti portatili con gli scambi HTTP firmati.
• La modifica dinamica degli stili diventa molto più semplice con i CSS componibili.
• Il supporto per le app web progressive è disponibile anche su Mac, per poi supportare le PWA su tutte le piattaforme desktop e per dispositivi mobili, semplificando la creazione di app installabili da distribuire tramite web.

E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 73.

Log delle modifiche

Questa pagina illustra solo alcuni dei punti salienti. Per altre modifiche in Chrome 73, consulta i link di seguito.

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

Le app web progressive funzionano ovunque

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

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

Gli utenti possono installare la tua 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 la trovano e la avviano dalla stessa posizione delle altre app, viene eseguita nella propria finestra, viene visualizzata nel selettore di attività, le icone possono mostrare badge di notifica e così via.

Vogliamo colmare il divario di funzionalità tra le app web e native per fornire una base solida per le applicazioni moderne pubblicate sul web. Stiamo lavorando per aggiungere nuove funzionalità della piattaforma web che ti consentano di accedere ad elementi come il file system, il blocco sveglia, l'aggiunta di un badge in modalità Ambient alla barra degli indirizzi per comunicare agli utenti che la tua PWA può essere installata, l'installazione di criteri per le aziende e molto altro.

Se stai già creando una PWA mobile, una PWA desktop non è diversa. Infatti, se hai già utilizzato il responsive design, probabilmente non devi fare altro. 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. Crea un insieme di icone
3. Aggiungere un boilerplate per i worker di servizio

Poi esegui l'iterazione da lì.

Signed HTTP Exchange

Signed HTTP Exchange (SXG), parte di una tecnologia emergente chiamata Web Packages, è ora disponibile in Chrome 73. Un Signed HTTP Exchange consente di creare contenuti "portabili" che possono essere pubblicati 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, ma poiché sono firmati, è come se venissero pubblicati dal tuo server. Quando il browser carica questa piattaforma Signed Exchange, può mostrare senza problemi il tuo URL nella barra degli indirizzi, perché la firma nello scambio indica che i contenuti provenivano originariamente dalla tua origine.

Le piattaforme di scambio pubblicitario HTTP con firma consentono di caricare più velocemente i contenuti per gli utenti, il che consente di usufruire dei vantaggi di una CDN senza dover cedere il controllo della chiave privata del certificato. Il team AMP prevede di utilizzare scambi HTTP firmati nelle pagine dei risultati di ricerca di Google per migliorare gli URL AMP e velocizzare i clic sui risultati di ricerca.

Leggi il post Signed HTTP Exchanges di Kinuko per maggiori dettagli su come iniziare.

Fogli di stile costruibili

Le stylesheet costruibili, una novità di Chrome 73, ci 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 sua proprietà sheet per ottenere un riferimento all'istanza CSSStyleSheet sottostante e imposta lo stile.

Se utilizzi questo metodo, il foglio di stile si gonfia. Peggio ancora, provoca un temporaneo sfarfallio di contenuti senza stile. I fogli di stile costruibili consentono di definire e preparare stili CSS condivisi, per poi applicarli a più elementi ShadowRoot o al documento facilmente e senza duplicazioni.

Gli aggiornamenti a un CSSStyleSheet condiviso vengono applicati a tutte le directory principali in cui è stato adottato e l'adozione di un foglio di stile è veloce e sincrona una volta caricato il foglio.

Per iniziare è sufficiente creare una nuova istanza di CSSStyleSheet, quindi utilizzare 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);
  });

Dai un'occhiata al post di Jason Miller Constructable Stylesheets: seamless reusable styles per ulteriori dettagli ed esempi di codice.

E tanto altro.

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

• matchAll() è un nuovo metodo di corrispondenza delle espressioni regolari nel prototipo di stringa e restituisce un array contenente le corrispondenze complete.
• L'elemento <link> ora supporta le proprietà imagesrcset e imagesizes corrispondente agli attributi srcset e sizes di HTMLImageElement.
• L'implementazione del raggio di sfocatura dell'ombra di Blink ora corrisponde a quella di Firefox e Safari.
• La modalità Scuro per l'interfaccia utente di Chrome è ora supportata su Mac e il supporto per Windows è in arrivo. Inoltre, è in corso la realizzazione di 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 è Aggiunta del supporto della funzionalità dei contenuti multimediali CSS prefers-color-scheme Per Chrome e Firefox.

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

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