From static site to application with PWA


I just realize that my completely static site ( could become a mobile application at a glance, thanks to PWA.

I already had caching feature thanks to An attempt at a minimal viable service worker. · GitHub

Now I want to use the install function from serviceWorker (self.addEventListener('install', function(event) {).

Hence I need the complete list of files to install in my serviceWorker.js file, but I failed telling Hugo to range through content files to create a javascript array of those necessary files.
I tried to define a new outputformat for my serviceWorker but failed.

  mediatype = "text/javascript"
  baseName = "sw"
  isPlainText = true

Thanks a lot,
Hugo and PWA are awesome.

1 Like

related: A programmatic PWA (service worker) module

1 Like

Hi, thanks for your answer.

I already investigated this.
But by installable it just means a shortcut on home screen.

I mean caching all required files to play offline like a real native application.

I’m on it (thanks to Chat GPT because my Node knowledge is 0).

I’ll share my results

1 Like

Hello, any news on this front ?

Hi, yes, just have to add these lines:

config.toml : home = ["HTML", "JSON", "RSS", "WebAppManifest", "WORKER"]


  mediaType = "text/javascript"
  baseName = "sw"
  isPlainText = true

It will produce a /sw.js serviceWorkerFile.

Add this to your serviceWorker layout: layouts/index.js

// Install the app by preloading all recommandations

self.addEventListener('install', (event) => {
  const urlsToPrefetch = [
  {{- range $index, $value := where site.RegularPages "Section" "recommandations" -}}
    {{ if $index }}, {{ end }}
    '{{ .RelPermalink }}'
  {{- end -}}

    .then((cache) => {
      return cache
   => {
              return new Request(urlToPrefetch, { mode: "no-cors" });
          .then(() => {
            console.log("All resources have been fetched and cached.");
    .catch((error) => {
      console.error("Pre-fetching failed:", error);

Problem is: it will preload all files for every visitor.
I need to call this serviceWorker install event only when user clicks an “Install app” button.

The rest of my serviceWorker is inspired by: An attempt at a minimal viable service worker. · GitHub

1 Like

You could see HugoMods PWA too: Hugo PWA Module - Docs - Hugo Modules