The workbox is not connected. What is the reason? - progressive-web-apps

Question

I connect workbox on the basis of official documentation. It turns out the following code.
  
self.addEventListener ('install', (event) => {
  importScripts ('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
    if (workbox) {
        console.log (`Yay! Workbox loaded 🎉`);
    } else {
        console.log (`Boo! Workbox did not boot 😬`);
    }
    workbox.routing.registerRoute (
        /\.js$/,
        new workbox.strategies.NetworkFirst ()
    );
    workbox.routing.registerRoute (
        // Cache image files.
        /\.(?:png|jpg|jpeg|svg|gif)$/,
        // Use the cache if it's available.
        new workbox.strategies.CacheFirst ({
            // Use a custom cache name.
            cacheName: 'image-cache',
            plugins: [
                new workbox.expiration.Plugin ({
                    // Cache only 20 images.
                    maxEntries: 20,
                    // Cache for a maximum of a week.
                    maxAgeSeconds: 7 * 24 * 60 * 60,
                })
            ],
        })
    );
    self.skipWaiting ();
    console.log ('Service Worker has been installed');
});
The workbox is loaded correctly, but no further actions are performed. NetworkFirst issues the following warnings.
Event handler of 'fetch' event must be added on the initial evaluation
of worker script.
Event handler of 'message' event must be added on the initial
evaluation of worker script.
Nothing appears in the cache. I do not use Node.js, but as far as I understood from the documentation and responses on the server, this is not necessary. So what is the problem after all? Is there no Node or am I connecting something wrong?

Answer 1

The error message is telling you what's wrong.
Event handler of 'fetch' event must be added on the initial evaluation of worker script.
In your case, the script file is being evaluated and fetch and message event listeners are not defined. The install event triggers and then workbox tries to define the other listeners. Those other listeners need to be defined in the initial script that's evaluated.
The easy solution is you don't need the install listener. Remove it and import and use workbox directly in the service worker.
Also note that you should only use importScripts at the top level of your script.