CSS link from pipeline for service worker

support
1

Following this thread I managed to set up service workers for my site. However, I’m running into a problem where my styles.css file fetch gives a 404 because the Hugo pipeline outputs styles.min.*.css where * is a random string.

Given that * is randomly generated during compile time, how would I specify the correct link in my sw.js file?

2

easy way

put the css in /static

the hard way

what I would try - not tested!

in CONFIG

  • define new output format JS
  • define permalink for JS

JS Template

  • create a template /layouts/JS/single.js
  • put only {{ .Content }} in it

The JS

  • put the js under /content/JS and add a frontmatter
  • copy the processing part for your CSS in the JS and use .PermaLink
3

I’m not sure how it would work with my CSS file in /static. I’m used to placing it in /assets in my theme and using resources.Get from there. This is also where the * gets added. Apparently from fingerprinting. So I tested this out and I can get the service worker working without fingerprinting because then the file name remains a predictable styles.min.css which I can hard code into sw.js.

So I guess, given this progress, the question should simply be about how one can fingerprint and use service workers at the same time. I’ll give your harder approach a try now.

Thank you.