PWA

PWA v1.0.10

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.

Add this module
[[module.imports]]
path = "github.com/davidsneighbour/hugo-pwa"
disable = false
ignoreConfig = false
ignoreImports = false
Latest Version v1.0.10 (2022-11-15)
Fix to this version
hugo mod get github.com/davidsneighbour/[email protected]

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:

1[outputs]
2  home = ['manifest']
1outputs:
2  home:
3  - manifest
1{
2   "outputs": {
3      "home": [
4         "manifest"
5      ]
6   }
7}

or in config/_default/outputs.toml:

1home = ['manifest']
1home:
2- manifest
1{
2   "home": [
3      "manifest"
4   ]
5}

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>):

1{{ 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>):

1{{ 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.

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