Flutter 颤振PWA未显示“添加到主屏幕”选项

颤振版本：

1.19.0-4.0.pre

我正在尝试使用Flatter web生成一个PWA应用程序，但当我打开web应用程序时，它的行为与PWA不一样，并且在我的android设备上也不会显示

添加到主屏幕

横幅

这是我的

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浏览器上显示“添加到主屏幕”选项。

首先确保您已在“index.html”文件中注册了“flatter\u service\u worker.js”，如下所示：

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

然后在chrome上打开pwa，右键单击页面并选择“检查”选项。然后转到“应用程序”选项卡，检查“清单”是否有错误，如果有，您应该修复它。 然后检查“ServiceWorkers”选项卡，查看是否注册了“flatter\u Service\u worker.js”。

---

如果已注册并且“Manifest.json”文件工作正常，那么您应该看到“添加到主屏幕”选项。

首先确保您已在“index.html”文件中注册了“flatter\u service\u worker.js”，如下所示：

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

然后在chrome上打开pwa，右键单击页面并选择“检查”选项。然后转到“应用程序”选项卡，检查“清单”是否有错误，如果有，您应该修复它。 然后检查“ServiceWorkers”选项卡，查看是否注册了“flatter\u Service\u worker.js”。

---

如果它已注册并且“Manifest.json”文件工作正常，那么您应该看到“添加到主屏幕”选项。

您正在生成Manifest.json还是

flatter build web

为您执行此操作？@josegorges我已经添加了

Manifest.json

我自己。我也这样做了，我觉得很奇怪，我认为这应该通过

flatterbuildweb

生成。另外，我修复了这个问题（在我的例子中），注意到服务人员请求的一个文件不在我的环境中（在资产文件夹中），我添加了一个名为的空白文件，它工作了。有点特别，所以除非这也解决了你的问题，否则我不会创建一个答案。你能告诉我该文件的名称吗？你是在生成manifest.json还是

flatter build web

为你这么做？@josegorges我自己添加了

manifest.json

。我也这么做了，我觉得很奇怪，我认为这应该通过

flatterbuildweb

生成。另外，我修复了这个问题（在我的例子中），注意到服务人员请求的一个文件不在我的环境中（在资产文件夹中），我添加了一个名为的空白文件，它工作了。有点特别，所以除非这也解决了您的问题，否则我不会创建一个答案。您能告诉我该文件的名称吗？@BirjuVachhani“清单”选项卡或“服务人员”选项卡中是否有任何错误？我今天刚刚检查，令人惊讶的是，它似乎在当前的颤振主分支中。我将问题追溯到缓存功能。该方法返回不同的值。现在它似乎工作正常。@BirjuVachhani“清单”选项卡或“服务人员”选项卡中是否有任何错误？我今天刚刚检查，令人惊讶的是，它似乎在当前的Flatter master分支中。我将问题追溯到缓存功能。该方法返回不同的值。现在它似乎工作得很好。