渐进式网络应用

Question

我面临一个巨大的技术问题。我看不到“添加到主屏幕”。但是，我确实遵循了安装指南。我想知道我是否造成了一个意外的小故障以及为什么它没有出现。

网站链接：https://www.bclover.net

我提前道歉，该网站是法语的。我希望这不会对您的帮助造成太大的阻碍。

谢谢

编辑：

Manifest.json

{
  "lang": "fr",
  "dir": "ltr",
  "name": "Black Clover FR",
  "short_name": "Bclover",
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/?utm_source=pwa",
  "icons": [
    {
      "src": "styles/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "styles/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Lighthouse

Answer 1

我查看了您的网站，并在控制台中看到错误，显示 sw.js 文件正在响应服务器并出现 404 错误：

所以你必须检查文件是否存在于你的服务器上。

我建议您关注 Google 的 this tutorial (web.dev) - 写得很好。

在您的情况下，您必须注册service worker，this article (web.dev) 中显示了如何注册

我建议你使用Workbox library（这也是来自 Google）来减轻制作 PWA 网络应用时的痛苦