Chrome在我的PWA中未显示“添加到主屏幕”

Question

我遵循Google的第一个PWA教程，并创建了自己的项目https://my-pwa-77d8a.firebaseapp.com。一切看起来都很好：

• 该项目有一个manifest.json文件
• 我在Firebase上使用HTTPS
• 该代码具有<meta name="mobile-web-app-capable" content="yes">标签
• 我的manifest.json文件包含：图标规范，名称，short_name，start_url
• 我使用Vue.js作为主要框架，其余的都是使用Vanilla JS构建的
• 该服务人员设置和无故障运行
• 控制台显示无错误

manifest.json

  {
    "short_name": "PizzaApp",
    "name": "My delicious PWA",
    "icons": [
      {
        "src": "img/launcher-icon-2x.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-3x.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "img/launcher-icon-4x.png",
        "sizes": "192x192",
        "type": "image/png"
      }
    ],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait"
  }

我可以从移动设备和台式机手动添加到主屏幕。但是Chrome永远不会显示添加到主屏幕横幅。怎么了？

解决了

正如下面的提示，我的服务人员正在尝试缓存丢失的offline.html文件。我创建了文件，清除了手机的缓存，一切正常。

Answer 1

问题是您的offline.html文件（https://my-pwa-77d8a.firebaseapp.com/offline.html）返回 404。