Was playing around with the progressive web app. I've trying to make web app install banner working but I keep receiving service worker does not successfully serve the manifest's start_url after I debugging using Lighthouse (Picture below). Currently I'm hosting my website using azure.
NEW: I checked all my cache, start_url, and also my service worker to see everything match. But it still gives me the same error.
I'm not sure if it's my start_url or my service-workerproblem. Below is my code.
manifest.json
{ "short_name": "MY EXPERTS", "name": "MYEXPERT", "icons": [ { "src": "Images/petronas_logo_192.png", "type": "image/png", "sizes": "192x192" }, { "src": "Images/petronas_logo_192.png", "type": "image/png", "sizes": "512x512" } ], "background_color": "#FFFFFF", "theme_color": "#67BCFF", "display": "standalone", "start_url": "/Home/Index" } AddServiceWorker.js
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'). then(function (registration) { // Registration was successful`` console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function (err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } service-worker.js
self.addEventListener('install', e => { e.waitUntil( caches.open('airhorner').then(cache => { return cache.addAll([ '/', '/?utm_source=homescreen', '/Home/About', '/Home/Index', '/Home/Contact' ]) .then(() => self.skipWaiting()); }) ) }); self.addEventListener('activate', event => { event.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); }); My Browser Cache :
