progressive web app failed to work in offline when on live server - google-chrome-devtools

Question

I am new to pwa and service worker, I have done the adding the manifest.json and service worker file in app. It is also showing the popup for save to home screen,
But it is not working in offline mode.
offline (using dev tool in chrome) below console error message.
The FetchEvent for "https://www.iservefinancial.com/" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) # sw.js:23
sw.js:1 Uncaught (in promise) TypeError: Failed to fetch
I have also tried by changing the different urls
by trying using absolute urls like '/public/images/iserve-logo-blue.png'
and also tried by giving direct urls like in code snippet.
it is loading the resources in offline in localhost but failed to load on live server.(using chrome dev tool for offline test).
Code of the service worker file
const BASE_URL = "https://www.iservefinancial.com/";
self.addEventListener('install', function (event) {
console.log('sw installed');
event.waitUntil(
caches.open('static').then(function (cache) {
cache.addAll([
BASE_URL,
BASE_URL + 'public/js/jquery-3.2.1.min.js',
BASE_URL + 'public/images/logos/iserve-logo-blue.png',
'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
BASE_URL + 'public/css/fontawesomeak.css',
BASE_URL + 'public/css/questrial-font.css'
]);
})
);
});
self.addEventListener('activate', function () {
console.log('sw Activated');
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(function (res) {
if (res) {
return res
} else {
return fetch(event.request)
}
})
);
});
The below code i have included in PHP view File
<link rel="manifest" href="<?php echo $baseurl; ?>public/scripts/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', {
scope: '.'
}).then(function () {
console.log('Service Worker Registered');
});
}
</script>
Manifest.json
{
"name": "iServeFinancial.Com",
"short_name": "iServeFinancial",
"start_url": "https://www.iservefinancial.com/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#fff",
"theme_color": "#1770a3",
"icons": [{
"src": "https://www.iservefinancial.com/public/images/logos/iserve-logo-blue.png",
"sizes": "120x36",
"type": "image/png"
},
{
"src": "https://www.iservefinancial.com/public/images/logos/progressive.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://www.iservefinancial.com/public/images/logos/progressive1.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "https://www.iservefinancial.com/public/images/logos/progressive2.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "https://www.iservefinancial.com/public/images/logos/progressive2.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
The page should work in online as well as offline.

Answer 1

It seems your service worker is not in the same level with your root path.
Your sw.js is registered in /iserve/, and you try to cache js file in /public/js/.
Also you are using http://localhost/iserve/sw.js which I think is not the same domain as your live website, should be change into /iserve/sw.js or /sw.js depends on your response header.
If you want to serve your sw.js in different folder, you should add Service-Worker-Allowed:'/' in your response header.
Also here is the code how I cache my response to make web offline.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CURRENT_CACHES).then(function(cache) {
return fetch(event.request)
.then(function(response) {
cache.put(event.request, response.clone());
return response;
})
.catch(() =>
cache.match(event.request).then(function(response) {
return response || caches.match('/');
}),
);
}),
);
});