Intro

Web bundles are an exciting part of the web packaging specification. They provide you the ability to package up your entire website into a single bundle and share it with others. Have you ever had to create a zip file of your project and email it to someone? This is similar to how web bundles work, but in a formalized spec that can be opened directly in the browser. You can package up your site into a bundle, email it to a user, or bundle your portfolio site on flash drives that you can cleverly use like business cards. Web bundles are binary files that can be opened directly in the browser. At this time, it is expected to ship in Chrome 104. Other browser vendors are currently exploring its implementation.

Use Cases

One of the main use cases for Web Bundles is providing offline capabilities. This isn’t your  typical Progressive Web App type of offline, with Service Workers. You can still use Service Workers, but with Web Bundles, we are talking really offline, running from a thumb drive kind of offline. That’s pretty cool.

 Your application can be partially offline, meaning the basic application is part of the Web Bundle and fetches data from external services. This could be useful for a large complex application on a slow connection that still needs to fetch data such as reports or user information.

Alternatively, you can bundle up your entire site, blog, or documentation and provide it as a single file for offline use. Maybe you’ll be taking a plane trip or a cross-country road trip with a questionable data connection. This is offroad kind of offline.

Building

Building Web Bundles isn’t a difficult process. You write and build your application like you normally would. Once you create a production build, you have a few options.

That’s quite a few options for whatever tickles your fancy.

Some things to note about your bundled application.

  • Offline: Your entire application can be run from the web bundle, but you can still access external resources as normal. Web APIs and CDNs all just work.
  • Security: Similar to providing an SSL certificate for your site, you can sign bundles as well. You will need to do this if you are using Service Workers for example. Signed bundles also help you avoid CORS issues when loading resources.
  • Size: Your web bundle is a package of your entire site, including resources that may not be loaded right away. Web bundles are not meant to replace Progressive Web Apps. So do not be overly concerned about the web bundle size of your application.

Take your note-taking on the Go!

The kind of website or application you want to bundle isn’t necessarily important. But let’s assume you want to create a Web Bundle for a note-taking application, complete with custom tags and folders.  Everyone could benefit from jotting down a few quick notes, and it could surely run offline. I could be on an international flight and organize my notes in an offline application. Before I take my flight, I can create a build of my application. I prefer to use the Go tooling for now, as I have found it to be the most stable.

gen-bundle -dir dist -baseURL https://my-notes-app.com/ \
-primaryURL https://my-notes-app.com/ \
-o my-notes-app.wbn

What we are doing here is saying that we want to package the contents of the dist folder. The baseURL is the URL prefix used for files in the bundle. This doesn’t have to be a real-world URL for a completely offline application like our todo app. The primaryURL is the bundle’s main resource URL. And you can probably assume the o option is the output file name with a wbn extension.

With the bundle built, you can now open it in a browser that supports Web Bundles. At the time of this writing, that would be Chrome 104, or you can enable it in earlier versions of Chrome or Chrome-based browsers at about://flags/#web-bundles.

I now have a completely offline note-taking application. I could even build in a feature to upload my notes once I have an internet connection.

Review

Regardless of your technology preference, you can most likely find some tooling to help you build Web Bundles. Currently, the only limitation is browser support, but like most browser features, this will mature over time. The sample above is just an introduction to creating Web Bundles. You can also generate a HAR (HTTP ARchive format) file of your application to determine what resources are actually used at runtime and generate your Web Bundles with that HAR file. We didn’t even cover signing bundles with certificates to overcome CORS issues or utilize Service Workers.

Summary

The Web Bundle specification has been under development for a number of years now. It should also be noted that there have been concerns about Web Bundles providing a way for advertisers and trackers to evade privacy and security tools. As a consumer, this should be something to consider.

As web developers, they provide a new way to explore creating offline or disconnected applications. Your website or application could even provide a download or export functionality that will package up your website for users to take with them on the go! I highly encourage you to explore Web Bundles, and how you can implement them for your users.