How to add PWA support for React?

Question

React

Good afternoon!
I am suffering for the second day, trying to convert the simplest react web application to PWA. Can't get past the Lighthouse audit. Can't fix the following issues:


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"
}

service worker:

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 completed all the commands - and nothing! I 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. All files sees, connects correctly, offline html is issued correctly, but the audit does not pass. + Everything requires some kind of PNG images, I've already stuffed more than a dozen of them, and Lighthouse won't stop. Help!)