编者按：在一般互联网用户看来，PWA就是网页小程序(如下图)。PWA即“渐进式网页应用”(Progressive Web App)。我们可以说，PWA是介于“网页”和“APP”之间的小程序，它基于页面运作，可以被拖拽到手机主页(如下图)，功能有点像APP，甚至能与APP“一较高下”，但又有别于APP。medium.com上的一位开发人员uve发表了名为“A beginner’s guide to making Progressive Web Apps”的PWA制作的新手教程，让一般用户也可以制定属于自己的“小程序”，体验一把“程序猿”的乐趣。

　　准备工作

　　PWA以网页为载体，因此我们首先需要创建自己的网页。 HTML5 UP和Start Bootstrap就是两个很好的HTML模板资源站点。我们可以从中挑选并下载自己喜爱的主题包。下载完毕后，打开主题包，找到index.html文件点开，把里面所有内容都换成自己想要的样子。有经验的朋友们也不妨尝试运用CSS语言改变页面中的各种颜色布局。

　　第一步：测试PWA

　　Lighthouse是Chrome浏览器上的拓展程序，能够帮助我们测试PWA，并提供相关的改善方案。

　　在浏览器上安装好Lighthouse以后，在浏览器右上方找到这个拓展程序，点击 Generate report 按钮(如下图)以针对当前打开的页面运行 Lighthouse 测试。

　　在完成审查后，Lighthouse 将打开一个新标签，并在页面的结果上显示一个报告(如下图)。

　　如果感觉信息量太大，看着麻烦，可以直接关注页面顶部的四个主要指标(如下图)。现在我们的PWA基本上还什么都没有，所以得个36分也很正常。

　　第二步：制作PWA的图标

　　PWA可以拖拽到手机主屏幕，因此需要一个像APP那样的图标。这个图标的比例必须是1:1，也就是正方形。

　　大家可以登陆the noun project(如下图)，这是一个强大的图标制作网站，里面几乎囊括了“世间万物”的图标。

　　做好图标以后，就要把图标放到页面上去了。大家可以采用Favicon & App Icon Generator。把新做的图标上传到这个网站，它就会生成几个不同大小的图标以及一些HTML代码。然后，我们需要进行以下操作：

　　下载该网站提供的文件并解压

　　把图标放进WPA页面当中的一个文件夹

　　把该网站提供的代码添加到index.html文件的

　　确保图标的路径不出错。如果把图标放在了子文件夹，则需要在每一行都加上“icons/”(如下图)

　　第三步：创建WPA的manifest文件

　　manifest文件包含了一个网站的名字、主要颜色以及图标等数据。我们在Favicon & App Icon Generator上也可以生成manifest文件，但我们还要对manifest文件做一些额外的改动。

　　登陆Web App Manifest Generator，输入我们创建的PWA的各种信息。如果有不确定的，可以不填，系统会自动选择默认项。

　　复制页面右手边的JSON数据(如下图)并将其粘贴到manifest.json文件当中的顶部。要注意别打乱格式，有时候会需要加个逗号或删除一个括弧。最终完成的manifest文件是这样的：仅供参考。

　　重启Lighthouse，就可以知道manifest文件是否创建成功。