DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Arun Kumar
Arun Kumar

Posted on

Using serviceworker and workbox in react app

I'm trying to make a react pwa app using the service workers and Google workbox. The custom-service-worker file is in the /public folder of the react app and the default ServiceWorker.js file create by react app is in the /src.
I'm getting below error. Any idea on why this error is occuring? Should I refer to the custom-service-worker.js file in the index.html file?

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://127.0.0.1:8080/precache-manifest.293755a47c2781150c8b4c921fc7a770.js' failed to load.
    at http://127.0.0.1:8080/service-worker.js:16:1

Here is the content of the service-worker file:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
  console.log(`Yay! Workbox is loaded πŸŽ‰`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
  workbox.routing.registerRoute(
    // Cache CSS files.
    /\.css$/,
    // Use cache but update in the background.
    new workbox.strategies.StaleWhileRevalidate({
      // Use a custom cache name.
      cacheName: 'css-cache',
    })
  );
  workbox.routing.registerRoute(
    new RegExp('https://jsonplaceholder.typicode.com/posts'),
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'app-cache',
    })
  );

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.