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.
Hugo will generate the
manifest.jsonin 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.
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.
Comments