如何将 React.js 应用程序转换为 PWA？

Question

试图将最简单的 React Web 应用程序转换为 PWA 的第二天，我感到很痛苦。我就是无法通过灯塔审核。无法解决以下问题： 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'))
    })
  )
});

我查看了 youtube 上的所有指南，已经像一条狗一样，乖乖地遵循了所有命令 - 什么都没有！克隆了这些 youtube 视频的作者留下的存储库（例如：https://github.com/adrianhajdin/project_weather_pwahttps://github.com/vladilenm/pwa-intro） - 也没有任何效果。我正在使用 macOS Catalina 10.15，也许有一些缓存/更新反应应用程序的特殊策略？，我只是不知道要寻找什么问题。 React.js 看到所有文件，连接正确，离线 html 发出正确，但审核没有通过。 + 灯塔需要一些PNG图片，我已经塞了十几张，但灯塔还在骂人。救命！）

Answer 1

“可安装” - 是在设备上安装 PWA 的唯一必要条件））我以这种方式解决了我的问题 - 我只是没有更改 react.js 生成的原始 manifest.json。