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.

HBS provides some basic features, 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 Array -
pwa.manifest.icons.sizes String - Icons’ sizes, i.e. “96x96”
pwa.manifest.icons.src String - Icon’s URL
pwa.precache Object - Precache assets
pwa.precache.fonts Array - Precache fonts
pwa.precache.images Array - Precache images
pwa.precache.pages Array - Precache pages
pwa.precache.scripts Array - Precache scripts
pwa.precache.styles Array - Precache styles

Manifest#

The manifest.json will be generated automatically.

Offline#

Offline Page#

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.

+++
title = 'Offline'
+++

Offline Image#

Same as offline page, there is an offline image for requesting images without network. HBS provides a built-in offline image with the filename assets/images/offline.png. You can override it by creating your own offline image with the same filename under your site root.

Precache#

  • params. 
[pwa]
  [pwa.precache]
    fonts = ['/assets/katex/fonts/KaTeX_Math-Italic.woff2']
    images = ['/images/logo.webp', '/images/profile.webp']
    pages = ['/']
    scripts = ['/assets/js/foo.js']
    styles = ['https://fonts.googleapis.com/css2?family=Roboto&display=swap']

pwa:
  precache:
    fonts:
    - /assets/katex/fonts/KaTeX_Math-Italic.woff2
    images:
    - /images/logo.webp
    - /images/profile.webp
    pages:
    - /
    scripts:
    - /assets/js/foo.js
    styles:
    - https://fonts.googleapis.com/css2?family=Roboto&display=swap

{
   "pwa": {
      "precache": {
         "fonts": [
            "/assets/katex/fonts/KaTeX_Math-Italic.woff2"
         ],
         "images": [
            "/images/logo.webp",
            "/images/profile.webp"
         ],
         "pages": [
            "/"
         ],
         "scripts": [
            "/assets/js/foo.js"
         ],
         "styles": [
            "https://fonts.googleapis.com/css2?family=Roboto\u0026display=swap"
         ]
      }
   }
}