Progressive Web App

PWAs(Progressive web apps ) are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.

We are in the experimental stage of PWA, but some major features have been added, such as install site to home screen, precache files and available offline.

Site Parameters

Firstly, we need to specify the pwa parameter, even it is empty.

Name Type Default Description
pwa Object -
pwa.manifest Object - Web app manifest
pwa.manifest.name String - Default to site title
pwa.manifest.short_name String - Short name of your site.
pwa.manifest.display String standalone
pwa.manifest.description String - Default to site description.
pwa.manifest.theme_color String -
pwa.manifest.background_color String -
pwa.manifest.icons Arrary -
pwa.manifest.icons.sizes String - Icons' sizes, i.e. “96x96”
pwa.manifest.icons.src String - Icon’s URL

Manifest

Secondary, we add a custom output format called MANIFEST in the configuration file, in order to make our site installable.

1[mediaTypes]
2  [mediaTypes."application/manifest+json"]
3    suffixes = ["json"]
4  
5[outputFormats]
6  [outputFormats.MANIFEST]
7    name = "manifest"
8    baseName = "manifest"
9    mediaType = "application/manifest+json"

And then append the MANIFEST to your home’s output.

1[outputs]
2  home = ["HTML", "RSS", "JSON", "MANIFEST"]

Hugo will generate the manifest.json in the site root.

Offline

The offline page will be shown in the case of requesting a new page without network.

We need to create an offline page called offline/index.md in the content directory with the following front matter.

1+++
2title = 'Offline'
3layout = 'offline'
4+++

Precache

Currently, we haven’t provide any way to precache custom files yet. If you need this feature, please feel free to let us know.

Copyright

Comments