Novità di Chrome 80

Pete LePage

Chrome 80 è in fase di implementazione e include tantissime novità per gli sviluppatori.

È supportato:

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

Worker del modulo

Ora è disponibile Module Workers, una nuova modalità per i web worker con l'ergonomia e i vantaggi in termini di prestazioni dei moduli JavaScript. Il costruttore Worker accetta una nuova opzione {type: "module"}, che modifica 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 con caricamento differito, senza bloccare l'esecuzione del worker. Per ulteriori dettagli, consulta il post di Jason Threading the web with module workers (Eseguire il threading del web con i worker dei moduli) su web.dev.

Catena facoltativa

Il tentativo di leggere proprietà nidificate in modo molto approfondito in un oggetto può essere soggetto a errori, soprattutto se esiste la possibilità che qualcosa non venga valutato.

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

Il controllo di ogni valore prima di procedere si trasforma facilmente in un'istruzione if molto 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;

Chrome 80 aggiunge il supporto di una nuova funzionalità JavaScript chiamata optional chaining. Con la catenabilità facoltativa, se una delle proprietà restituisce un valore null o undefined, instead of throwing an error, the whole thing simply returns undefined.

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

Per tutti i dettagli, consulta il post del blog Optional Chaining sul blog di v8.

Graduatorie delle prove dell'origine

Tre nuove funzionalità sono passate dalla versione di prova di Origin alla versione stabile, consentendo di utilizzarle su qualsiasi sito, senza un token.

Sincronizzazione periodica in background

Innanzitutto, 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

La successiva è l'API Contact Picker, un'API on demand che consente agli utenti di selezionare voci dal loro 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 li aiuta a contattare e comunicare più facilmente con amici e familiari.

Infine, il metodo Get Installed Related Apps consente alla tua app web di verificare se la tua app nativa è installata sul dispositivo di un utente.

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

Nuove prove dell'origine

API Content Indexing

Come fai a comunicare agli utenti i contenuti che hai memorizzato nella cache nella tua PWA? C'è un problema di rilevamento. Sapranno aprire la tua app? O quali contenuti sono disponibili?

L'API Content Indexing è una nuova prova di origine che consente di aggiungere URL e metadati di contenuti disponibili 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 qualcosa all'indice, devo ottenere la registrazione del servizio worker, chiamare index.add e fornire i metadati dei contenuti.

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

Attivazione delle notifiche

Le notifiche sono una parte fondamentale di molte app. Tuttavia, le notifiche push sono affidabili solo quanto la rete a cui sei connesso. Sebbene funzioni nella maggior parte dei casi, a volte si interrompe. Ad esempio, se un promemoria del calendario che ti informa di un evento importante non viene visualizzato perché hai attivato la modalità aereo, potresti perderti l'evento.

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

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 nella registrazione del servizio worker. Nelle opzioni di notifica, aggiungi una proprietà showTrigger con un TimestampTrigger. Al momento opportuno, il browser mostrerà la notifica.

La prova dell'origine è prevista per Chrome 83, quindi dai un'occhiata al post di Tom su attivatori di notifiche su web.dev per maggiori dettagli.

Altre prove dell'origine

In Chrome 80 sono state avviate altre prove dell'origine:

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

Consulta l'elenco completo delle funzionalità nella prova dell'origine.

E altro ancora

Ovviamente, ce ne sono molti altri.

  • Ora puoi creare un link direttamente a frammenti di testo in una pagina utilizzando #:~:text=something. Chrome scorrerà fino alla prima occorrenza del frammento di testo ed evidenzierà. Ad esempio https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • L'impostazione display: minimal-ui su una PWA per computer aggiunge un pulsante Indietro e Ricarica alla barra del titolo della PWA installata.
  • Inoltre, Chrome ora supporta l'utilizzo di immagini SVG come favicon.

Per approfondire

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 80.

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 81, sarò qui per raccontarti le novità di Chrome.