I am new to pwa, using service worker with cache list as below

var filesToCache = [
'',
'favicon.ico',
'index.html',
'login.html',
'forgot-password.html',
'select-path.html',
'station-based.html',
'train-based.html',
'../index.html',
'/assets/css/app.min.css',
'/assets/js/jquery.min.js',
'/assets/js/popper.min.js',
'/assets/js/bootstrap-material-design.min.js',
'/assets/js/material-kit.min.js',
'/assets/js/jquery.validate.min.js',    
//  '/assets/js/validate.js',               // raise issue 
'/assets/js/app.js',  
//   '/services/login.js',                    // raise issue 
'/assets/images/chiltern-logo.svg', 
];

I get below error message in console on these two files

 /assets/js/validate.js
 /services/login.js

Uncaught (in promise) TypeError: Request failed

although these two files exist in belonging location no any more error on console regarding there files my complete service worker code is as below

var cacheName = 'v4';
var lastCacheName = 'v3';
var filesToCache = [
'',
'favicon.ico',
'index.html',
'login.html',
'forgot-password.html',
'select-path.html',
'station-based.html',
'train-based.html',
'../index.html',
'/assets/css/app.min.css',
'/assets/js/jquery.min.js',
'/assets/js/popper.min.js',
'/assets/js/bootstrap-material-design.min.js',
'/assets/js/material-kit.min.js',
'/assets/js/jquery.validate.min.js',
//    '/assets/js/validate.js',               // raise issue 
'/assets/js/app.js',  
//  '/services/login.js',                    // raise issue 
'/assets/images/chiltern-logo.svg', 
];

 self.addEventListener('install', function(e) {  
 e.waitUntil(
 caches.open(cacheName).then(function(cache) {
  console.log('[ServiceWorker] Caching app shell');
  return cache.addAll(filesToCache);
 })
 );
 });

 self.addEventListener('activate',  event => {    
 event.waitUntil(
  caches.keys().then(function(cacheNames) {
    console.log('[ServiceWorker] activate',cacheName);
    return Promise.all(
      cacheNames.filter(function(cacheName) {
        // Return true if you want to remove this cache,
        // but remember that caches are shared across
        // the whole origin
      }).map(function(cacheName) {
        console.log('[ServiceWorker] activate delete',cacheName);
        return caches.delete(cacheName);
      })
     );
   })
   );
   });

self.addEventListener('fetch', event => {  
event.respondWith(
 caches.match(event.request, {ignoreSearch:true}).then(response => {
  return response || fetch(event.request);
 })
);
});

I am unable to understand what the issue is. Please help.

I suspect the Service Worker cannot find those two files, so I would start by checking if they are spelled correctly/exist in that location etc.

The code you are using has a ".then" with no ".catch" which is why you have an uncaught error as any rejected Promise will generate an error which you do not handle.

Your array of file names has a typo. The final one should not have a comma after the string and before the square bracket. I am also unsure why the first entry in that array is a blank string.