PWACompat - 适用于所有浏览器的 Web 应用清单

您已经设计了一个 Web 应用,编写了其代码和 Service Worker,最后添加了 Web 应用清单来描述该应用在用户设备上“安装”后的行为。这包括用于手机启动器或应用切换器等用途的高分辨率图标,以及从用户主屏幕打开 Web 应用时应如何启动。

虽然许多浏览器都会遵循 Web 应用清单,但并非每个浏览器都会加载或遵循您指定的每个值。不妨输入 PWACompat,它能获取您的 Web 应用清单,并自动为不同大小、网站图标、启动模式、颜色等的图标插入相关的 metalink 标记。

PWACompat 接受 Web 应用清单,并添加标准和非标准元、链接等标记。
PWACompat 接受 Web 应用清单,并添加标准和非标准元、链接等标记。

也就是说,您不再需要向网页添加无数的标准和非标准代码(如 <link rel="icon" ... /><meta name="orientation" ... />)。对于 iOS 主屏幕应用,PWACompat 甚至会动态创建启动画面,因此您不必为每种不同屏幕尺寸生成启动画面。

Emojityper 的 iOS 启动画面,由 PWACompat 生成

使用 PWACompat

如需使用 PWACompat,请务必在您的所有网页上链接到 Web 应用清单:

<link rel="manifest" href="manifest.webmanifest" />

然后,添加此脚本,或将其添加到异步加载的软件包:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

无论用户使用移动设备还是桌面设备,PWACompat 都将提取您的清单文件并执行用户浏览器所需的工作。

不过,我们仍建议您至少添加一个优质快捷方式图标,以用于搜索索引编制:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

如需了解详情,请参阅最佳实践

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

深入报道

对于受支持的浏览器,PWACompat 实际的作用是什么?PWACompat 会加载您的 Web 应用清单,并且:

  • 为清单中的所有图标创建元图标标记(例如,为网站图标、旧版浏览器创建)
  • 针对各种浏览器(例如 iOS、WebKit/Chromium 分支等)创建后备元标记,描述 Web 应用的打开方式
  • 根据清单设置主题颜色

对于 Safari,PWACompat 还可:

  • 显示模式 standalonefullscreenminimal-ui 设置 apple-mobile-web-app-capable(在无浏览器 Chrome 的情况下打开)
  • 创建 apple-touch-icon 图片,并将清单背景添加到透明图标:否则,iOS 会将透明度渲染为黑色
  • 创建动态启动图片,与为基于 Chromium 的浏览器生成的启动图片高度匹配

如果您想贡献更多内容或以获得额外的浏览器支持,GitHub 上提供了 PWACompat

试试看

PWACompat 已在 Airhornerv8.devEmojityper 中发布。您网站的标头 HTML 可以很简单:只需指定清单,剩下的交给 PWACompat 即可。

📢🤣🎉