为什么我的 Web 清单显示未检测到匹配的 Service Worker？

如何解决为什么我的 Web 清单显示未检测到匹配的 Service Worker？

我正在尝试向我的网站添加一个网络清单，我对它很陌生，所以我刚刚阅读了一个教程并以为我已经完成了，当我测试它时，我看到错误“没有检测到匹配的服务工作者。你可能需要重新加载页面，或检查当前页面的 Service Worker 范围是否包含清单中的范围和起始 URL。”这让我很困惑，我在互联网上搜索并找不到答案。如果你们中有人能帮助我，那就太好了！

MANIFEST.WEBMANIFEST：

    {
    "short_name": "Hi!","name": "Longgg name","icons": [
      {
        "src": "home/icon.png","type": "image/png","sizes": "192x192"
      },{
        "src": "home/icon2.png","sizes": "512x512"
      }
    ],"start_url": "https://example.com/home","background_color": "#df4949","display": "standalone","scope": "https://example.com/home","theme_color": "#df4949","shortcuts": [
      {
        "name": "Scroll to top","short_name": "To Top","description": "Scroll to the top of the page!","url": "home#home","icons": [{ "src": "/icons/top.png","sizes": "192x192" }]
      },{
        "name": "Contact Us","short_name": "Contact","description": "Want to get in touch? Contact us for a no-obligation quote!","url": "home#contact-form","icons": [{ "src": "/icons/letter.png","sizes": "192x192" }]
      }
    ],"description": "Description...!","screenshots": [
      {
        "src": "screenshots/1.png","sizes": "969x1292"
      },{
        "src": "screenshots/2.png","sizes": "969x1292"
      }
    ],"prefer_related_applications": false

}

我不知道这是否相关，但这是我引用该文档的方式：

<link rel="manifest" href="/manifest.webmanifest">