I am tormented for the second day trying to convert the simplest react web application to PWA. I just can't pass the Lighthouse audit. Can't fix the following problems: Lighthouse response
manifest.json:
{
"short_name": "Test App",
"name": "TestMe",
"icons": [
{
"src": "icons/icon48.png",
"size": "48x48",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon64.png",
"size": "64x64",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon72.png",
"size": "72x72",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon96.png",
"size": "96x96",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon144.png",
"size": "144x144",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon192.png",
"size": "192x192",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon512.png",
"size": "512x512",
"purpose": "any",
"type": "image/png"
},
{
"src": "icons/icon1024.png",
"size": "1024x1024",
"purpose": "any",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"orientation": "portrait"
}ServiceWorker.js
const staticCacheName = 's-app-v1'
const assetUrls = [
'index.html',
'offline.html'
]
self.addEventListener('install', async event => {
const cache = await caches.open(staticCacheName)
await cache.addAll(assetUrls)
})
self.addEventListener('activate', async event => {
const cacheNames = await caches.keys()
await Promise.all(
cacheNames
.filter(name => name !== staticCacheName)
.map(name => caches.delete(name))
)
})
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(() => {
return fetch(event.request).catch(() => caches.match('offline.html'))
})
)
});I reviewed all the guides on youtube, already like a dog, obediently followed all the commands - and nothing! Cloned the repositories left by the authors of these youtube videos (for example: https://github.com/adrianhajdin/project_weather_pwa https://github.com/vladilenm/pwa-intro) - nothing works either. I'm using macOs catalina 10.15, maybe there is some special policy for caching / updating the react application ?, I just don't know what to look for the problem. React.js sees all files, connects correctly, offline html is issued correctly, but the audit does not pass. + Lighthouse requires some PNG images, I have already crammed more than a dozen of them, but Lighthouse is still swearing. Help!)