I'm trying to configure a custom service workers on Vuejs with Webpack but it's not completely working with the events or workbox (depending where I'm calling the sw.js file.

Following workbox guide from Google I've configured the SW to be registered and caching data but as I mentioned before depending on where I call the SW is doing wrongs things (or maybe I'm just dumb).

For example, if I register the file SW on index.html like this:

index.html

<script>
    // Check that service workers are registered
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('service-worker.js').then(registration => {
                // registration.pushManager.subscribe({ userVisibleOnly: true, 
                //   applicationServerKey: key });
                console.log('SW registered: ', registration);
            }).catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
        });
    }
</script>

... my SW is registered but it's unable to catch events (offline and online) on the SW file showed below (service-worker.js) BUT I'm able to use workbox:

service-workers.js

import store from './store/index';

window.addEventListener('online', () => {
  console.log('Ando online compa');
  store.dispatch('IndexedDB/prueba');
});

window.addEventListener('offline', () => {
  console.log('Ando offline compa');
  store.dispatch('IndexedDB/prueba');
});

window.addEventListener('push', (event) => {
  const title = 'Get Started With Workbox';
  const options = {
    body: event.data.text(),
  };
  event.waitUntil(window.registration.showNotification(title, options));
});

workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.precaching.precacheAndRoute(self.__precacheManifest);

... If I remove the script tag from index.html and put a call on the main.js and modify the service-worker.js like this:

main.js

import './vapidHelper';
import Vue from 'vue';
import './plugins/vuetify';
import VueSocketIO from 'vue-socket.io';
import App from './App.vue';
import router from './router';
import store from './store';
import './axiosConfig';
import initDB from './indexedDB/IndexedDB';
import './service-worker'; // <---- LINE

Vue.config.productionTip = false;
...

service-worker.js

import store from './store/index';

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js').then((registration) => {
      // registration.pushManager.subscribe({ userVisibleOnly: true, 
      //   applicationServerKey: key });
      console.log('SW registered: ', registration);
    }).catch((registrationError) => {
      console.log('SW registration failed: ', registrationError);
    });
  });

  window.addEventListener('online', () => {
    console.log('Ando online compa');
    store.dispatch('IndexedDB/prueba');
  });

  window.addEventListener('offline', () => {
    console.log('Ando offline compa');
    store.dispatch('IndexedDB/prueba');
  });

  window.addEventListener('push', (event) => {
    const title = 'Get Started With Workbox';
    const options = {
      body: event.data.text(),
    };
    event.waitUntil(window.registration.showNotification(title, options));
  });
}

workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.precaching.precacheAndRoute(self.__precacheManifest);

... On this situation, I'm able to hear the events, but I'm UNABLE to use workbox (I receive an error on console that it's undefined.)

Do you have an idea what could be doing wrong?