Enabling service worker using workbox

Question

Working on a react PWA that uses webpack as build system. For service worker we are using workbox version 2.1.2.

• Having a GET api http://localhost:5000/dist/abc/123/ that responds with JSON. Registered the route with

  'use strict';
   importScripts('workbox-sw.prod.js');
   const workboxSW = new WorkboxSW({
      clientsClaim: true,
      skipWaiting: true
   });
   workboxSW.LOG_LEVEL = 'debug';
   workboxSW.precache([]);
   workboxSW.router.registerRoute(
            'http://localhost:5000/dist/abc/123',
             workboxSW.strategies.staleWhileRevalidate({
                   cacheName: 'apis',
                   cacheExpiration: {
                       maxEntries: 50,
                       maxAgeSeconds: 30 * 24 * 60 * 60
                   },
                   cacheableResponse: {statuses: [0, 200]}
              })
           );
  self.addEventListener('install', () => {
     self.skipWaiting();
  });
  

Made sure new service worker got loaded. When the API call return with status as 200, there is NO cache apis created under cache storage. Hence it's not working offline too, see No cache "apis" Verified the following,

• Request made to correct URL
• code flow hits registerRoute during service worker installation phase
• There is no error messages. Debug message also not giving any clues. Is there any way to enable more debugging?
• Service worker is registered under proper scope, Debug message Service Worker registration successful with scope: http://localhost:8081/dist/,

API: http://localhost:5000/dist/abc/123

API to which call is made, http://localhost:5000/dist/abc/123/. Note that it's cross-site call, base page from which the call is made is http://localhost:8000. As mentioned before the API call is successful and returns response with status 200.

I am pretty new to serviceworker/workbox. Any directions on this is much appreciated.

Answer 1

You should try running your app with https and also pass cors parameter in your options

As referred in mdn docs https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API