Inizia a utilizzare i web bundle

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

Yusuke Utsunomiya

Kenji Baheux

Avviso:l'implementazione sperimentale della navigazione verso i Web Bundle è stata rimosso da Chrome a febbraio 2023.

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

• Creare contenuti e distribuirli in tutti i modi senza dover limitato alla rete
• Condividi un'app web o dei contenuti web con i tuoi amici tramite Bluetooth o Wi-Fi Direct
• Porta il tuo sito sul tuo dispositivo USB o 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 dietro un flag sperimentale.

Presentazione dell'API Web Bundle

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

Web Bundle, più formalmente noti come Bundled HTTP Exchanges, fanno parte del Web Packaging proposta.

. Come funzionano i Web Bundle

Le risorse HTTP in un Web Bundle sono indicizzate dagli URL di richiesta e, facoltativamente, possono sono corredate di firme che attestano le risorse. Le firme consentono ai browser a comprendere e verificare la provenienza di ogni risorsa e li considera come provenienti da ogni risorsa. dalla sua vera origine. Questo processo è simile a quello di Signed HTTP Exchanges, e una caratteristica per la firma di una singola risorsa HTTP.

Questo articolo illustra che cos'è un Web Bundle e spiega come utilizzarlo.

Spiegazione dei web bundle

Per essere precisi, un Web Bundle è un file CBOR con un'estensione .wbn (per convenzione) che pacchettizza le risorse HTTP in formato binario e vengono pubblicate con lo standard application/webbundle di testo. Per ulteriori informazioni, consulta la Struttura di primo livello della bozza della specifica.

I web bundle offrono 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.
• A questo scopo usa varianti HTTP della negoziazione dei contenuti, il che consente l'internazionalizzazione con Accept-Language anche se il bundle viene usato offline
• Viene caricato nel contesto della sua origine quando è firmato crittograficamente dal suo editore.
• Si carica quasi istantaneamente quando la pubblicazione avviene in locale

Queste funzionalità aprono più scenari. Uno scenario comune è la capacità creare un'app web autonoma che sia facile da condividere e da utilizzare senza a internet. Ad esempio, supponiamo che tu stia viaggiando in aereo da Tokyo a San Francisco con tuo amico. Non ti piace l'intrattenimento in volo. Il tuo amico sta giocando a un gioco interessante app web chiamato PROXX e ti comunica che è stato scaricato come gioco Prepara i gruppi prima di salire a bordo dell'aereo. Funziona perfettamente offline. Prima del web Con i bundle, la storia finisce qui e voi dovrete fare a turno giocare sul dispositivo di un amico o trovare qualcos'altro per superare nel tempo. Con i Web Bundle, invece, puoi effettuare le seguenti operazioni:

1. Chiedi al tuo amico di condividere il file .wbn del gioco. Ad esempio, il file possono essere facilmente condivise in peer-to-peer utilizzando un'app di condivisione file.
2. Apri il file .wbn in un browser che supporta i web bundle.
3. Inizia a giocare sul tuo dispositivo e prova a superare il limite dei tuoi amici punteggio.

Ecco un video che spiega questo scenario.

Come puoi vedere, un Web Bundle può contenere ogni risorsa, facendola funzionare offline e caricarle all'istante.

Nota: attualmente Chrome 80 supporta solo bundle non firmati, ovvero Web Bundle senza firme di origine). Il raggruppamento di PROXX senza firme non funziona a causa di problemi multiorigine per i worker web. Chrome si sta occupando di risolvere questo problema. Nella Nel frattempo, consulta l'articolo sulla risoluzione dei problemi più comuni con Pacchetti per scoprire come evitare problemi multiorigine.

Creazione di Web Bundle

Al momento, l'interfaccia a riga di comando go/bundle è modo più semplice per raggruppare un sito web. go/bundle è un'implementazione di riferimento dei Web Bundle integrata 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.

Ci sono altre opzioni per il raggruppamento e altre sono in arrivo. Interfaccia a riga di comando go/bundle consente di creare un Web Bundle utilizzando un file HAR o un elenco personalizzato di risorse URL. Per scoprire di più, visita il repository GitHub relative a go/bundle. Puoi anche provare il modulo sperimentale Node.js per il raggruppamento, wbn Tieni presente che wbn è ancora nelle fasi iniziali di sviluppo del prodotto.

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 esegui la versione 80 o successiva, salta il passaggio successivo.
2. Scarica Chrome Canary se non hai Chrome 80 o in un secondo momento.
3. Apri about://flags/#web-bundles.

4. Imposta il flag Web Bundle (Pacchetti web) su Enabled (Abilitato).

   

   . Attivazione dei web bundle in about://flags

5. Riavvia Chrome.

6. Trascina il file todomvc.wbn in Chrome se stai utilizzando un computer oppure toccalo in un file se utilizzi Android.

Tutto funziona magicamente.

L'implementazione di Preact di TodoMVC funzionante offline come pacchetto web

Puoi anche provare altri bundle web di esempio:

• web.dev.wbn è una un'istantanea dell'intero sito web.dev, aggiornata al 15 ottobre 2019.
• proxx.wbn: PROXX è un clone di Campo minato che funziona offline.
• squoosh.wbn: Squoosh è uno strumento di ottimizzazione delle immagini comodo e veloce che consente di confrontare fianco a fianco vari formati di compressione delle immagini, con il supporto Ridimensionamento e formattazione delle conversioni.

Nota: al momento puoi accedere solo a un Web Bundle archiviato in un file locale, ma è solo una limitazione temporanea.

Invia feedback

L'implementazione dell'API Web Bundle in Chrome è sperimentale e incompleta. Non tutto funziona e l'app potrebbe non riuscire o arrestarsi in modo anomalo. Ecco perché dietro una segnalazione sperimentale. ma l'API è già pronta per essere esplorata in Chrome. Il feedback degli sviluppatori web è fondamentale per la progettazione di nuove API, quindi provale e comunica le tue opinioni alle persone che lavorano sui Web Bundle.

• Invia feedback generale a [e-mail].
• Se hai feedback sulle specifiche, visita https://github.com/WICG/webpackage/issues/new per segnalare un nuovo problema con le specifiche o invia un'email a [e-mail].
• Se riscontri problemi nel comportamento di Chrome, visita https://crbug.com/new per segnalare un bug di Chromium.
• Qualsiasi contributo alla discussione e agli strumenti delle specifiche è inoltre più di ti diamo il benvenuto. Visita il repository delle specifiche per partecipare.

Ringraziamenti

Ringraziamo il meraviglioso team di tecnici di Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda e Jeffrey Yasskin che hanno lavorato duramente e hanno contribuito al la specifica di Google, creando la funzionalità su canary e leggendo questo articolo. Durante processo di standardizzazione Dan York ci ha aiutato a orientarsi di IETF e anche Dave Cramer è stato un un'ottima risorsa su ciò di cui gli editori hanno effettivamente bisogno. Vogliamo anche ringraziare Jason Miller per l'incredibile preact-todomvc e la sua impegno inarrestabile per migliorare il framework.