您设计了一个 Web 应用，编写了其代码和 Service Worker，最终添加了 Web 应用清单： “已安装”。这包括高分辨率图标等内容，例如一 手机的启动器或应用切换器，或者是当您的 Web 应用从 用户的主屏幕。
虽然许多浏览器都会遵循网络应用清单，但并非所有浏览器都会加载或遵循
所有值输入 PWACompat，
库，可获取您的 Web 应用清单并自动插入相关的 meta 或 link 标记
网站图标、启动模式、颜色等不同尺寸的图标。
也就是说，您不必再添加数不胜数的标准和非标准代码（如
<link rel="icon" ... /> 或 <meta name="orientation" ... />）添加到您的网页。对于 iOS 主屏幕应用，PWACompat 甚至会动态创建启动画面，这样您就不必为每种不同的屏幕尺寸生成启动画面。
使用 PWACompat
如需使用 PWACompat，请务必在所有页面上链接到您的网络应用清单：
<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 会加载您的网络应用清单，并执行以下操作：
- 为清单中的所有图标（例如，针对网站图标、旧版浏览器）创建元图标标记
- 为各种浏览器（例如 iOS、WebKit/Chromium 分支等）创建回退元标记，描述 Web 应用应如何打开
- 根据清单设置主题颜色
对于 Safari，PWACompat 还会：
- 设置
apple-mobile-web-app-capable（在不使用 Chrome 浏览器的情况下打开） 显示模式standalone、fullscreen或minimal-ui - 创建
apple-touch-icon图片，将清单背景添加到透明图标：否则，iOS 会将透明度渲染为黑色 - 创建动态启动图片，与为基于 Chromium 生成的启动图片高度匹配 浏览器
如果您想贡献更多内容或获得其他浏览器支持方面的帮助， PWACompat 在 GitHub 上。
试试看
PWACompat 已在 Airhorner、v8.dev 和 Emojityper。您网站的标头 HTML 可以很简单：只需指定清单，让 PWACompat 处理其余工作。
📢🤣🎉