PWA

07 Jun 2023

Build a Progressive Web App

1 minute reading time

#Setup

PWA cannot cache external assets.

To deploy the site as a PWA, set the filename in config.extra.manifest and configure the manifest in the project's static directory:

{
  "name": "Halve-Z",
  "short_name": "Halve",
  "description": "Retro theme for Zola",
  "lang": "en-US",
  "display": "standalone",
  "start_url": "/",
  "id": "/",
  "scope": "/",
  "orientation": "any",
  "prefer_related_applications": false,
  "background_color": "#2C2D32",
  "theme_color": "#2C2D32",
  "categories": [
    "developer"
  ],
  "shortcuts": [
    {
      "name": "Journal",
      "url": "/posts"
    },
    {
      "name": "Projects",
      "url": "/projects"
    }
  ],
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}