Novità di Chrome 89

Pete LePage

L'implementazione di Chrome 89 nella versione stabile è in corso.

Ecco cosa devi sapere:

Sono Pete LePage, lavoro e faccio video da casa. Scopriamo insieme le novità per gli sviluppatori di Chrome 89.

WebHID, WebNFC e Web Serial

Sono davvero entusiasta di WebHID, WebNFC e Web Serial. Aprono nuovi scenari per gli utenti che prima non erano possibili, interagendo con hardware del mondo reale.

Consentono ai maker di connettersi a hardware divertente e originale, app di videoconferenza per utilizzare i tasti di telefonia dedicati su speaker specializzati. o qualsiasi altro caso d'uso.

Utilizzando Web Serial e circa 60 righe di codice, @AndreBan ha creato una pagina che può interagire con MicroPython REPL su Raspberry Pi Pico. Web Serial viene utilizzato anche da Espruino nel suo IDE basato sul web.

Al CDS 2019, Francois ha scritto un divertente gioco di memoria utilizzando Web NFC. Dovevi toccare lo smartphone sulla carta giusta, nell'ordine corretto.

StreamDeck con Daft Punk Drum Pad

Il mio preferito è @bramus, che ha utilizzato WebHID per connettersi a StreamDeck e creare un drum pad dei Daft Punk. Se non hai StreamDeck, guarda il suo video dimostrativo su YouTube e controlla il codice su GitHub.

Che sia il tuo sito a interagire con l'hardware o l'hardware a interagire con molti siti, gli utenti vincono perché non devono installare driver o software speciali.

Puoi scoprire di più su alcuni dei dispositivi che puoi connettere all'indirizzo web.dev/devices o consultare le guide introduttive per WebHID, WebNFC e Web Serial.

Modifiche ai criteri di installabilità delle PWA

Il supporto offline è stato un elemento chiave dei criteri di installabilità delle app web progressive sin dall'inizio. Come per le altre app installate, gli utenti si aspettano che funzioni in modo affidabile. Dovrebbe essere veloce e non dovrebbe mai vedere il dinosauro offline.

Entro la fine dell'anno, prevediamo di chiudere una scappatoia che ha consentito ad alcuni siti di superare i criteri di installabilità, senza un'esperienza offline. Se la tua PWA ha già un'esperienza offline, non devi fare altro. Non è richiesta alcuna azione, ma, se non l'hai ancora fatto, è il momento di aggiungerne uno.

A partire da Chrome 89, se la tua PWA non fornisce una risposta valida quando è offline, vedrai un avviso in Strumenti per sviluppatori nella scheda Problemi e Lighthouse indicherà che c'è un problema. L'applicazione forzata inizierà nella versione 93 di Chrome entro la fine dell'anno.

DevTools che mostra il messaggio di avviso nella console.
Messaggio di avviso nella console Chrome DevTools.
DevTools che mostra il messaggio di avviso nella scheda Applicazione.
Messaggio di avviso nella scheda Applicazione > Manifest > Installabilità.

Puoi decidere che tipo di esperienza offline vuoi offrire. Idealmente, dovresti fornire il maggior numero possibile di dettagli sulla tua esperienza. Tuttavia, come minimo, può trattarsi di una semplice pagina di riserva offline.

Puoi trovare maggiori dettagli sulla modifica e sul motivo per cui la stiamo apportando in Miglioramento del rilevamento del supporto offline delle PWA.

Se non sai da dove iniziare, consulta Workbox. Dispone di un insieme di librerie che possono supportare un service worker pronto per la produzione per la tua PWA. In alternativa, per una semplice pagina di riserva offline, l'articolo Creare una pagina di riserva offline contiene tutto il codice di cui hai bisogno e puoi copiarlo e incollarlo direttamente nel tuo sito.

Web Share e Web Share Target per computer

Se il tuo sito consente agli utenti di creare, modificare o interagire con i file, devi utilizzare le API Web Share e Web Share Target. Queste API sono disponibili sui dispositivi mobili da un po' di tempo, ma ora sono supportate su ChromeOS e Windows.

Web Share consente agli utenti di inviare file o dati ad altre app installate sul proprio dispositivo, ad esempio la condivisione di una foto da Google Foto a Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Per registrarti come target in modo che altre app possano condividere file o dati con te, ti consigliamo di utilizzare l'API Web Share Target.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Consulta Integrare l'interfaccia utente di condivisione del sistema operativo con l'API Web Share e Ricevere dati condivisi con l'API Web Share Target per le guide introduttive.

E altro ancora

E ovviamente c'è molto altro.

Chrome ora consente await di primo livello all'interno dei moduli JavaScript.

Nuova icona di installazione dell'omnibox per le PWA

Per ridurre la confusione degli utenti, abbiamo aggiornato l'icona mostrata nella omnibox per le PWA installabili.


Inoltre, se hai utilizzato un'attività web attendibile per rendere disponibile la tua PWA nel Play Store per ChromeOS, puoi registrarti alla prova dell'origine dell'API Digital Goods.

Per approfondire

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

Iscriviti

Se vuoi rimanere al corrente dei nostri video, iscriviti al nostro 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 90, sarò qui per raccontarti le novità di Chrome.

Crediti

Le foto di Raspberry Pi e Arduino sono di Harrison Broadbent su Unsplash