简介
PWA (Progressive Web Apps) 是一种新的 Web 技术，利用现代浏览器的一些特性，使得 Web 应用能够像本地应用一样运行，并且能够集成一些本地应用的功能，例如：离线缓存，推送通知等等。
Web App Manifest 是一个 JSON 文件，提供一些元数据信息，帮助浏览器识别并启动 PWA 应用。这个文件包含了应用的名称，图标，起始 URL，和其他可选的功能，例如：全屏模式，离线缓存等等。在本文中，我们将探讨如何使用 Web App Manifest 配置 PWA 应用。
创建一个 Web App Manifest
要创建一个 Web App Manifest，我们需要创建一个 JSON 文件，并规定一些必要的属性。下面是一个示例的 Web App Manifest 文件：
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- -------
-------------- ----------
-------- -
-
------ ----------------
------- ------------
-------- ---------
--
-
------ ----------------
------- ------------
-------- ---------
-
-
-name 和 short_name
name 属性用来表示应用名称，short_name 则表示应用的短名称，也就是在 PWA 加载和使用时，会显示在不同位置的应用名称。两者的区别是，name 会在应用的启动画面上显示，short_name 只会在应用的任务栏和其他地方显示。
如果两者的值相同，则在启动画面和任务栏上都会显示相同的名称。如果 short_name 没有被设置，则浏览器将使用 name 属性的值作为默认的短名称。
start_url
start_url 表示应用的初始 URL。这个 URL 会在用户点击添加到主屏幕时，作为 PWA 的起始 URL。这个值通常是相对于应用的根 URL。
display
display 属性用来设置 PWA 应用的显示模式。它是一个枚举值，包含以下四个值：
- fullscreen：在全屏模式下打开应用。
- standalone：将应用显示为独立的本地应用，而不是一个浏览器标签页。
- minimal-ui：将应用显示为特殊模式，隐藏浏览器顶部导航和底部工具栏。
- browser：将应用作为标准的浏览器标签页。
background_color 和 theme_color
background_color 属性用来设置应用的默认背景颜色。当应用的内容未完全填充屏幕时，这个背景色将作为应用的背景颜色。这个值应该是一个 CSS 颜色值。
theme_color 属性用来设置应用的主题颜色。这个颜色会作为状态栏的颜色（仅限 Chrome 和 Android 默认浏览器），以及某些浏览器（例如 Safari）中的其他 UI 元素的颜色。
icons
icons 属性是一个数组，用来表示应用的图标。每个图标都是一个对象，必须包含以下三个属性：src，type 和 sizes。
- src：图标的路径，相对于应用根目录的路径。这个路径必须是相对路径，不能是绝对路径。
- type：图标的 MIME 类型。这个值通常是 image/png 或者 image/jpeg。
- sizes：图标的尺寸大小。这个值是一个逗号分隔的字符串，表示图标的宽度和高度。例如：192x192, 512x512。
将 Web App Manifest 加入 HTML
当 Web App Manifest 创建完毕后，我们需要将其加入 HTML 文件中。这可以通过在 <head> 标签中添加一个 link 元素实现。例如：
<head>
<link rel="manifest" href="/manifest.json" />
<!-- 其他 meta 标签和样式表 -->
</head>这个 link 元素需要包含 rel="manifest" 属性，以告诉浏览器这是一个 Web App Manifest。这个 href 属性则是 Web App Manifest 文件的路径，表示需要加载哪个 JSON 文件作为 Web App Manifest。
总结
Web App Manifest 是一个 JSON 文件，提供了应用的元数据信息，可以帮助浏览器识别并启动 PWA 应用。我们可以使用这个文件来设置应用的名称，图标，起始 URL，显示模式，背景色，主题颜色等等。当 Web App Manifest 创建完毕后，我们需要将其加入 HTML 文件中，并在 link 元素中添加 rel="manifest" 和 href 属性。
接下来，在你的应用中开始使用 Web App Manifest 吧，提供更好的用户体验和更好的 PWA 支持。
示例代码
在这里提供一个简单的示例，演示如何使用 Web App Manifest。
index.html
-- -------------------- ---- -------
--------- -----
------
------
--------- --- -----------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- -------------- --------------------- --
-------
---- -
----------------- --------
------------ ------ ---------- -----------
----------- -------
-
--------
-------
------
----------- -- -- --- ---------
---------- ---- --- -- ---- ---------------
-------
-------manifest.json
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- -------
-------------- ----------
-------- -
-
------ ----------------
------- ------------
-------- ---------
--
-
------ ----------------
------- ------------
-------- ---------
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f44e9ff6b2d6eab3d5f86e