Go offline! Service Workers with Hugo

Announcements
1

After mobile first, offline first and progressive web apps (PWA) are the current trend at the moment. Service Workers are crucial for both of them. A service worker is basically a script acting like a proxy between the browser and the network. You will find a simple example how to install a service worker for your Hugo satic site to make it blazing fast.

I have recently wrote an article about Service Workers with Hugo.

Topics covered

  • Installing a Service Worker from an Example in Hugo
  • Deliver a custom offline page if a user has no network and the page is not in cache
  • Deliver a custom 404 page if a user access lands requests a page with Status Code >= 400
  • Add a manifest.json for mobile homescreen appearance configuration like splash-screens, orientation lock or background tasks.

Article Link: gohugohq.com/howto/go-offline-with-service-worker
Example Service Worker used: https://github.com/wildhaber/offline-first-sw

Hope you enjoy and feel free to ask questions.

10 Likes
2

Hah… after having conducted a short search and found nothing with google I gave it a try and made a offline version for a singlepage hugo site (using Dimension theme) and documented it shortly on http://rac.su/post/hugo/pwa/

Wanted to create a topic for PWA to ask what techniques / scripts others use already that I haven’t seen yet.

Have to go through your post first but seems like a good approach covering multiple parts of PWA (while I just used the lazy sw-precache module with gulp.

The only other PWA experiment I know of is from Justin at https://github.com/justinribeiro/blog-pwa which is again a different approach bending it to have hugo generating the posts as json files to load it as data in a polymer app with the fallback of a static version in case javascript is not available (blocked) on the user side.

2 Likes
3

Wondering if either have you had an issue when the content on a page changes where it’s not changing on browsers because of the cache? Or, what provisions are there for this in these techniques?

Also, FYI. We’ve had a couple of talks at our Meetup about offline-first stuff. This one, by Jeff Posnick at Google, is Jekyll-based, but the concepts are the same. https://www.youtube.com/watch?v=_kJMjJ1tm6o&t=97s

2 Likes
4

Yes I’m also looking for fails, so far I don’t have much experience but from my tryouts I have seen that it failed at one point (on a mobile phone in the Facebook browser on Android) as well as on Chrome on that phone (but did not happen on another phone and for chrome clearing the offline files resolved it). Theoretically it should update it whenever something in the ServiceWorker changes and from comparing different runs it seems like sw-precache is doing a good job in changing the hashes only for the changed content which should trigger updating the SW in the browser. Need to analyze the generated SW a bit more to see if it really handles clearing the local cache on updates well. I wonder how well it works for a bigger Hugo blog with dynamic caching. The ServiceWorker would need to take care of clearing the cache on changes but I still don’t know exactly the consequences of messing up the ServiceWorker badly and how to recover from that automatically.

2 Likes