什么是 PWA
PWA 是 Progressive Web App 的缩写，翻译成中文就是渐进式网络应用。渐进式网络应用具有比传统网页应用更好的用户体验和离线支持，可以在桌面和移动设备上像应用程序一样运行。
什么是网页清单 (manifest)
网页清单是一个 JSON 文件，它包含了应用程序的元数据，如图标、颜色、启动页面等。在 PWA 中，网页清单也可以帮助定义应用程序的行为和功能，如离线支持、推送通知。
如何处理网页清单
声明网页清单
声明网页清单非常简单，只需要在项目根目录创建 manifest.json 文件，并在 HTML 文件的头部添加以下代码：
<link rel="manifest" href="manifest.json">
定义 manifest.json
下面是一个简单的 manifest.json 的示例：
-- -------------------- ---- -------
-
------- --- --- ----
------------- -------
------------ ----
---------- -------------
------- -
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
-
--
-------------- ----------
------------------- ----------
-------------- --- --- ----
-------------- ------------------
-name, short_name
这两个字段分别定义应用程序的名称和短名称。短名称将在移动设备上用作应用程序图标的标签。
start_url
这个字段定义在添加到主屏幕后打开应用程序的 URL。
display
这个字段定义应用程序的显示模式。值可以是以下之一：
- fullscreen
完全覆盖整个浏览器窗口，没有地址栏。
- standalone
应用程序看起来像是一个独立的应用程序，有自己的任务栏，没有地址栏。
- minimal-ui
应用程序看起来像是一个独立的应用程序，但可能会出现浏览器工具栏。
- browser
应用程序在浏览器中打开，有浏览器工具栏和地址栏。
icon
这个字段定义应用程序的图标。icon 字段是一个数组，每个数组项都包含了图标的不同大小和类型。
theme_color, background_color
这两个字段定义应用程序的主题颜色和背景颜色。
description
这个字段定义应用程序的描述。
orientation
这个字段定义应用程序的方向，可以是 portrait-primary 或 landscape-primary。
总结
在 PWA 中，网页清单是非常重要的，它可以帮助处理离线支持和推送通知等功能。在定义网页清单时，需要注意每个字段的含义和值。同时，在写网页清单时，应该兼顾不同的设备和浏览器，以确保应用程序的良好体验和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454e540968c7c53b089ed1a