什么是 PWA
PWA (Progressive Web App) 是一种新兴的 Web 应用程序模型，它使用现代 Web 技术来为用户提供类似原生应用的体验。PWA 具有以下几个特征：
- 可离线访问
- 可添加到主屏幕
- 响应式设计
- 快速加载时间
- 消息推送
PWA 可以在多个平台上运行（包括 Android、iOS、Windows、MacOS 等），同时制作和维护成本也相对较低。
为 PWA 添加设备识别能力
现在，我们已经可以通过 Web 技术创造出与原生应用功能类似的 PWA。但是，在不同设备上，我们需要为应用程序定制一些不同的设备适配策略。这样才能为用户提供更好的应用体验。
使用 Web App Manifest，我们可以为我们的 PWA 添加设备识别能力并动态适配不同设备，提高 PWA 在设备上的体验。
Web App Manifest 简介
Web App Manifest 是一个 JSON 文件，它提供了有关 Web 应用程序的元数据。该文件包含应用程序名称、图标、背景颜色、启动方式等信息。通过 Web App Manifest，我们可以做到：
- 将应用程序安装到主屏幕（包括添加无头图标等）
- 添加启动画面
- 控制全屏、方向等设备特性
当浏览器满足一定条件时，Web App Manifest 可以触发 PWA 的安装。这样，用户就可以通过应用程序列表或主屏幕快速访问应用，使体验类似于原生应用。
Web App Manifest 的基本结构
下面是一个简单的 Web App Manifest 配置文件结构示例：
-- -------------------- ---- -------
-
------- --- --- ------
------------- ---- ------
-------- --
------ -----------------
------- ------------
-------- -------
-- -
------ -----------------
------- ------------
-------- -------
---
------------ -------------
---------- -------------
------------------- ----------
-------------- ---------
-name：应用程序的名称（定义在主屏幕和应用程序列表中显示的名称）short_name：应用程序的短名称（定义在主屏幕上方显示的名称）icons：是一个数组，包含应用程序的不同尺寸的图标图标，图标分辨率越高，需要传输的数据量也就越大start_url：应用程序的 URL（定义在应用程序启动时要显示的页面）display：应用程序的显示模式（可以是如下值之一：fullscreen、standalone、minimal-ui、browser）background_color：应用程序的背景颜色（在第一次启动应用程序时显示）theme_color：应用程序的主题颜色（这个颜色会被浏览器用于创建用户界面，因此建议选择适合应用程序界面的颜色）
接下来，我们将进一步介绍如何使用 Web App Manifest 为我们的 PWA 添加设备适配策略。
借助 Web App Manifest 动态适配设备
添加设备的屏幕方向识别
PWA 在移动端设备的体验是十分重要的，我们经常会发现，打开某些应用时，它们都有一个屏幕旋转的适配功能，即当我们将手机旋转时，它可以随之进行调整。这时候 Web App Manifest 就派上用场了。
我们可以根据屏幕方向变化，利用 Web App Manifest 对 PWA 的不同方向进行控制。首先，我们需要添加 orientation 属性到 Web App Manifest 中：
{
...
"orientation": "landscape"
}当然，你也可以将它设置成 portrait 或 any。这样，当用户将设备旋转到另一个方向时，我们可以使用 JavaScript 监听 orientationchange 事件，然后根据 window.orientation 属性和 Web App Manifest 中的设备方向进行自动适配。
window.addEventListener("orientationchange", function() {
if (window.orientation === 90 || window.orientation === -90) {
// Web App Manifest 中的 "landscape" 方向需要在此处添加屏幕适配代码
} else {
// Web App Manifest 中的 "portrait" 方向需要在此处添加屏幕适配代码
}
}, false);在这段代码中，我们检测 window.orientation 属性，并根据它来适配应用程序的布局和 UI。
添加设备的主题颜色识别
除了屏幕方向，Web App Manifest 还可以帮助我们识别设备的主题颜色。有些设备会将设备的主题颜色作为浏览器主题颜色。我们可以利用这个特点为应用程序动态设置合适的主题颜色。
为了识别设备的主题颜色，需要将 theme-color 属性添加到 Web App Manifest 中：
{
...
"theme_color": "#3367D6"
}该属性的值应该是你想要设置的主题颜色。我们可以通过下面这个示例代码为我们的 PWA 设置设备的主题颜色：
var metaThemeColor = document.querySelector("meta[name=theme-color]");
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
metaThemeColor.setAttribute("content", "#151515");
} else {
metaThemeColor.setAttribute("content", "#3367D6");
}这段代码首先获取 meta 标签的 theme-color 属性，然后使用 window.matchMedia() 判断当前设备是否支持 dark 模式，最后根据返回值设置 meta 标签的 content 属性。
结论
Web App Manifest 可以通过简单添加的 JSON 文件，为我们的 PWA 添加了默认值和设备适配规则。它不仅为我们的应用程序提供了更好的用户体验，还可以通过开发工具使我们更好地管理和调试代码。在实际开发过程中，掌握 Web App Manifest 怎么用可以大大提高我们的 Web 开发技能和 PWA 的开发速度。
希望这篇文章可以帮助有需要的开发者。如果想要获取更多深度指导，可以参考下面的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fc55be9a7045d0d767429