I am getting the above failure in my lighthouse audit. Having looked through SO and here it "should" be working.
There are no errors in the console.
This is the Manifest: -
{
"short_name": "Brotkrumen",
"name": "Brotkrumen Web App",
"description": "Native Background Geolocation POC",
"icons": [
{
"src": "gingerbreadhouse.png",
"sizes": "48x48 128x128 144x144 192x192 512x512",
"type": "image/png"
}
],
"start_url": "/TravelManager.html",
"background_color": "#00ccdd",
"theme_color": "#00ccdd",
"display": "fullscreen"
}
This is the ServiceWorker code: -
'use strict';
/* identification division.
* program-id. echo.
* author. Richard Maher.
*/
var doryRegister = []; // Meet someone new every day.
const INTRO = "GrussGott"; // Tell clients we're new.
const FLEET_MANAGER = "/Fleet/Move"; // Starship control.
const CACHE_NAME = "BrotkrumenV1.0"
self.addEventListener('install',
function (e) {
e.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll([
'/TravelManager.html',
'/hg.png',
'/gingerbreadhouse.png',
'/striped-witch-hat.png',
'/brotkrumen.css',
'/echo.js',
'/registerserviceworker.js',
'/brotkrumen.json',
'/TravelManagerPolyfill.js',
'/HandleMap.js'
]).then(() => self.skipWaiting());
})
);
});
self.addEventListener('activate', function(e)
{
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (key !== CACHE_NAME) {
console.log('Removing cache', key);
return caches.delete(key);
}
}));
})
);
e.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', function (e) {
console.log(e.request.url);
if (e.request.url.startsWith(self.location.origin)) {
e.respondWith(
caches.match(e.request).then(function (response) {
console.log("Request " + e.request.url);
if (response) {
console.log("Response " + response.url);
if (e.request.cache === 'only-if-cached') {
e.request.mode = 'same-origin'
}
} else
console.log("No MATCH");
return response || fetch(e.request);
})
);
}
return fetch(e.request);
});
The register service worker code: -
'use strict';
/* identification division.
* program-id. RegisterServiceWorker.
* author. Richard Maher.
* version. 1.0
*/
function registerServiceWorker()
{
// Make sure SW is there
navigator.serviceWorker.register('echo.js', {scope: './'})
.then(reg => {
window.addEventListener("unload",unsubscribeTravelManager);
console.log('SW Registered');
})
.catch(err => {
console.log('SW Registration failed with ' + err);
reportError({header:"Could not register ServiceWorker",
message:err});
return;
});
// Register for Background Geolocation tracking. Take default for accuracy, max age.
navigator.serviceWorker.ready
.then(reg => {
reg.travelManager.subscribe({
minSilence: 5, // Car trip value. Collapse GPS.
maxSilence: 600, // Sanity check. Squelch off.
minProgress: 50, // Indoor accuracy an issue.
maxSnail: 55, // Brisk walk.
dropDodgy: true // Avoid wireless Pong.
})
.then(subscription => {travelSubscription = subscription}, locFail)
.catch(err => {
console.log('Travel Manager Subscription failed with ' + err);
reportError({header:"Could not subscribe to Travel Manager",
message:err});
});
});
}
function unsubscribeTravelManager(e)
{
// Tidy up
const CANCEL = true;
var shutdown = Promise.resolve(false);
if (travelSubscription)
shutdown = travelSubscription.unsubscribe(CANCEL);
shutdown
.then(success => {
console.log("Unsubscribed from TravelManager = " + success);
navigator.serviceWorker.ready
.then(reg => {
reg.unregister()
.then(success => {console.log('SW Unregistered = ' + success)})
})
})
.catch(err => console.log("Couldn't unregister SW " + err))
}
replace
"start_url": "/TravelManager.html"
with
"start_url": "."
Pilot error:-(
In the page unload event when I unsubscribed from the TravelManager I also unregistered the ServiceWorker which sort of defeated the purpose. My bad.
I think the problem is with your service worker. I haven't found any code where you've registered your service worker at a specific URL.
const serviceWorkerUrl = '/sw.js';
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register(serviceWorkerUrl).then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
You should register your service worker before you add event listener for install
, activate
& fetch
. Please follow this documentation if you want to learn more about it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.