什么是 PWA？
PWA 全称 Progressive Web App，是一种通过浏览器提供体验类似于本地安装应用的技术。PWA 应用可以在离线情况下工作，支持推送通知，可以添加到主屏幕，还能快速加载页面。同时，PWA 还能占据更少的空间和更少的内存，因为它是通过浏览器访问的。
PWA Manifest
PWA Manifest 是一个 JSON 文件，它提供了许多 PWA 网站的必要信息，比如名称、图标、主色调等等。这些信息使得浏览器了解更多有关 PWA 的信息，从而使 PWA 有能力通过添加到主屏幕等方式可视化显示。
一个简单的示例 manifest.json 文件如下:
-- -------------------- ---- -------
-
------- --- -----
------------- ------
-------------- ----------
------------------- ----------
-------- --
------ ------------------
-------- ----------
------- -----------
-- -
------ ----------------------
-------- ----------
------- -----------
--
-使用 pwa-manifest-generator 创建 PWA Manifest 文件
npm 包 pwa-manifest-generator 是一个用于自动生成基础 PWA Manifest 的工具，它会根据提供的参数，生成一个完整的 Manifest 文件，其中包括基本信息、图标条目等等。
安装
使用以下命令安装 pwa-manifest-generator：
npm install pwa-manifest-generator -g
生成 PWA Manifest 文件
使用以下指令进行 Manifest 文件生成：
pwa-manifest-generator
生成的 Manifest 文件名是 site.webmanifest ，位于当前目录。
Manifest 配置
生成的 Manifest 文件需要进行配置，比如名称、图标等等。使用以下命令进行配置：
pwa-manifest-generator -n "My App" -s "App" -t "#ffffff" -b "#ffffff" --logo "images/logo.png"
参数说明：
-n：名称-s：简称-t：主题颜色-b：背景颜色--logo：logo 地址
更多参数可以参考 pwa-manifest-generator GitHub 仓库。
渐进增强
通过为网站添加 PWA Manifest，可以使其具备渐进式增强的能力。使用以下代码片段，可以让您的网站具备 PWA Manifest 功能：
<link rel="manifest" href="manifest.json">
总结
通过使用 npm 包 pwa-manifest-generator，我们可以快速创建自己的 PWA Manifest 文件。此外，添加 PWA Manifest 有助于实现网站的渐进式增强，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559da81e8991b448d75c7