javascript - ServiceWorker not Caching Assets

Question

I am working on a Progressive Web App and I am using the Chrome Developer Tools. I have my Service Worker is installed and is activated along with the Fetch event. I have added the caching code in my sw.js file. When I reload the page and look in the Cache Storage. I do see the static-site but nothing looks cached.

sw.js script

const staticCacheName = 'site-static';
const assets = [
    '/',
    '/index.html',
    '/app.js',
    '/script.js',
    '/style.css',
    'https://fonts.googleapis.com/css?family=Audiowide',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW',
    '/images/AppliedArts.PNG',
    '/images/MasterBA.png',
    '/images/MscCS.png',
    '/images/MscEngineer.png',
    '/images/UXDesign.png'
];
// install event
self.addEventListener('install', evt => {
    //console.log('service worker installed');
    evt.waitUntil(
      caches.open(staticCacheName).then((cache) => {
        console.log('caching shell assets');
        cache.addAll(assets);
      })
    );
  });

question from:https://stackoverflow.com/questions/65944606/serviceworker-not-caching-assets

Answer 1

I have found the issue. The entire setup was correct. The issue was in the urls I was including in 'assets' in the 'sw.js' file. The forward slash in front of the url was causing the issue. The best way to troubleshoot this is to eliminate all url and add 1 by 1.

const assets = [
    '/',
    'index.html',
    'images/AppliedArts.PNG',
    'images/MasterBA.png',
    'images/MscCS.png',
    'images/MscEngineer.png',
    'images/UXDesign.png',
    'images/logo.png',
    'style.css',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
    'https://fonts.googleapis.com/css?family=Audiowide',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js',
    'manifest.json',
    'app.js',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
    'script.js'
 
];