Inizia a utilizzare i web bundle

Condividere siti web come un singolo file tramite Bluetooth ed eseguirli offline nel contesto dell'origine

Yusuke Utsunomiya

Kenji Baheux

Avviso: l'implementazione sperimentale della navigazione ai pacchetti web è stata rimessa da Chrome a febbraio 2023.

Raggruppare un sito web completo in un unico file e renderlo condivisibile apre nuovi casi d'uso per il web. Immagina un mondo in cui puoi:

• Creare i tuoi contenuti e distribuirli in svariati modi senza essere vincolati alla rete
• Condividere un'app web o un contenuto web con gli amici tramite Bluetooth o Wi-Fi Direct
• Trasporta il tuo sito su una chiave USB o ospitalo sulla tua rete locale

L'API Web Bundles è una proposta all'avanguardia che ti consente di fare tutto questo.

Compatibilità del browser

L'API Web Bundles è attualmente supportata solo nei browser basati su Chromium tramite un flag sperimentale.

Presentazione dell'API Web Bundles

Un bundle web è un formato file per incapsulare una o più risorse HTTP in un singolo file. Può includere uno o più file HTML, file JavaScript, immagini o fogli di stile.

I pacchetti web, noti più formalmente come scambio HTTP raggruppato, fanno parte della proposta di pacchettistica web.

Come funzionano i pacchetti web

Le risorse HTTP in un bundle web sono indicizzate in base agli URL delle richieste e possono essere facoltativamente accompagnate da firme che garantiscono le risorse. Le firme consentono ai browser di comprendere e verificare la provenienza di ogni risorsa e trattano ciascuna come proveniente dalla sua vera origine. Questo è simile alla modalità di gestione degli scambi HTTP firmati, una funzionalità per la firma di una singola risorsa HTTP.

Questo articolo spiega cos'è un pacchetto web e come utilizzarlo.

Informazioni sui web bundle

Per essere precisi, un bundle web è un file CBOR con estensione .wbn (per convenzione) che impacchetta le risorse HTTP in un formato binario e viene pubblicato con il tipo MIME application/webbundle. Puoi trovare ulteriori informazioni nella sezione Struttura di primo livello della bozza delle specifiche.

I pacchetti web hanno diverse funzionalità uniche:

• Incapsula più pagine, consentendo il raggruppamento di un sito web completo in un unico file
• Consente di attivare JavaScript eseguibile, a differenza di MHTML
• Utilizza le varianti HTTP per eseguire la negoziazione dei contenuti, il che consente l'internazionalizzazione con l'intestazione Accept-Language anche se il bundle viene utilizzato offline
• Viene caricato nel contesto della sua origine quando è firmato in modo crittografico dal suo editore
• Si carica quasi istantaneamente se pubblicato localmente

Queste funzionalità aprono più scenari. Uno scenario comune è la possibilità di creare un'app web autonoma, facile da condividere e utilizzabile senza una connessione a internet. Ad esempio, supponiamo che tu stia volando da Tokyo a San Francisco con un amico. Non ti piace l'intrattenimento a bordo. Il tuo amico sta giocando a un interessante gioco web chiamato PROXX e ti dice di averlo scaricato come Web Bundle prima di salire sull'aereo. Funziona perfettamente offline. Prima dei pacchetti web, la storia finiva lì e dovevi giocare a turno sul dispositivo di un amico o trovare qualcos'altro per passare il tempo. Con i pacchetti web, invece, ora puoi:

1. Chiedi all'amico di condividere il file .wbn del gioco. Ad esempio, il file potrebbe essere facilmente condiviso in peer-to-peer utilizzando un'app di condivisione file.
2. Apri il file .wbn in un browser che supporta i pacchetti web.
3. Inizia a giocare sul tuo dispositivo e prova a battere il record del tuo amico.

Ecco un video che spiega questo scenario.

Come puoi vedere, un Web Bundle può contenere ogni risorsa, il che consente di utilizzarlo offline e di caricarlo immediatamente.

Nota: al momento Chrome 80 supporta solo i bundle non firmati (ovvero i bundle web senza firme di origine). Il bundling di PROXX senza firme non funziona bene a causa di problemi di origine tra più origini del web worker. Chrome si sta adoperando per risolvere il problema. Nel frattempo, consulta l'articolo Gestire i problemi comuni nei bundle non firmati per scoprire come evitare i problemi relativi alle origini diverse.

Creazione di Web Bundle

L'interfaccia a riga di comando go/bundle è attualmente il modo più semplice per raggruppare un sito web. go/bundle è un'implementazione di riferimento della specifica dei pacchetti web creata in Go.

1. Installa Go.

2. Installa go/bundle.

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. Clona il repository preact-todomvc e compila l'app web per prepararti a raggruppare le risorse.

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. Utilizza il comando gen-bundle per creare un file .wbn.

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

Complimenti! TodoMVC ora è un bundle web.

Esistono altre opzioni per i pacchetti e altre sono in arrivo. La CLI go/bundle consente di creare un bundle web utilizzando un file HAR o un elenco personalizzato di URL di risorse. Per saperne di più su go/bundle, visita il repository GitHub. Puoi anche provare il modulo Node.js sperimentale per il bundling, wbn. Tieni presente che wbn è ancora nelle prime fasi di sviluppo.

Provare i Web Bundle

Per provare un Web Bundle:

1. Vai a about://version per vedere quale versione di Chrome stai utilizzando. Se utilizzi la versione 80 o successiva, salta il passaggio successivo.
2. Scarica Chrome Canary se non utilizzi Chrome 80 o versioni successive.
3. Apri about://flags/#web-bundles.

4. Imposta il flag Web Bundles (Pacchetti web) su Enabled (Attivato).

   

   Attivazione dei pacchetti web in about://flags

5. Riavvia Chrome.

6. Trascina il file todomvc.wbn in Chrome se sei su computer oppure toccalo in un'app di gestione dei file se sei su Android.

Tutto funziona magicamente.

La versione Preact di TodoMVC funziona offline come bundle web

Puoi anche provare altri pacchetti web di esempio:

• web.dev.wbn è un istantanea dell'intero sito web.dev a partire dal 15 ottobre 2019.
• proxx.wbn: PROXX è un clone di Campo minato che funziona offline.
• squoosh.wbn: Squoosh è uno strumento di ottimizzazione delle immagini pratico e veloce che consente di eseguire confronti affiancati di vari formati di compressione delle immagini, con il supporto per il ridimensionamento e le conversioni di formato.

Nota: al momento puoi accedere solo a un bundle web memorizzato in un file locale, ma si tratta di una limitazione temporanea.

Invia feedback

L'implementazione dell'API Web Bundle in Chrome è sperimentale e incompleta. Non tutto funziona e l'operazione potrebbe non riuscire o causare un arresto anomalo. Ecco perché è protetta da un flag sperimentale. Tuttavia, l'API è abbastanza pronta per essere esplorata in Chrome. Il feedback degli sviluppatori web è fondamentale per la progettazione di nuove API, quindi provale e comunica il tuo parere a chi lavora a Web Bundle.

• Invia feedback generali all'indirizzo [e-mail].
• Se hai un feedback sulla specifica, visita la pagina https://github.com/WICG/webpackage/issues/new per segnalare un nuovo problema relativo alla specifica o invia un'email all'indirizzo [e-mail].
• Se riscontri problemi nel comportamento di Chrome, visita la pagina https://crbug.com/new per segnalare un bug di Chromium.
• Sono inoltre ben accetti eventuali contributi alla discussione sulle specifiche e agli strumenti. Visita il repo delle specifiche per partecipare.

Ringraziamenti

Vogliamo ringraziare il fantastico team di ingegneri di Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda e Jeffrey Yasskin, che hanno lavorato duramente per contribuire allo sviluppo della specifica, alla creazione della funzionalità su Canary e alla revisione di questo articolo. Durante la procedura di standardizzazione, Dan York ci ha aiutato a orientarci nella discussione dell'IETF e anche Dave Cramer è stata una grande risorsa per capire le reali esigenze dei publisher. Vogliamo anche ringraziare Jason Miller per l'incredibile preact-todomvc e per il suo costante impegno per migliorare il framework.