Get started with Web Bundles

Comparta sitios Web como un solo archivo a través de Bluetooth y ejecútelos sin conexión en el contexto de su origen

November 11, 2019

Grouping an entire website as a single file and making it shareable opens up new use cases for the web. Imagine a world where you can:

• Cree su propio contents y distribúyalo en todo tipo de formas sin estar restringido a la red
• Share a web application or web content snippet with your friends via Bluetooth or Wi-Fi Direct
• Bring your site on your own USB or even host it on your own local network

The API de Web Bundles es una propuesta de vanguardia que le permite hacer todo esto.

Compatibilidad del browser

Actualmente, la API de Web Bundles solo es compatible con browsers basados ​​en Chromium con una marca experimental.

Introducing the Web Bundles API

Un Web Bundle es un formato de archivo para encapsular uno o más recursos HTTP en un solo archivo. Puede incluir uno o más archivos HTML, archivos JavaScript, imágenes u hojas de estilo.

Web packages, more formally known as HTTP exchanges included, are part of the Web Packaging
proposal.

Los recursos HTTP en un Web Bundle se indexan por Url de solicitud y, opcionalmente, pueden venir con firmas que avalan los recursos. Las firmas permiten que los navegadores comprendan y verifiquen el origen de cada recurso y tratan a cada uno como si procediera de su verdadero origen. Esto es similar a como Signed HTTP exchanges, a function to sign a single HTTP resource.

This article explains what a Web Bundle is and how to use it.

Explanation of web packages

To be precise, a Web Bundle is a CBOR file with a .wbn extension (by convention) that packages HTTP resources in a binary format, and is served with the application / webbundle Mimica guy. You can read more about this in the Top level structure
draft spec section.

Web Bundles have multiple unique features:

• Encapsulates multiple pages, allowing an entire website to be bundled into a single file
• Enable executable JavaScript, unlike MHTML
• Applications HTTP variants to negotiate content, which enables internationalization with the Accept-Language
  header even if packet is used offline
• It is loaded in the context of its origin when it is cryptographically signed by its publisher.
• Charges almost instantly when served locally

Estas características abren múltiples escenarios. Un escenario común es la capacidad de crear una aplicación web autónoma que be fácil de compartir y utilizable sin conexión a Internet. Por ejemplo, digamos que está en un avión de Tokio a San Francisco con su amigo. No te gusta el entretenimiento a bordo. Tu amigo está jugando a un interesante juego web llamado PROXXand tells you that he downloaded the game as a web pack before boarding the plane. It works perfectly offline. Before Web Bundles, the story ended there and you'd have to take turns playing the game on your friend's device or finding something else to pass the time. But with Web Bundles, this is what you can do now:

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

Here is a video that explains this scenario.

As you can see, a Web Bundle can contain all the resources, which makes it work offline and load instantly.

Creation of web packages

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

1. Install Go.

2. Install on pc go / bundle.

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

3. Clone the preact-todomvc repository and create your web application to prepare to pool your resources.

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

4. Use the gen-bundle command to build a .wbn proceedings.

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

Congratulations! TodoMVC is now a web package.

There are other options for grouping and more to come. the go / bundle CLI allows you to create a Web Bundle using a HAR file or a custom list of resource URLs. Visit the GitHub repository to learn more about go / bundle. You can also try the experimental Node.js module for packaging,
wbn. Note that wbn it is still in the early stages of development.

Playing with Web Bundles

To test a web package:

1. Go chrome://version to see what version of Chrome you are running. If you are running version 80 or later, skip the next step.

2. to download Chrome Canary if you are not running Chrome 80 or later.

3. Opened chrome://flags/#web-bundles.

4. Select the Web packages flag a Enabled.

   

5. Restart Chrome.

6. Drag and drop the todomvc.wbn file in Chrome if it's on desktop, or tap it in a file manager app if it's on Android.

Everything works magically.

You can also try other sample web packages:

• web.dev.wbn is a snapshot of the entire website.dev, as of October 15, 2019.
• proxx.wbn: PROXX is a Minesweeper clone that works offline.
• squoosh.wbn:
  Squoosh is a convenient and fast image optimization tool that allows you to make side-by-side comparisons of various image compression formats, with support for resizing and format conversions.

Post comments

La implementación de la API de Web Bundle en Chrome es experimental e incompleta. No todo funciona y puede fallar o bloquearse. Por eso está detrás de una bandera experimental. Pero la API está lo suficientemente lista para que la explore en Chrome. Los comentarios de los desarrolladores web son cruciales para el diseño de nuevas API, así que pruébelo y dígale a las persons que trabajan en Web Bundles lo que piensa.

Thanks

We would like to congratulate the wonderful Chrome engineering team,
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi toyoshima, Kinuko yasuda and Jeffrey yasskin who worked hard contributing to the spec, building the function in Canary, and reviewing this article. During the standardization process Dan York has helped navigate the IETF discussion and also Dave cramer has been a great resource on what publishers really need. We also want to thank Jason miller for the amazing preact-todomvc and their tireless efforts to improve the structure.