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.

Add this module
[[module.imports]]
path = "github.com/davidsneighbour/hugo-pwa"
disable = false
ignoreConfig = false
ignoreImports = false
Latest Version v1.0.0 (2022-06-30)
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

Some things you need to know

These are notes about conventions in this README.md. You might want to make yourself acquainted with them if this is your first visit.

The following documentation will refer to all configuration parameters in TOML format and with the assumption of a configuration file for your project at /config.toml. There are various formats of configurations (TOML/YAML/JSON) and multiple locations your configuration can reside (config file or config directory). Note that in the case of a config directory the section headers of all samples need to have the respective section title removed. So [params.dnb.something] will become [dnb.something] if the configuration is done in the file /config/$CONFIGNAME/params.toml.

Installing

First enable modules in your own repository if you did not already have done so:

1hugo mod init github.com/username/reponame

Then add this module to your required modules in config.toml.

1[module]
2
3[[module.imports]]
4path = "github.com/davidsneighbour/github.com/davidsneighbour/hugo-pwa"
5disable = false
6ignoreConfig = false
7ignoreImports = false

The next time you run hugo it will download the latest version of the module.

Updating

1# update this module
2hugo mod get -u github.com/davidsneighbour/github.com/davidsneighbour/hugo-pwa
3# update to a specific version
4hugo mod get -u github.com/davidsneighbour/github.com/davidsneighbour/[email protected]
5# update all modules recursively over the whole project
6hugo mod get -u ./...

Configuration

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

1[outputs]
2home = [ ... others ... , "manifest" ]

or in config/_default/outputs.toml:

1home = [ ... others ... , "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>):

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