Inizia a utilizzare i web bundle

Condividi i siti web come un unico file tramite Bluetooth ed eseguili offline nel contesto di origine

Yusuke Utsunomiya

Twitter Homepage

Kenji Baheux

Avviso: l'implementazione sperimentale della navigazione in Web Bundle è stata rimossa 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:

• Puoi creare i tuoi contenuti e distribuirli in vari modi senza essere limitati alla rete
• Condividi un'app web o un contenuto web con i tuoi amici tramite Bluetooth o Wi-Fi Direct
• Trasporta il tuo sito su una porta USB oppure ospitalo sulla tua rete locale

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

Compatibilità del browser

L'API Web Bundle è attualmente supportata solo nei browser basati su Chromium che hanno un flag sperimentale.

Introduzione all'API Web Bundle

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

I Web Bundle, noti più formalmente come Scambi HTTP in bundle, fanno parte della proposta Web Packaging.

Come funzionano i web bundle

Le risorse HTTP in un web bundle sono indicizzate dagli URL delle richieste e possono facoltativamente essere accompagnate da firme che garantiscono le risorse. Le firme consentono ai browser di comprendere e verificare la provenienza di ogni risorsa e di trattarle come provenienti dalla sua vera origine. La procedura è simile a quella di Signed HTTP Exchanges, una funzionalità per la firma di una singola risorsa HTTP.

Questo articolo illustra cos'è un web bundle e come utilizzarlo.

Descrizione dei pacchetti web

Per essere precisi, un web bundle è un file CBOR con estensione .wbn (per convenzione) che pacchettizza le risorse HTTP in un formato binario e viene pubblicato con il tipo MIME application/webbundle. Per saperne di più, consulta la sezione Struttura di primo livello della bozza delle specifiche.

I Web Bundle hanno diverse funzionalità uniche:

• Incapsula più pagine, consentendo il raggruppamento di un sito web completo in un unico file
• Attiva JavaScript eseguibile, a differenza di MHTML
• Utilizza Varianti HTTP per eseguire la negoziazione dei contenuti, che consente l'internazionalizzazione con l'intestazione Accept-Language anche se il bundle viene utilizzato offline
• Il caricamento avviene nel contesto della sua origine quando è firmato crittograficamente dal publisher.
• Si carica quasi istantaneamente se la pubblicazione avviene in locale

Queste funzionalità aprono più scenari. Uno scenario comune è la capacità di creare un'app web autonoma, facile da condividere e utilizzabile senza una connessione a internet. Ad esempio, supponiamo che tu sia in aereo con un amico da Tokyo a San Francisco. Non ti piace l'intrattenimento in volo. Il tuo amico sta giocando a un interessante gioco web chiamato PROXX e ti dice che lo ha scaricato come Web Bundle prima di salire sull'aereo. Funziona perfettamente offline. Prima di Web Bundle, la storia terminava lì e dovreste giocare a turno giocando sul dispositivo dell'amico o trovare qualcos'altro per trascorrere il tempo. Con i pacchetti web, invece, ecco cosa puoi fare ora:

1. Chiedi al tuo amico di condividere il file .wbn del gioco. Ad esempio, il file può essere facilmente condiviso peer-to-peer utilizzando un'app per la condivisione di file.
2. Apri il file .wbn in un browser che supporta Web Bundle.
3. Inizia a giocare sul tuo dispositivo e cerca di battere il punteggio più alto del tuo amico.

Ecco un video che spiega questo scenario.

Come puoi vedere, un web bundle può contenere ogni risorsa, in modo che funzioni offline e venga caricata all'istante.

Nota: attualmente Chrome 80 supporta solo bundle non firmati (ovvero, web bundle senza firme delle origini). Il raggruppamento di PROXX senza firme non funziona bene a causa di problemi multiorigine dei worker web. Chrome si sta occupando della risoluzione del problema. Nel frattempo, consulta Gestire i problemi comuni nei pacchetti non firmati per scoprire come evitare problemi multiorigine.

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 di Web Bundle integrata 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 crea 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. Usa 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 Web Bundle.

Sono in arrivo altre opzioni per il raggruppamento. L'interfaccia a riga di comando go/bundle ti consente di creare un web bundle utilizzando un file HAR o un elenco personalizzato di URL di risorse. Visita il repository GitHub per scoprire di più su go/bundle. Puoi anche provare il modulo Node.js sperimentale per il raggruppamento, wbn. Tieni presente che wbn è ancora nelle prime fasi di sviluppo.

Utilizzo dei Web Bundle

Per provare un web bundle:

1. Visita il sito about://version per verificare quale versione di Chrome è in uso. Se esegui la versione 80 o successive, salta il passaggio successivo.
2. Scarica Chrome Canary se non hai Chrome 80 o versioni successive.
3. Apri about://flags/#web-bundles.

4. Imposta il flag Web Bundle su Enabled.

   

   Abilitazione dei web bundle in about://flags

5. Riavvia Chrome.

6. Trascina il file todomvc.wbn in Chrome se utilizzi un computer desktop oppure toccalo in un'app di gestione file se utilizzi Android.

Tutto funziona magicamente.

L'implementazione Preact di TodoMVC che funziona offline come un bundle web

Puoi anche provare altri bundle web di esempio:

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

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

Invia feedback

L'implementazione dell'API Web Bundle in Chrome è sperimentale e incompleta. Non tutto funziona e potrebbe non funzionare o arrestarsi in modo anomalo. È per questo che è dietro un contrassegno sperimentale. Tuttavia, l'API è abbastanza pronta per consentirti di esplorarla in Chrome. Il feedback degli sviluppatori web è fondamentale per la progettazione delle nuove API, quindi provalo e comunica la tua opinione alle persone che lavorano sui pacchetti web.

• Invia un feedback generale a [e-mail].
• Se hai feedback sulle specifiche, visita la pagina https://github.com/WICG/webpackage/issues/new per segnalare un nuovo problema con le specifiche, oppure 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.
• Anche qualsiasi contributo alla discussione e agli strumenti sulle specifiche è gradito. Visita il repository delle specifiche per partecipare.

Ringraziamenti

Vogliamo ringraziare i meravigliosi team di tecnici di Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda e Jeffrey Yasskin che hanno lavorato duramente per contribuire alle specifiche, sviluppando la funzionalità su Canary e leggendo questo articolo. Durante il processo di standardizzazione, Dan York ha contribuito a orientare la discussione dell'IETF e anche Dave Cramer è stata un'ottima risorsa sulle reali esigenze degli editori. Vogliamo inoltre ringraziare Jason Miller per l'incredibile preact-todomvc e il suo incessante impegno nel migliorare il framework.