什么是PWA？
PWA，即 Progressive Web App，是一种结合Web和App的新兴应用形式。它以网页形式呈现出来，但具有像原生应用一样的功能和体验，可以通过网页进行安装并快速加载。PWA应用还具有离线访问和推送通知等功能，可以给用户带来更好的使用体验。
PWA的开发需要遵循一些标准和约定，其中之一就是web app manifest。
什么是web app manifest？
web app manifest是一种JSON文件，其中定义了PWA的应用模式、图标、名称等信息。浏览器使用这个文件来将PWA用作应用安装程序，并使其可以像本地应用一样运行。
web app manifest包含以下信息：
name：PWA的名称。short_name：PWA的短名称。start_url：应用程序在浏览器中的起始URL。display：PWA的显示模式，如fullscreen、standalone、minimal-ui等。background_color：启动画面背景色。theme_color：PWA标题栏颜色。icons：应用图标的大小、路径等信息。
遇到的问题
在PWA开发中，我遇到了一个web app manifest的错误，导致我的应用无法正常安装或启动。经过排查，我发现问题主要集中在两个方面：
编写manifest.json时的错误
错误场景：在编写manifest.json时出现语法错误或未完整定义必需字段。
解决方式：检查JSON文件的格式和缺失字段，可以使用JSON规范检测工具进行检查，如JSONLint。同时也可以参考Google PWA官方文档，了解每个字段的规范和用途。
示例代码：
-- -------------------- ---- -------
-
------- --------
-------- -
-
------ -------------------------------
-------- --------
------- -----------
--
-
------ -------------------------------
-------- --------
------- -----------
-
-
-上述代码定义了一个简单的manifest.json文件，其中定义了PWA的名称和两个图标。
服务器不正确配置manifest.json
错误场景：manifest.json文件未正确指向或服务器未正确响应manifest.json文件。
解决方式：检查manifest.json文件是否位于正确的位置，并且正确配置服务器以正确响应manifest.json。
示例代码：
- 在HTML文档的
<head>中添加以下标签：
<link rel="manifest" href="manifest.json">
- 服务器应配置正确的响应头部：
Access-Control-Allow-Origin: * Content-Type: application/json
结论
web app manifest是PWA开发中很重要的一环，它不仅定义了PWA的外观和感觉，而且还决定了它的安装方式和行为。当PWA无法正常工作时，我们应该首先检查它的manifest.json文件是否正确编写和服务器是否正确响应。通过正确配置，我们可以使PWA的工作更加顺畅，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731fa4c0bc820c5823b76fc