how to use actual service worker functionality

[1337erik]

using vue cli 3, i see it creates the 'registerServiceWorker.js' file within my regular project template, however that file imports the 'service-worker.js' that is within the built dist folder..

so when I want to implement any other functionality for my service worker, i cant seem to figure out how to target it and use it. Every walk-through online tells me to attach event listeners to my service worker, but how do I identify it with this plugin?

my hunch is to use navigator.serviceWorker.. and maybe to add the logic for it into another file in the same directory as 'registerServiceWorker.js'

is there something I am missing? I guess Im asking what the proper way to use this service worker is. right now im trying to create a custom install prompt ( beforeInstallPrompt )

[praburangki]

@1337erik you can try check out here: pwa plugin

I've used the InjectManifest plugin mode and put my custom service worker in dev/service-worker.js. I've put the dev folder in the root project (not inside the src), not sure why it won't work when I put it inside src folder but putting it outside it works perfectly fine.

[jdvivar]

For someone coming here from vue cli 3, you need to read this 2 bits to understand what's happening:

• https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
• https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

[adam-t-b]

@jdvivar I had issues trying to do similar things, tho in my case I wanted a prompt to install the new service worker when it was updated. I found the answer on this stack post. The combination of the top 2 answers was what I was missing. Here's the summary.

In your vue.config.js, set workbox mode to inject the service worker. The actual service worker being generated, isn't very complex, so this is no big deal. This will also give you complete control over the service worker itself.

pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }

Then create the service-worker.js file in your public folder. Workbox will automatically inject the necessary imports in the top of your custom sw file. With a custom sw you can now add the listeners you need. Here's an example of how mine looks

self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

self.addEventListener('message',  (e) => {
  if (e.data.action === 'skipWaiting') {
    self.skipWaiting()
  }
})

Now I can use the hooks provided in registerServiceWorker.js to skip waiting on user prompt.

update (registration) {
  // Some code here to create the button and attach it to the body
  button.addEventListener('click', () => {
    registration.waiting.postMessage({ action: 'skipWaiting' })
  }
}

My use case sounds to be a little different than yours, but I think the end result is similar.

[ghost]

@jdvivar I had issues trying to do similar things, tho in my case I wanted a prompt to install the new service worker when it was updated. I found the answer on this stack post. The combination of the top 2 answers was what I was missing. Here's the summary.

In your vue.config.js, set workbox mode to inject the service worker. The actual service worker being generated, isn't very complex, so this is no big deal. This will also give you complete control over the service worker itself.

pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }

Then create the service-worker.js file in your public folder. Workbox will automatically inject the necessary imports in the top of your custom sw file. With a custom sw you can now add the listeners you need. Here's an example of how mine looks

self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

self.addEventListener('message',  (e) => {
  if (e.data.action === 'skipWaiting') {
    self.skipWaiting()
  }
})

Now I can use the hooks provided in registerServiceWorker.js to skip waiting on user prompt.

update (registration) {
  // Some code here to create the button and attach it to the body
  button.addEventListener('click', () => {
    registration.waiting.postMessage({ action: 'skipWaiting' })
  }
}

My use case sounds to be a little different than yours, but I think the end result is similar.

worked perfect for me