Как добавить поддержку PWA для React?

Question

[mefisto661]

Добрый день!
Мучаюсь второй день, пытаясь конвертировать простейшее веб-приложение на react в PWA. Никак не могу пройти аудит Lighthouse. Не могу поправить следующие проблемы:


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'))
    })
  )
});

Пересмотрел все гайды на youtube, уже как собачка выполнил послушно все команды - и ничего! Склонировал репозитории, которые оставили авторы этих youtube-роликов (например: https://github.com/adrianhajdin/project_weather_pwa
https://github.com/vladilenm/pwa-intro
) - тоже ничего не работает. Использую macOs catalina 10.15, может тут какая-то особая политика кэширования/обновления react приложения?, я просто уже не знаю в чем искать проблему. Все файлы видит, подключает корректно, offline html выдается корректно, но аудит не проходит. + Все требует какие-то PNG картинки, я напихал их уже больше десятка, а Lighthouse никак не замолкнет. Помогите!)