时间戳

首页 > 解决方案 > Flutter pwa app 未检测到服务人员

flutter - Flutter pwa app 未检测到服务人员

问题描述

我知道颤振支持 PWA，但我无法在我的颤振网络应用程序中启用它。我的 Web 应用程序满足 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"
        }
    ]
}

标签： flutterprogressive-web-appsflutter-web

解决方案

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

  1. 满足PWA 要求
  2. 添加<base href="/projectName/">后标记，如此处<head>所示
  3. 在 flutter_service_worker.js 文件中注释"/",大约在第 50 行，如下所示

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

推荐阅读