Question

Flutter版本：1.19.0-4.0.pre

我正在尝试使用Flutter Web生成PWA应用程序，但是当我打开Web应用程序时，它的行为不像PWA，并且在我的Android设备上也没有显示add to home screen标语。

这是我的manifest.json文件：

{
  "name": "Flutter PWA Demo",
  "short_name": "PWA Demo",
  "start_url": ".",
  "scope": ".",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#E50D7F",
  "description": "A Flutter pwa application.",
  "orientation": "portrait",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

我在master和dev上尝试过，但是它不起作用。它在设备或台式机Chrome浏览器上没有显示add to home screen选项。

Answer 1

首先请确保您已在“ index.html”文件中注册“ flutter_service_worker.js”，如下所示：

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker.register("/flutter_service_worker.js");
  });
}

然后在chrome上打开您的pwa，右键单击页面并选择“检查”选项。然后转到“应用程序”选项卡，检查“清单”是否存在错误，是否应该修复。然后检查“服务人员”选项卡以查看是否已注册“ flutter_service_worker.js”。如果已注册并且“ Manifest.json”文件运行正常，则应该看到“添加到主屏幕”选项。

Flutter PWA不显示“添加到主屏幕”选项

1 个答案: