I cant seem to be able to cache these two files that are essential to the functionality of my PWA

Below is my app file structure:

apps.js
package.json
package-lock.json
.env
README.md

|--public
|--|
|--css
|--javascripts
|--images
|--modules
|--manifest.json
|--service-worker.js
|--views
|--|
|--driversLogin.ejs
|--driverLoggedIn.ejs

Following is the section of my service-worker.js file that seems to cause the error message: Uncaught (in promise) TypeError: Failed to execute 'add' on 'Cache': Request failed

const cacheName = 'scan-and-save-cache_V004';
const filesToCache = [
    '/',
    '../views/driversLogin.ejs',
    // '../views/driverLoggedIn.ejs',
    '/css/bootstrap.min.css',
    '/css/styles.css',
    '/images/favicon.ico',
    '/images/scan&SaveHearderIcon.png',
    '/images/scan&SaveLogoSmall.png',
    '/javascripts/jquery-3.4.1.js',
    '/javascripts/popper.min.js',
    '/javascripts/bootstrap.min.js',
    '/javascripts/main.js',
    '/javascripts/app.js',
];

It seems like the service-worker.js isnt able to cache the two files: ../views/driversLogin.ejs, ../views/driverLoggedIn.ejs. When I comment them out as seen below the error message disappears and I am able to run my PWA perfectly.

const cacheName = 'scan-and-save-cache_V004';
const filesToCache = [
    '/',
    // '../views/driversLogin.ejs',
    // '../views/driverLoggedIn.ejs',
    '/css/bootstrap.min.css',
    '/css/styles.css',
    '/images/favicon.ico',
    '/images/scan&SaveHearderIcon.png',
    '/images/scan&SaveLogoSmall.png',
    '/javascripts/jquery-3.4.1.js',
    '/javascripts/popper.min.js',
    '/javascripts/bootstrap.min.js',
    '/javascripts/main.js',
    '/javascripts/app.js',
];

It is essential for me that these two files be cached, can you guide me on how to cache them?