Novità di Chrome 80

Pete LePage

Chrome 80 è in fase di implementazione e offre moltissime novità per gli sviluppatori.

Supporta:

Mi chiamo Pete LePage, analizziamo le novità di Chrome 80 per gli sviluppatori.

Worker modulo

È ora disponibile una nuova modalità per i lavoratori web che offre i vantaggi in termini di ergonomia e prestazioni dei moduli JavaScript. Il costruttore worker accetta una nuova opzione {type: "module"}, che cambia il modo in cui gli script vengono caricati ed eseguiti, in modo che corrispondano a <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

Il passaggio ai moduli JavaScript consente inoltre di utilizzare l'importazione dinamica per il codice a caricamento lento, senza bloccare l'esecuzione del worker. Per ulteriori dettagli, leggi il post di Jason Threading the web with module worker su web.dev.

Concatenamento facoltativo

Provare a leggere proprietà molto nidificate in un oggetto può essere soggetto a errori, soprattutto se c'è la possibilità che qualcosa non venga valutato.

// Error prone-version, could throw.
const nameLength = db.user.name.length;

Controllare ogni valore prima di procedere si trasforma facilmente in un'istruzione if profondamente nidificata o richiede un blocco try / catch.

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

In Chrome 80 viene aggiunto il supporto di una nuova funzionalità JavaScript chiamata concatenamento facoltativo. Con i concatenamenti facoltativi, se una delle proprietà restituisce un valore nullo o non definito, invece di generare un errore, l'intero elemento restituisce semplicemente un valore indefinito.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Per tutti i dettagli, leggi il post del blog Optional Chaining nel blog v8.

Promozioni della prova dell'origine

Esistono tre nuove funzionalità che sono passate dalla prova dell'origine alla versione stabile, che ne consentono l'utilizzo da qualsiasi sito, senza token.

Sincronizzazione periodica in background

La prima è la sincronizzazione periodica in background, che sincronizza periodicamente i dati in background in modo che quando un utente apre la PWA installata, abbia sempre i dati più recenti.

Selettore contatti

A seguire, c'è l'API Contact Picker, un'API on demand che consente agli utenti di selezionare le voci dal proprio elenco contatti e di condividere dettagli limitati delle voci selezionate con un sito web.

Consente agli utenti di condividere solo ciò che vogliono quando vogliono e consente agli utenti di raggiungere più facilmente i propri amici e familiari e tenersi in contatto con loro.

Infine, il metodo Installa app correlate consente all'app web di verificare se la tua app nativa è installata sul dispositivo di un utente.

Uno dei casi d'uso più comuni è quello di decidere se promuovere l'installazione della tua PWA, nel caso in cui l'app nativa non sia installata. In alternativa, potresti disattivare alcune funzionalità di un'app se sono fornite dall'altra app.

Nuove prove dell'origine

API di indicizzazione dei contenuti

Come fai a informare gli utenti dei contenuti che sono stati memorizzati nella cache nella PWA? C'è un problema di rilevamento qui. Sapranno che dovrà aprire la tua app? Oppure quali contenuti sono disponibili?

L'API Content Index è una nuova prova dell'origine che consente di aggiungere URL e metadati di contenuti offline a un indice locale gestito dal browser e facilmente visibile all'utente.

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Per aggiungere un elemento all'indice, devo ottenere la registrazione del service worker, quindi chiamare index.add e fornire i metadati sui contenuti.

Una volta compilato, l'indice viene visualizzato in un'area dedicata della pagina Download di Chrome per Android. Per informazioni dettagliate, leggi il post di Gerardo Indicizzazione delle pagine compatibili con la modalità offline con l'API Content Index su web.dev.

Condizioni di attivazione delle notifiche

Le notifiche sono una parte fondamentale di molte app. Tuttavia, le notifiche push sono affidabili solo quanto la rete a cui si è connessi. Sebbene funzioni nella maggior parte dei casi, a volte non funziona. Ad esempio, se non ricevi un promemoria del calendario che avvisa di un evento importante perché sei in modalità aereo, potresti perderti l'evento.

Gli attivatori di notifica consentono di pianificare le notifiche in anticipo, in modo che il sistema operativo invii la notifica al momento giusto, anche se non è presente alcuna connettività di rete o se il dispositivo è in modalità di risparmio energetico.

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

Per pianificare una notifica, chiama showNotification per la registrazione dei service worker. Nelle opzioni di notifica, aggiungi una proprietà showTrigger con un TimestampTrigger. Quando arriverà il momento, il browser mostrerà la notifica.

L'esecuzione della prova dell'origine è prevista per Chrome 83, quindi controlla il post di Tom sugli attivatori delle notifiche su web.dev per conoscere i dettagli completi.

Altre prove dell'origine

Esistono alcune altre prove dell'origine a partire da Chrome 80:

  • Seriale web
  • La possibilità per le PWA di registrarsi come gestori di file
  • Nuove proprietà per il selettore contatti

Consulta un elenco completo delle funzionalità della prova dell'origine.

E altro ancora

Ovviamente, c'è molto altro.

  • Ora puoi creare un link diretto ai frammenti di testo su una pagina utilizzando #:~:text=something. Chrome scorrerà fino alla prima istanza del frammento di testo e la evidenzierà. Ad esempio https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • L'impostazione di display: minimal-ui su una PWA desktop aggiunge un pulsante Indietro e ricarica alla barra del titolo della PWA installata.
  • Inoltre, Chrome ora supporta l'uso delle immagini SVG come favicon.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 80.

Abbonati

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

Mi chiamo Pete LePage e non appena uscirà Chrome 81 sarò qui per dirvi le novità di Chrome.