How to add service worker to Vue.js project?

Viewed 225

I'm trying to use a service worker in my Vue.js project. I have it functioning with a very basic worker that I just dropped into my public/ directory (example below), but this doesn't allow me to load dependencies using require(), which is what I'd like to do next.

self.addEventListener('install', event => {
  self.skipWaiting();
  console.log(self)
});

self.addEventListener('fetch',  function(event) {
  const url = new URL(event.request.url);
  console.log(url)
})

I found service-worker-loader, but it presents me with this during compilation: Syntax Error: TypeError: Cannot read property 'unlink' of null. The error persists even when I provide a serviceWorker.js file that is completely blank. My vue.config.js has the loader configured:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        { test: /serviceWorker\.js$/, use: { loader: "service-worker-loader" }}
      ]
    }
  }
}

And I'm referencing my worker using import registerServiceWorker from 'service-worker-loader!./serviceWorker';.

Am I missing something basic? What's the "standard" way to include custom service worker code into a Vue.js project?

0 Answers
Related