Inizia a utilizzare i web bundle

Condividi siti web come singolo file tramite Bluetooth ed eseguili offline nel contesto della tua origine

Yusuke Utsunomiya
Yusuke Utsunomiya
Kenji Baheux
Kenji Baheux

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 tutti i modi, senza essere limitati 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 web bundle, più noti formalmente come piattaforme HTTP in bundle, fanno parte della proposta Web Packaging.

Un'immagine che mostra che un pacchetto web è una raccolta di risorse web.
Come funzionano i pacchetti web

Le risorse HTTP in un Web Bundle sono indicizzate dagli URL delle richieste e, facoltativamente, possono essere 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 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 crittograficamente dall'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 miglior punteggio 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.

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.

Divertirsi con i Web Bundle

Per provare un Web Bundle:

  1. Visita il sito about://version per verificare quale versione di Chrome è in uso. 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 Bundle (Pacchetti web) su Enabled (Abilitato).

    Uno screenshot di about://flags
    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.

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 al team che si occupa di Web Bundle.

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 il processo di standardizzazione, Dan York ha aiutato a orientarsi nella discussione di IETF e Dave Cramer si è rivelata una grande risorsa su ciò di cui gli editori hanno effettivamente bisogno. Vogliamo anche ringraziare Jason Miller per l'incredibile preact-todomvc e per il suo costante impegno per migliorare il framework.