Flutter pwa 应用程序未检测到 Service Worker

如何解决Flutter pwa 应用程序未检测到 Service Worker

我知道 flutter supports PWA，但我无法在我的 Flutter Web 应用程序中启用它。 My web app 满足 PWA 支持的所有 requirements。但是 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"
        }
    ]
}

解决方法

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

认识PWA requirements
在 <base href="/projectName/"> 标签后添加 <head>，如图所示here
在 flutter_service_worker.js 文件的第 50 行处注释 "/",，如图所示here

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