From static site to application with PWA

tips & tricks
1

Hi,

I just realize that my completely static site (https://recomedicales.fr/) 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.

 [outputFormats.SW]
  mediatype = "text/javascript"
  baseName = "sw"
  isPlainText = true

Thanks a lot,
Hugo and PWA are awesome.

1 Like
3

related: A programmatic PWA (service worker) module

1 Like
4

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
5

Hello, any news on this front ?

6

Hi, yes, just have to add these lines:

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

and

[outputFormats.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 = [
    'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2',
    'https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2',
    '/sass/style.css',
    'https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.min.js',
    'https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js',
    'https://cdn.jsdelivr.net/npm/djibe-material@4.6.2-1.0/js/material.min.js',
    '/js/search.min.3575570338356f92346231966c2b380dfc1d6d652428d9778eb15afb44ae5e9dc94a83a0942ada32b8878ff889a9e736.js',
    'https://cdn.jsdelivr.net/npm/apexcharts@3.37.0/dist/apexcharts.min.js',
    'https://cdn.jsdelivr.net/npm/mermaid@10.1/+esm',
    'https://cdn.jsdelivr.net/npm/ion-rangeslider/js/ion.rangeSlider.min.js',
    '/recommandations/',
  {{- range $index, $value := where site.RegularPages "Section" "recommandations" -}}
    {{ if $index }}, {{ end }}
    '{{ .RelPermalink }}'
  {{- end -}}
  ];

  event.waitUntil(
    caches.open(cacheName)
    .then((cache) => {
      return cache
          .addAll(
            urlsToPrefetch.map((urlToPrefetch) => {
              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
7

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

1 Like