Using Hugo functions in sw.js

support
1

Hello.

I’m trying to get Hugo to build a service worker for me. There are a lot of blogs and tutorials around, but, all I found included me placing a generated sw.js file in static. I’d rather configure Hugo to build one for me if it’s possible.

I want to cache my bundle.min.js which I’m generating in my layout templates using:

{{ $js := resources.Match "js/*.js" | resources.Concat "js/bundle.js" | minify }}
<script src = "{{ $js.RelPermalink }}"></script>

Can I do the same thing in the JS file too?

I am generating sw.js like this:

In my config.toml:

[outputs]

  home = ["HTML", "JSON", "SW"]

[outputFormats]

  [outputFormats.SW]

    baseName = "sw"

    mediaType = "application/javascript"

    path = "/"

I created a layouts/index.sw.js file with my JS logic in it. But adding the same code from my layouts to this service worker file doesn’t work. Is there some special way to get it working or does it not work at all?

2

Have a look at resources.ExecuteAsTemplate.

3

That’s perfect. Thanks!

4

So, I’m not sure if I did it correctly, but, I can see some unwanted code in my generated sw.js.

Here’s what I did:

I created a sw.js in assets.

In my layouts/_default/baseof.html, I added:

{{ $swJS := resources.Get "sw.js" | resources.ExecuteAsTemplate "sw.js" . | minify }}

and used it in the same file as:

if ('serviceWorker' in navigator)
  {
    navigator.serviceWorker.register('{{ $swJS.RelPermalink }}').then(function(registration)
      {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }).catch(function(err)
        {
          console.log('ServiceWorker registration failed: ', err);
        });
  }

My original sw.js starts like this…

'use strict';
var cacheVersion = 1;
var currentCache = 'Offline cache v' + cacheVersion;
var offlineUrl = '/offline/';

But, the generated sw.js starts like this:

(() => {
  var __commonJS = (callback, module) => () => {
    if (!module) {
      module = {exports: {}};
      callback(module.exports, module);
    }
    return module.exports;
  };

  // sw.js
  var require_stdin = __commonJS((exports) => {
    "use strict";
    var cacheVersion = 1;
    var currentCache = "Offline cache v" + cacheVersion;
    var offlineUrl = "/offline/";

Is that normal?

EDIT: Also, it’s not minified.

5

No, the above makes no sense to me, so I suggest you double check your files …

6

Well, I don’t know what exactly should I recheck. If the way I have added the JS is correct, that’s what I’m getting.

Here’s my repo you’d like to check on your end: https://github.com/Hrishikesh-K/Portfolio

EDIT: The service worker works fine though even in production. No errors in browser and all assets are getting cached properly, even the redirect is working.

7

Nevermind. It was probably just me. I just ran a hugo mod clean and then hugo server. It’s working fine. Sorry to bother you and thanks for the help!

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.