您已经设计了一个 Web 应用,编写了其代码和 Service Worker,最后添加了 Web 应用清单来描述该应用在用户设备上“安装”后的行为。这包括用于手机启动器或应用切换器等用途的高分辨率图标,以及从用户主屏幕打开 Web 应用时应如何启动。
虽然许多浏览器都会遵循 Web 应用清单,但并非每个浏览器都会加载或遵循您指定的每个值。不妨输入 PWACompat,它能获取您的 Web 应用清单,并自动为不同大小、网站图标、启动模式、颜色等的图标插入相关的 meta
或 link
标记。
也就是说,您不再需要向网页添加无数的标准和非标准代码(如 <link rel="icon" ... />
或 <meta name="orientation" ... />
)。对于 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 还可:
- 为显示模式
standalone
、fullscreen
或minimal-ui
设置apple-mobile-web-app-capable
(在无浏览器 Chrome 的情况下打开) - 创建
apple-touch-icon
图片,并将清单背景添加到透明图标:否则,iOS 会将透明度渲染为黑色 - 创建动态启动图片,与为基于 Chromium 的浏览器生成的启动图片高度匹配
如果您想贡献更多内容或以获得额外的浏览器支持,GitHub 上提供了 PWACompat。
试试看
PWACompat 已在 Airhorner、v8.dev 和 Emojityper 中发布。您网站的标头 HTML 可以很简单:只需指定清单,剩下的交给 PWACompat 即可。
📢🤣🎉