PWA

This is a Hugo theme component with helpers to convert your static GoHugo website into a PWA .

This is work in progress and while many parts are already working, some changes to the setup will occur. Please watch the releases of this repository to be alerted about changes.

Features

• ✔️ Favicon for apps and sites
• ✔️ simple PWA setup
• ❌ Happy Google lighthouse testing
• ❌ Improvements for easier “drop in” to other websites/modules
• ❌ Add layout system for offline page creation
• ❌ Add configuration system
• ❌ improve configuration of implemented functionality in the service worker
• ❌ add detailed documentation for all configuration options

Configuration

To make this component work you need to add the manifest to your home output formats in config.toml:

[outputs]
  home = ['manifest']

outputs:
  home:
  - manifest

{
   "outputs": {
      "home": [
         "manifest"
      ]
   }
}

or in config/_default/outputs.toml:

home = ['manifest']

home:
- manifest

{
   "home": [
      "manifest"
   ]
}

You already should have an [output] section, add "manifest" to it. Do not add it anywhere other than in the home directive.

Setup layouts

In your themes header (before </head>):

{{ partialCached "head/pwa.html" . }}

This will add a link to the automatically created webmanifest with options to install the PWA. Check Detailed configuration for information how to configure the contents of this file.

In your footer layout (before </body>):

{{ partialCached "footer/service-worker.html" . }}

This will set up the service worker script in the footer of your website.

Notes:

• both layouts can be cached and contain no page-individual information
• check out the todo section of the readme for missing parts or open an issue.

Detailed configuration

… to be written …

Updating

Hugo itself will check on a regular base for updates. To force an update of this module run one of the following commands on your CLI.

hugo mod get -u github.com/davidsneighbour/hugo-pwa # or
hugo mod get -u # update all modules

Troubleshooting

Testing on local Firefox installations

It appears that the service worker needs to be manually started on local test installations in Firefox. Go to “More Tools” > “Web Developer Tools” > “Applications” > “Serviceworker” and start the service worker for testing.

CORS requests (eg. Google Fonts)

In order to explicitly trigger a cors request, and get back a non-opaque response, you need to explicitly opt-in to CORS mode by adding the crossorigin attribute to your HTML:

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">