Generating an Epic Offline Blog With Hugo

Background

I recently published the theme I developed for this blog as an open source project. The theme can be viewed at LINK.

As a long time web developer I wanted to over engineer my blog setup and make my theme use cutting edge web technology on all fronts. Night mode, progressive image loading, lazy image loading, and offline browsing were all must haves for the new blog setup.

Of all of these features the most difficult to get right was the offline browsing. This post covers how the pages for my blog are cached and how all of the supporting assets are generated.

Shipping as a PWA

This section is for those unfamiliar with how a website could function offline in the first place.

… background … PWA

The Service Worker

$ROUTE/cache_manifest.json

I decided that I wanted to generate a cache manifest for each route. As users visit pages some assets will automatically be cached, and others will be cacheable on an opt in basis.

This will all be controlled bt a cache_manifest.

1
2
3
4
5
{
  precache: [],
  permanent_statics: [],
  offline: []
}

Multiple Hugo Outputs

By default hugo outputs html for each webpage used.

During the generation of each page I stash information about all of the assets used.

I can do this because I control the entire template stack - this was a huge win in using my own theme.

Opt in installs

Tying it all together

All that was left to do was ship the service worker on each page and give it a shot

Conclusions

Really happy with the results.

Check out my hugo theme here:

The docuentation can be found here.

wb_sunny