On Monday, Google posted an article announcing something called Web Bundles for Chrome. A week before, I had the opportunity to attend the CascadiaJS conference in Seattle, Washington. There, Kinuko Yasuda from Google’s Chrome Loading Team talked all about Web Bundles! Kinuko’s team is tasked with making Chrome better and faster for users and Web Bundles is their exciting new technology that both web developers and users should get excited about!
The current landscape
Kinuko shared two user scenarios that everyone is certainly familiar with.
In an ideal world, the user taps a link and content is immediately shown – amazing! Most of us are probably more familiar with the second scenario where the user taps a link, the browser fetches HTML, the browser waits for a response and the content is shown… eventually. Kinuko went on to explain how loading time is a big issue for users.
In 2016, Google’s DoubleClick found that 53% of mobile users would close a page if it took longer than 3 seconds to load. This short attention span means faster loading times are an increasingly important component of the user experience in 2019.
Bridging the gap between native and web apps
Currently, native applications provide some benefits over web applications. A native app is an application developed to be run on a particular operating system, ie: mobile apps running on iOS or Android, or desktop apps running on Windows or Mac. Native apps are stand-alone. This means they don’t always rely on internet connectivity to load content so a bad wifi connection wouldn’t necessarily decrease their performance. Native apps also don’t use as much bandwidth.
That said, web apps are easily accessible from any browser, whether that browser is on your desktop, phone, laptop, or tablet. Users don’t want to have to download a new app (whether that be a mobile or desktop app) for every new service they need to use, which is what makes web apps so convenient and versatile.
To summarize, native applications are more consistent and available while web applications are easier to use between devices. Web Bundles allow web apps to act more like a native app, while maintaining the advantages of web apps.
So what are Web Bundles?
A Web Bundle is an experimental, combined file type that neatly packages all of the code and files needed to display a web page. Web Bundles package up all your website’s resources such as HTML, CSS, Javascript, images and fonts into one single ‘.wbn’ file that a browser like Chrome will use to display your website.
Use cases
Games
Games that are made as web apps are often self-contained, and not wifi dependent after downloading. These games can be played and shared offline while travelling or in locations where wifi isn’t consistent.
Imagine you’re about to hop on a long train ride with no wifi. You stop by a cafe with wifi and decide you want to play your favourite web app game while on the train. As things are now, you navigate to the web page containing the game, download the resources necessary, and finally get to play the game in the browser. But then, when you get on the train and try and load up the webpage again, you are met with a message: ‘No internet connection’. With Web Bundles, you would navigate to the page as normal at the cafe, but now you choose to save this site as a bundle. Now, you can load that bundle file on the train without needing an internet connection. Another advantage of Web Bundles is the game could be neatly transferred by any means (USB, NFC, Bluetooth, etc) to, say a friend on the train! Sharing is caring.
Conferences
Another example of an effective application of Web Bundles is conference scheduling. Say a conference has multiple venues with no wifi in between them. Conference organizers could develop a web app that can be loaded once, saved as a Web Bundle and used offline, even outside of the venues. Bluetooth or NFC could be used to quickly and smoothly transfer the schedule web app onto attendee’s phones as they arrive.
Let’s say you developed a web app and you’re booth-ing at a conference. You’re there to show off your product and get people interested through a demo web app. If you transfer the demo as a Web Bundle, it would have an almost instantaneous load time and offline accessibility giving you a coolness factor that can be hard to achieve. Using Web Bundles would be especially useful at something like a conference, where you have attendees from out of town. They may not want to download large native apps or load websites using their expensive roaming data.
Front-end machine learning
At CascadiaJS, Charlie Gerard, a Google Dev Expert described in her talk Machine Learning for Front-End Devs that machine learning can be done completely in the front-end, using JavaScript. Since anything that is HTML/CSS/JavaScript can be bundled, a client-side machine learning solution could take advantage of Web Bundles!
It’s standard for machine learning to work on the server-side partly because client-side data models are very large to download. With Web Bundles, the model only needs to be downloaded once so the larger file is not as big of an obstacle.
If something as high-level and complex as machine learning can be made workable using Web Bundles, imagine what other skill barriers could be broken? The possibilities are endless!
Limitations
Now that I’ve piqued your interest and sold you on Web Bundles, I need to mention a couple of limitations. As with any piece of technology, Web Bundles are better suited for some situations than others.
Anything stored on servers won’t be encapsulated so this limits the functionality of what can be bundled. Web Bundles are especially effective for static websites such as many blogs, online portfolios and games. This is because they don’t require API calls to servers.
Another issue is Web Bundles require user awareness. If your browser automatically cached the bundle of every site or web app you use, it would quickly fill your memory. The only feasible option is the user needs to know it’s an option to right-click and save their site of interest manually.
Final thoughts
What I really love about Web Bundles is they’re a glimpse into an exciting, ultra-fast future.
This cutting-edge technology paints a picture of a digital landscape where web app speeds are on par with native app speeds. This could make web content feel more and more like native apps while maintaining the advantages of web apps. Web Bundles could mark a shift in the feel of how we use applications in general.
Web Bundles could save on data costs and make loading times almost instantaneous – a huge potential improvement in UX. This is especially good news for us Canadians with some of the highest data rates in the world.
While users in countries like Canada and the U.S. have access to better quality wifi with higher-quality phones and bigger (although more expensive) data plans, this isn’t the case everywhere. By decreasing data use and wifi dependency, Web Bundles encourage devs to think from new perspectives and enables a more accessible internet.
At the end of the day, Web Bundles are still experimental and currently require Chrome Canary (Chrome 80 or later). If you’d like to create your own Web Bundle, or just want to learn more, read Google’s Web Dev article on Web Bundles. For now, Web Bundles are a promising future technology for web devs to experiment with. That said, Web Bundles could make our sites and web apps better. As web devs, that’s exactly what we’re trying to do. We should all keep a close eye on Web Bundles – I certainly will.
Get caught up on everything technology by exploring the tech section of our blog!
More blogs by TTT Studios
