We believe in progressive web applications as a strong alternative to native mobile applications. Along with small experimental projects we conduct on the side, we intend to improve our web site over time with new techniques and patterns, both to educate ourselves as well as to demonstrate the worth of these browser improvements. Our latest improvement makes use of Service Workers. You can now view most of the Component Kitchen website offline, courtesy of the power of Service Workers.

For those of you looking into employing Service Workers, it’s not difficult to retrofit an existing web site. Our goal was to make our blog posts available offline along with the rest of the site, and to allow an Android device user to add our web site to the home screen as a full screen web application. We didn’t change any existing code in our web site to support this. All it took was:

1. Adding a small bit of script to each of our pages, made easier by the use of a main template for all pages on our site. This script simply registers the Service Worker, pointing to our Service Worker script file. Note that there will soon be a declarative <link rel=“serviceworker”> tag that will do this for you.
2. Adding the script file referenced by the Service Worker registration, and handling the corresponding Service Worker events. In particular, when the Service Worker is installed we specify a set of URLs from our site to cache so that on subsequent page requests such as blog posts, everything is already in the cache.
3. Adding a manifest file allowing Chrome and other supporting browsers to post a banner to the user offering adding the site to their home screen.

The progressive web application aspect of this is satisfying to see. While we understand our web site and blog posts aren’t the most spectacular example of a web application, it’s fun to see our site installed as a web application on a phone’s home screen, the app launching full screen, and displaying all pages even in Airplane Mode. More complex behaviors than we're demonstrating can be implemented with the use of Service Workers, so we are just scratching the surface.

Try it yourself: Visit our site on an Android device. After the page loads (wait a moment if you are on a slow connection to allow the cache to fill), go offline by, for example, turning on Airplane Mode. Now you can continue navigating the site including all the blog posts, even when you’re disconnected from the network!

Bonus: After your first visit and with the network turned on, come back to the site after a wait of at least five minutes. Chrome’s current behavior is to watch for a second visit after five minutes and then present a banner asking you if you’d like to install the site to your home screen as a web application. If you choose to do so, you’ll find our site installed as an app with an icon on your home screen. Launching the app opens it full screen, similar to a native app. As described above, you can even do this offline and navigate the full site.

Tweet

« Blog home