Chrome 在我的 PWA 中没有显示 "add to homescreen"

Question

我关注了Google的first PWA tutorial and created my own project 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 文件。我创建了文件，清除了 phone 的缓存，一切正常。

Answer 1

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

Chrome 在我的 PWA 中没有显示 "add to homescreen"

Chrome not showing "add to homescreen" in my PWA

javascript

google-chrome

firebase

vue.js

progressive-web-apps