Novità di Chrome 89

Stiamo iniziando l'implementazione della versione stabile di Chrome 89.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e lavoro da casa, scopriamo le novità di Chrome 89 per gli sviluppatori.

WebHID, WebNFC e serie web

Sono entusiasta di WebHID, WebNFC e Web Serial. Creano nuovi scenari per gli utenti che non erano mai stati possibili prima, interagendo con l'hardware del mondo reale.

Consentono ai produttori di connettersi ad app di videoconferenza hardware originali e divertenti per utilizzare i pulsanti di telefonia dedicati su altoparlanti specializzati. o altri casi d'uso.

Utilizzando Web Serial e circa 60 righe di codice, @AndreBan ha creato una pagina in grado di interagire con il REPL MicroPython su un Raspber Pi Pico. Web Serial è utilizzato anche da Espruino nel suo IDE basato sul web.

Al CDS 2019, Francois ha scritto un divertente gioco in stile memoria utilizzando Web NFC. È stato necessario mettere a contatto il telefono e la carta corretta, nell'ordine corretto.

Stream Deck con Daft Punk Drum Pad

Il mio preferito, @bramus, ha usato WebHID per connettersi a uno StreamDeck, creando un drum pad Daft Punk. Se non hai uno StreamDeck, guarda il suo video dimostrativo su YouTube e guarda il codice su GitHub.

Che si tratti del tuo sito che interagisce con il tuo hardware o del tuo hardware, che può interagire con molti siti, gli utenti ottengono ottimi risultati perché non hanno bisogno di installare driver o software speciali.

Puoi scoprire di più su alcuni dei dispositivi a cui puoi collegarti all'indirizzo web.dev/devices oppure consultare le guide introduttive per WebHID, WebNFC e numero di serie web.

Modifiche ai criteri di installazione delle PWA

Il supporto offline è stato fin dall'inizio una parte fondamentale dei criteri relativi all'installabilità delle app web progressive. Come per le altre app installate, gli utenti si aspettano che funzioni in modo affidabile. Deve essere veloce e non dovrebbero mai vedere i dinosauri offline.

Entro la fine dell'anno, intendiamo chiudere una scappatoia che consenta 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 in caso contrario è il momento di aggiungerne una.

A partire da Chrome 89, se la PWA non fornisce una risposta valida quando è offline, vedrai un avviso in DevTools nella scheda Problemi e Lighthouse indicherà che si è verificato un problema. L'applicazione inizierà in Chrome 93 entro la fine dell'anno.

DevTools che mostra un messaggio di avviso nella console.
Messaggio di avviso nella console di 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 offrire. Idealmente, dovresti offrire quante più esperienze possibili. Tuttavia, come minimo, può essere semplice come una pagina di riserva offline.

Puoi trovare ulteriori dettagli sulla modifica e sul motivo per cui stiamo apportando questa modifica nella pagina Migliorare il rilevamento del supporto offline delle app web progressive.

Se non sai da dove iniziare, controlla Workbox. Ha una serie 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 necessario e puoi copiarlo e incollarlo direttamente nel tuo sito.

Destinazione condivisione web e condivisione web per desktop

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 tempo, ma ora sono supportate su ChromeOS e Windows.

La funzionalità Web Share consente agli utenti di inviare file o dati ad altre app installate sul loro dispositivo, ad esempio la condivisione di una foto da Google Foto su 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, devi utilizzare l'API Web Share Target.

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

Seleziona Integrazione con l'UI di condivisione del sistema operativo con l'API Web Share e Ricezione di dati condivisi con l'API Web Share Target per le guide introduttive.

E altro ancora

E ovviamente c'è molto altro.

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

Nuova icona di installazione della omnibox per le PWA

Per ridurre la confusione per gli 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 per la prova dell'origine dell'API Digital Goods.

Per approfondire

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

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

Crediti

La foto di Raspber Pis e Arduino è di Harrison Broadbent su Unsplash