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

时间:2017-06-06 15:18:28

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

我关注了Google的first PWA tutorial并创建了自己的项目https://my-pwa-77d8a.firebaseapp.com。一切都很好看:

  • 项目有manifest.json个文件
  • 我在Firebase上使用HTTPS
  • 代码包含<meta name="mobile-web-app-capable" content="yes">标记
  • 我的manifest.json文件包含:icons specs,name,short_name,start_url
  • 我使用的是Vue.js作为我的主框架,其余的都是使用vanilla JS构建的
  • service worker设置并正常运行
  • 控制台显示没有错误

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

1 个答案:

答案 0 :(得分:2)

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