Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • Lighthouse 初始屏幕审计如何失败
  • 资源

未配置自定义初始屏幕

May 4, 2019 — 更新日期 Sep 19, 2019
Available in: Español, 한국어, Português, English
Appears in: PWA 审核
本页内容
  • Lighthouse 初始屏幕审计如何失败
  • 资源

自定义初始屏幕使您的渐进式 Web 应用 (PWA) 感觉更像是为特定设备专门构建。默认情况下,当用户从主屏幕启动您的 PWA 时,Android 会显示一个白屏,直到 PWA 准备就绪。用户可能会看着这个空白的白色屏幕长达 200 毫秒。通过设置自定义初始屏幕,您可以向用户显示自定义背景颜色和 PWA 图标,提供品牌化、吸引人的体验。

Lighthouse 初始屏幕审计如何失败 #

Lighthouse 会标记没有自定义初始屏幕的页面:

Lighthouse 审计显示站点未配置自定义初始屏幕
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

如何创建自定义初始屏幕 #

只要您在 Web 应用清单中满足以下要求,Android 版 Chrome 就会自动显示您的自定义初始屏幕:

  • name 属性设置为您的 PWA 的名称。
  • background_color 属性设置为有效的 CSS 颜色值。
  • icons 数组指定一个至少为 512x512 像素的图标。
  • 指定的图标存在且为 PNG。

有关更多信息,请参阅为 Chrome 47 中已安装的 Web 应用添加初始屏幕。

虽然存在单个 512x512 像素图标时 Lighthouse 的审计会通过,但对于 PWA 应包含哪些图标存在一些分歧。有关不同方法的优缺点的讨论,请参阅审计:图标大小覆盖范围。

资源 #

未配置自定义初始屏幕审计的源代码

Last updated: Sep 19, 2019 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.