Novità di Chrome 89

Chrome 89 sta iniziando a essere implementato nella versione stabile.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 89.

WebHID, WebNFC e Web Serial

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

Consentono ai creator di connettersi ad hardware divertenti e insoliti, ad app di videoconferenza e di utilizzare i pulsanti 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 la REPL di MicroPython su un 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 con la carta giusta, nell'ordine giusto.

StreamDeck con pad per batteria Daft Punk

E la mia preferita, @bramus, ha utilizzato WebHID per connettersi a un StreamDeck, creando un pad per batteria Daft Punk. Se non hai un StreamDeck, guarda il video dimostrativo di YouTube e il codice su GitHub.

Che si tratti del tuo sito che interagisce con l'hardware o dell'hardware che può interagire con molti siti, gli utenti sono i primi a beneficiarne perché non devono installare driver o software speciali.

Per saperne di più su alcuni dei dispositivi a cui puoi connetterti, visita la pagina web.dev/devices o consulta le guide introduttive per WebHID, WebNFC e Web Serial.

Modifiche ai criteri di installabilità delle PWA

Il supporto offline è stato fin dall'inizio un elemento chiave dei criteri di installabilità delle app web progressive. 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 ne hai uno, è il momento di aggiungerne uno.

A partire da Chrome 89, se la tua PWA non fornisce una risposta valida quando è offline, in Strumenti per sviluppatori nella scheda Problemi viene visualizzato un avviso e Lighthouse indica che è presente un problema. L'applicazione inizierà nella versione 93 di Chrome, a fine anno.

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

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

Puoi trovare ulteriori dettagli sulla modifica e sul motivo per cui la stiamo apportando in Miglioramento del rilevamento del supporto offline delle Progressive Web App.

Se non sai da dove iniziare, dai un'occhiata a Workbox. Dispone di un insieme di librerie che possono supportare un worker di servizio 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.

Condivisione web e Destinazione condivisione web 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 su dispositivi mobili da un po' di tempo, ma ora sono supportate su ChromeOS e Windows.

Con la funzionalità Condivisione web, gli utenti possono inviare file o dati ad altre app installate sul proprio dispositivo, ad esempio condividere 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/*"],
      },
    ],
  },
},

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

E altro ancora

E naturalmente c'è molto altro.

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

Nuova icona di installazione nell'omnibox per le PWA

Per ridurre la confusione tra gli utenti, abbiamo aggiornato l'icona visualizzata nell'omnibox per i 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

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

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

Crediti

La foto dei Raspberry Pi e di Arduino è di Harrison Broadbent su Unsplash