PWA 技术预览：Web App Manifest 的未来
Progressive Web App（渐进式网络应用程序）是一种新型的 Web 应用程序，它允许您将网站变成安装在用户设备上的应用程序体验。而Web App Manifest正是大有帮助的一项功能。
Web App Manifest是一份简单的JSON文件，用于描述以及标记Web App所需要的信息。从而可以使得Web App的入口图标、名称，配色方案更加的丰富多彩。这项功能的重要性在于，可以提供用户更好的应用启动体验，并且使得所使用的 Web 应用程序的功能更接近原生应用程序。
下面我们来看一下一个Manifest文件应该包含的内容：
-- -------------------- ---- -------
-
------- ---- -------
------------- -----
------------ -------
------------------- ----------
-------------- ----------
---------- -------------
-------- -
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ ------------------------------
------- ------------
-------- -------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
--
-
------ --------------------------------
------- ------------
-------- ---------
-
-
-这就是一个基本的Manifest模板。下面让我们分别分析每一部分：
- name：应用名称（通常是网站名称）。这个名称将显示在应用程序的启动页面或主屏幕上。
- short_name：应用程序的简短名称（如果适用）。这个名称可能会被在主屏幕上用于代替长名称。
- start_url：应用的启动URL。这可以让Web App显示在用户设备的启动屏幕上，并且允许给定URL在初始浏览器启动之后快捷地访问应用程序。
- background_color：应用程序的背景颜色。
- theme_color：应用程序的主题颜色，也就是状态栏的颜色。
- display：定义如何显示Web App。可以有三个值：fullscreen、standalone和minimal-ui。
- icons：定义应用图标的列表。每个图标可以针对不同的设备屏幕尺寸进行优化。
在了解Manifest的基本内容后，我们需要注意一些细节：
- Manifest文件必须在HTML文件中引用，如下所示：
<link rel="manifest" href="/manifest.json">
进行Manifest文件的测试时，需要在Chrome DevTools中打开Web App调试。在console中输入navigator.userAgent可以看到当前浏览器是否支持Manifest功能。
在实现Manifest时，浏览器对一些属性的要求很严格。例如，图片至少需要一个192 x 192的分辨率。
总结：
Manifest是Web App实现本地应用体验的关键，如果你想要设计一个现代化的Web App，那么Manifest一定是你要考虑的重要一部分。在学习Manifest的过程中，需要注意到细节问题，开发者需要对各个属性的内容进行了解，并马上尝试进行实践。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----- --------------- ---------------------------- ----------------- ----- -------------- ---------------------- ---------- ----------------------- ------- ------ --------- -------- -------------- ------- -------
-- -------------------- ---- -------
-
------- ------ -----
------------- -----
------------ ----
------------------- ----------
-------------- ----------
---------- -------------
-------- -
-
------ --------------------
------- ------------
-------- ---------
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4e12748841e989414a851