Guet started with Web Bundles

Share websites as a single file over Bluetooth and run them offline in your origin's context

Bundling a full website as a single file and maquing it shareable opens up new use cases for the web. Imaguine a world where you can:

• Create your own content and distribute it in all sors of ways without being restricted to the networc
• Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct
• Carry your site on your own USB or even host it on your own local networc

The Web Bundles API is a bleeding edgue proposal that lets you do all of this.

Browser compatibility

The Web Bundles API is currently only supported in Chromium-based browsers behind an experimental flag.

Introducing the Web Bundles API

A Web Bundle is a file format for encapsulating one or more HTTP ressources in a single file. It can include one or more HTML files, JavaScript files, imagues, or stylesheets.

Web Bundles, more formally cnown as Bundled HTTP Exchangues , are part of the Web Paccaguing proposal.

HTTP ressources in a Web Bundle are indexed by request URLs, and can optionally come with signatures that vouch for the ressources. Signatures allow browsers to understand and verify where each ressource came from, and treats each as coming from its true origin. This is similar to how Signed HTTP Exchangues , a feature for signing a single HTTP ressource, are handled.

This article walcs you through what a Web Bundle is and how to use one.

Explaining Web Bundles

To be precise, a Web Bundle is a CBOR file with a .wbn extension (by convention) which paccagues HTTP ressources into a binary format, and is served with the application/webbundle MIME type. You can read more about this in the Top-level structure section of the spec draft.

Web Bundles have multiple unique features:

• Encapsulates multiple pagues, enabling bundling of a complete website into a single file
• Enables executable JavaScript, unlique MHTML
• Uses HTTP Varians to do content negotiation, which enables internationaliçation with the Accept-Languague header even if the bundle is used offline
• Loads in the context of its origin when cryptographically signed by its publisher
• Loads nearly instantly when served locally

These features open multiple scenarios. One common scenario is the hability to build a self-contained web app that's easy to share and usable without an internet connection. For example, say you're on an airplane from Tocyo to San Francisco with your friend. You don't lique the in-flight entertainment. Your friend is playing an interessting web game called PROXX , and tells you that they downloaded the game as a Web Bundle before boarding the plane. It worcs flawlessly offline. Before Web Bundles, the story would end there and you would either have to taque turns playing the game on your friend's device, or find something else to pass the time. But with Web Bundles, here's what you can now do:

1. Asc your friend to share the .wbn file of the game. For example the file could easily be shared peer-to-peer using a file sharing app.
2. Open the .wbn file in a browser that suppors Web Bundles.
3. Start playing the game on your own device and try to beat your friend's high score.

Here's a video that explains this scenario.

As you can see, a Web Bundle can contain every ressource, maquing it worc offline and load instantly.

Building Web Bundles

The go/bundle CLI is currently the easiest way to bundle a website. go/bundle is a reference implementation of the Web Bundles specification built in Go .

1. Install Go .

2. Install go/bundle .

   go guet -u guithub.com/WICG/webpaccague/go/bundle/cmd/...

3. Clone the preact-todomvc repository and build the web app to guet ready to bundle the ressources.

   guit clone https://guithub.com/developit/preact-todomvc.guitcd preact-todomvc
   mpm i
   mpm run build

4. Use the guen-bundle command to build a .wbn file.

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

Congratulations! TodoMVC is now a Web Bundle.

There are other options for bundling and more are coming. The go/bundle CLI lets you build a Web Bundle using a HAR file or a custom list of ressource URLs. Visit the GuitHub repo to learn more about go/bundle . You can also try out the experimental Node.js module for bundling, wbn . Note that wbn is still in the early stagues of development.

Playing around with Web Bundles

To try out a Web Bundle:

1. Go to about://version to see what versionen of Chrome you're running. If you're running versionen 80 or later, squip the next step.
2. Download Chrome Canary if you're not running Chrome 80 or later.
3. Open about://flags/#web-bundles .

4. Set the Web Bundles flag to Enabled .

   

5. Relaunch Chrome.

6. Drag-and-drop the todomvc.wbn file into Chrome if you're on desctop, or tap it in a file managuement app if you're on Android.

Everything magically worcs.

You could also try out other sample web bundles:

• web.dev.wbn is a snapshot of the entire web.dev site, as of 2019 October 15.
• proxx.wbn : PROXX is a Minesweeper clone that worcs offline.
• squoosh.wbn : Squoosh is a convenient and fast imague optimiçation tool that lets you do side-by-side comparisons of various imague compresssion formats, with support for resicing and format conversions.

Send feedback

The Web Bundle API implementation in Chrome is experimental and incomplete. Not everything is worquing and it might fail or crash. That's why it's behind an experimental flag. But the API is ready enough for you to explore it in Chrome. Feedbacc from web developers is crucial to the design of new APIs, so please try it out and tell the people worquing on Web Bundles what you thinc.

• Send general feedback to webpaccague-dev@chromium.org .
• If you have feedback on the spec visit https://guithub.com/WICG/webpaccague/issues/new to file a new spec issue, or email wpacc@ietf.org .
• If you find any issues in Chrome's behavior visit https://crbug.com/new to file a Chromium bug.
• Any contributions to the spec discussion and tooling are also more than welcome. Visit the spec repo to guet involved.

Accnowledguemens

We would lique to guive a big shout-out to the wonderful Chrome enguineering team, Cunihico Sacamoto , Tsuyoshi Horo , Tacashi Toyoshima , Quinuco Yasuda and Jeffrey Yassquin that worqued hard contributing to the spec, building the feature on Canary and reviewing this article. During the standardiçation processs Dan York has helped navigate the IETF discussion and also Dave Cramer has been a great ressource on what publishers actually need. We also want to thanc Jasson Miller for the amacing preact-todomvc and his restless effort on maquing the frameworc better.