【问题标题】:Chrome for Android - add web app to home screenChrome for Android - 将网络应用程序添加到主屏幕
【发布时间】:2015-12-10 05:43:06
【问题描述】:

我正在尝试使用 Google Chrome 的原生横幅支持实现“添加到主屏幕”横幅,并以此演示作为参考。

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

根据那里的规范,要求是:

  • 页面使用服务工作者(是的,见下文)
  • 该站点正在使用 HTTPS(是的,该站点具有有效的 SSL 证书,我正在通过 HTTPS 加载。chrome 显示该站点是安全的,并且有一个绿色挂锁,证书中没有错误或警告)
  • 应用声明了一个清单(是的,见下文)
  • 清单有一个短名称、144 像素图标和“图像/PNG”类型(是的,见下文)

我正在使用的清单如下。

{
  "name": "Web app test",
  "short_name": "Test",
  "icons": [
    {
      "src": "/resources/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

其中包含一个短名称和一个 144 像素的 image/png 类型图标。

我正在使用的服务人员是此代码的直接复制和粘贴:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

本文推荐的:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

服务工作者已注册,清单正在加载到页面中,并且图像 url 正确,但横幅未显示。

我还启用了 chrome://flags/#bypass-app-banner-engagement-checks,所以这不是我需要明天回来检查它是否有效的情况。我已经能够查看我检查过的所有 Chrome 演示的主屏幕横幅(这是我从中获取大部分代码的地方),并且我的手机安装了最新版本的 Chrome。

还有什么我遗漏的东西可能会阻止主屏幕横幅出现吗?

谢谢。

【问题讨论】:

  • 我不知道,但有几种可能性:1)尝试在清单中定义“start_url”属性,就像在演示中一样,2)我不清楚 - 你是否链接了清单从html文件? 3)您是否可能已经安装了该应用程序?另外仅供参考,如果您想进一步简化,我相信您实际上可以使用空白服务工作人员文件。
  • 我也有类似的问题,没有找到答案。一切都在那里,但应用程序横幅未显示。你找到解决办法了吗?

标签: android google-chrome manifest homescreen service-worker


【解决方案1】:

需要检查的几件事:

  • 确保清单中有一个start_url,用于定义要启动的页面。
  • 确保您的页面中有<link rel=manifest>
  • 确保根据清单位置正确解析图像 URL
  • 最好有一个 192px 的图标,最小是 144

Mounir Lamouri 创建了一个manifest validator,您可以使用它来检查您的清单是否正确。

如果您使用的是 Chrome,您还应该启用 chrome://flags/#bypass-app-banner-engagement-checks,以便更快地收到警告或发现任何问题。最后,您可以在任何页面加载时查看 Dev Tools 控制台,然后会显示一个错误,指示横幅未显示的原因。

developers.google.com 上也有很多指导

  • Using App Install Banners
    • 创建包含短名称、图标和启动 URL 的清单文件
    • 从页面链接到清单文件
  • Web App Install Banner
    • 可选择包含额外信息,例如background_colortheme_color
  • Listening to events on App Install banner
    • 了解 Chrome 何时认为它可以提示安装,然后提供将其推迟到更合适的时间的能力。
    • 通过查看onbeforeinstallprompt 事件中的响应来了解用户是接受还是拒绝了提示。

【讨论】:

    【解决方案2】:

    一般来说,我建议您将清单粘贴到其中以确保它没有任何错误:http://mounirlamouri.github.io/manifest-validator/

    如果在启用 chrome://flags/#bypass-app-banner-engagement-checks 的情况下使用 Chrome,您可以在任何页面加载时在控制台中查看,系统会显示一条错误消息,指示未显示横幅的原因。

    【讨论】:

      猜你喜欢
      • 2013-09-10
      • 1970-01-01
      • 2012-03-17
      • 2013-02-14
      • 1970-01-01
      • 2016-04-19
      • 2011-04-17
      • 1970-01-01
      • 2012-11-15
      相关资源
      最近更新 更多