I can't get Lighthouse to work in Chrome for my first PWA. I've been trying to do this for around 4 hours and I'm just lost. Nothing makes sense. It is extremely basic code that I've included below.
The problem is that when I load the page normally everything works correctly, but when I try to run Lighthouse it hangs and then timesout with the attached image errors. I get no report. Am I doing something stupid? What am I missing?
Note: I added the kill code to ensure there's no duplicate service workers and the like but it doesn't matter if I remove it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a PWA Test">
<title>Hello</title>
<link rel="shortcut icon" href="./se5.ico" type="image/x-icon">
<link rel="manifest" href="./.webmanifest">
<link rel="stylesheet" href="./styles/main.css?1">
<script type="text/javascript" src="./scripts/luke.js?4"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
console.log('luke: Killed SW:', registration.scope);
registration.unregister()
}
})
navigator.serviceWorker.register('./sw.js?5', {
scope: './',
registrationStrategy: "registerImmediately"
})
.then(function(registration) {
console.log('Registration successful, scope is:', registration.scope);
})
.catch(function(error) {
console.log('Service worker registration failed, error:', error);
});
}
</script>
<body>
<h1>Hello World 3</h1>
<img src="./images/se_logo_192.png" alt="test">
</body>
<footer>
</footer>
</html>
sw.js
console.log('SW: I am a Service Worker!');
const filesToCache = [
'./styles/main.css',
'./images/se_logo_192.png',
'./images/se_logo_512.png'
];
const staticCacheName = 'pages-cache-v1';
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
console.log('SW: Complete!');
return cache.addAll(filesToCache);
}
)
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
});
.webmanifest
{
"short_name": "short_name",
"name": "name",
"description": "description",
"icons": [
{
"src": "./images/se_logo_512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "./images/se_logo_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "./index.html",
"background_color": "#3367D6",
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
"scope": "./",
"theme_color": "#3367D6",
"shortcuts": [
],
"screenshots": [
]
}
Edit: added pictures of the network filter to show there's nothing there and no options to unblock either.
