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

Posted 2023-02-22

【中文标题】Chrome 未在我的 PWA 中显示“添加到主屏幕”

【英文标题】：Chrome not showing "add to homescreen" in my 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 已设置并正常运行 控制台没有显示错误

ma​​nifest.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 也不再发出通知......

【参考方案1】：

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

【讨论】：

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