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

【问题标题】：Chrome not showing "add to homescreen" in my PWAChrome 未在我的 PWA 中显示“添加到主屏幕”
【发布时间】：2017-11-07 16:47:37
【问题描述】：

我关注了 Google 的 first PWA tutorial 并创建了自己的项目 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 构建的
service worker 已设置并正常运行
控制台没有显示错误

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 文件。我创建了文件，清除了手机的缓存，一切正常。

【问题讨论】：

我不知道这是否是问题所在，但my-pwa-77d8a.firebaseapp.com/offline.html 正在返回 404。
我已经解决了offline.html 问题，但仍然没有显示横幅。
成功了！我创建了offline.html，清除了我手机的缓存，然后浏览器显示了横幅。发表你的答案，我会接受。
我有这个问题！我有在 https 中提供的站点，我有一个 manifest.json 并且我有一个正在实例化的服务人员（它是空的，但这不应该是问题），但它没有提示用户添加到主屏幕。如果我转到手机中的浏览器设置并将其添加到主屏幕，它可以工作，但它不会提示用户？有人有任何线索吗？我完全没有错误...会是什么？
@Antonio 是的......可能在一些更新之后发生......甚至我的 pwa 也不再发出通知......

标签： javascript google-chrome firebase vue.js progressive-web-apps

【解决方案1】：

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

【讨论】：

是的，确实如此！我的工作人员试图缓存丢失的文件。我创建了offline.html，清除了我手机的缓存，一切正常！谢谢。