Introduction

This blog often serves as a testbed for some of the other ideas I’m working on. Some of these are going to need strong mobile presence. Long term, if I start to get some traction on any of these projects I would like to learn more about Google’s Flutter and build full mobile apps but until then, I’m one person and I need something to get prototypes out quickly.

That’s why I’ve been playing with mobile friendly design, Lighthouse audits and PWA features. So I set the goal of getting this blog to a 100% PWA Lighthouse score quickly. In addition to the Lighthouse score I wanted “add to home screen” enabled for both Android and iOS devices (others considered a bonus).

PWA

I considered Google’s Workbox and will absolutely keep it in mind for future use but for this particular implementation, it looked a bit overly complicated and I instead went with Tal Ater’s upup script.

As per the tutorial I placed upup.min.js and upup.sw.min.js into my Hugo theme’s static folder. This will place these at the root of the site when built which is important as the upup tutorial points out that the service worker files should be at the base of your hierarchy in order to keep everything you want to cache in scope. In my instance, I also had to make a couple changes to upup.min.js.

FROM:

var n={"service-worker-url":"upup.sw.min.js"}
...AND...
{scope:"./"}

TO:

var n={"service-worker-url":"/upup.sw.min.js"}
...AND...
{scope:"/"}

I also slightly modified the header script to include Hugo generated pages…

<script src="/upup.min.js"></script>
<script>
    UpUp.start({
        'content-url': '{{ .Page.Permalink }}',
        'assets': ['/css/main.css', '/css/bootscrap.min.js']
    });
</script>

Home Screen Icons:

Setting up home screen icons was almost too easy thanks to [https://realfavicongenerator.net/]. They claim they’ll have you sorted in 5 minutes and that’s pretty close even when importing into Hugo. They deliver all of the icon files and the head code required. I just copied the icon files into my theme’s static folder and pasted the code into my theme’s header partial file.

Results: