Flutter pwa app 未检测到服务人员答案

【问题标题】：Flutter pwa app no service worker detectedFlutter pwa app 未检测到服务人员
【发布时间】：2021-05-14 04:55:06
【问题描述】：

我知道flutter supports PWA，但我无法在我的 Flutter Web 应用程序中启用它。 My web app 与所有 requirements 见面以获得 PWA 支持。但是chrome和edge都不显示安装提示。如果我检查该页面，我会发现以下消息：“未检测到匹配的服务工作人员。您可能需要重新加载页面，或检查当前页面的服务工作人员的范围是否包含清单中的范围和启动 URL”。我没有网络编程经验。

这是我的清单：

{
    "name": "Converter NOW",
    "short_name": "Converter NOW",
    "start_url": ".",
    "display": "minimal-ui",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "A Unit and Currencies Converter. Converter NOW is immediate, fast and easy to use!",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

【问题讨论】：

你的 service worker 应该在你的 index.html 上。如果由于任何原因不存在，删除该文件并使用“flutter create”。重新生成它。
顺便说一句...对于类似 PWA 应用程序的 UI，您的显示器应该是“独立的”。最好删除web文件夹并重新生成
感谢@MarianoZorrilla，我尝试应用您的建议，但结果是一样的。我还尝试复制/粘贴颤振画廊（即 PWA）的 index.html，但没有任何改变:(
您的网站是否托管在 https 服务器上？
这太奇怪了......也许github页面有限制。试试surge.sh，它是一个免费的 repo 托管，我将它用于我所有的 Flutter PWA

标签： flutter progressive-web-apps flutter-web

【解决方案1】：

感谢 Github 上的 @MarianoZorrilla 和 this issue，我发现了问题所在。 Github pages 和 Flutter PWA 并不是亲密的朋友。如果您部署到任何其他 Web 服务器，您可能不会发现任何问题，只需遇到 PWA requirements。但是，如果您想在 ghpages 上部署 PWA Flutter 应用程序，您必须执行以下操作：

见PWA requirements
在<head>标签之后添加<base href="/projectName/">，如图here
在 flutter_service_worker.js 文件中注释 "/", 大约在第 50 行，如图所示 here

您需要这样做，因为 PWA 不是存储在根目录 (/) 而是/projectName/

【讨论】：