（如下图）。PWA即“渐进式网页应用”（Progressive Web App）。我们可以说，PWA是介于“网页”和“APP”之间的小程序，它基于页面运作，可以被拖拽到手机主页（如下图），功能有点像APP，甚至能与APP“一较高下”，但又有别于APP。的一位开发人员uve发表了名为“A beginner’s guide to Progressive WebApps”的PWA制作的新手教程，让一般用户也可以制定属于自己的“小程序”，体验一把“程序猿”的乐趣。
PWA以网页为载体，因此我们首先需要创建自己的网页。HTML5 UPStart Bootstrap就是两个很好的HTML模板资源站点。我们可以从中挑选并下载自己喜爱的主题包。下载完毕后，打开主题包，找到index.html文件点开，把里面所有内容都换成自己想要的样子。有经验的朋友们也不妨尝试运用CSS语言改变页面中的各种颜色布局。
Lighthouse是Chrome浏览器上的拓展程序，能够帮助我们测试PWA，并提供相关的改善方案。
在浏览器上安装好Lighthouse以后，在浏览器右上方找到这个拓展程序，点击Generate report按钮（如下图）以针对当前打开的页面运行 Lighthouse 测试。
在完成审查后，Lighthouse 将打开一个新标签，并在页面的结果上显示一个报告（如下图）。
如果感觉信息量太大，看着麻烦，可以直接关注页面顶部的四个主要指标（如下图）。现在我们的PWA基本上还什么都没有，所以得个36分也很正常。
PWA可以拖拽到手机主屏幕，因此需要一个像APP那样的图标。这个图标的比例必须是1:1，也就是正方形。
大家可以登陆the noun project（如下图），这是一个强大的图标制作网站，里面几乎囊括了“”的图标。
做好图标以后，就要把图标放到页面上去了。大家可以采用Favicon & App Icon Generator。把新做的图标上传到这个网站，它就会生成几个不同大小的图标以及一些HTML代码。然后，我们需要进行以下操作：
确保图标的径不出错。如果把图标放在了子文件夹，则需要在每一行都加上“icons/”（如下图）
manifest文件包含了一个网站的名字、主要颜色以及图标等数据。我们在Favicon & App Icon Generator上也可以生成manifest文件，但我们还要对manifest文件做一些额外的改动。
登陆Web App Manifest Generator，输入我们创建的PWA的各种信息。如果有不确定的，可以不填，系统会自动选择默认项。
复制页面右手边的JSON数据（如下图）并将其粘贴到manifest.json文件当中的顶部。要注意别打乱格式，有时候会需要加个逗号或删除一个括弧。最终完成的manifest文件是这样的：仅供参考。
什么是service worker呢？有了它，网站就可以在离线状态下运行。它是一段运行在浏览器后台进程里的脚本，可于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静默更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力。
service worker的作用主要有：1）网络代理，转发请求，伪造响应；2）离线）后台消息传递
这三步都完成以后，我们需要确认文件的径、编辑预缓存（precache）并列出所有我们想要在离线状态下储存的文件。本文作者uve在他的页面仅仅使用了index.html和style.css两个文件，而我们也考可以另外添加别的文件或页面。
然后，我们就可以再次打开Lighthouse，进行测试。以下是添加了service worker以后在本地主机（localhost）的测试结果：
除了保存页面之外，如果想让service worker实现别的功能（比如在没有网络的情况下，显示特定离线页面），我们可以登录pwabuilder，这里有一些不同的service worker脚本（script）可供使用。
PWA创建成功后，是时候与全世界分享你的作品了！根据本文作者uve解释，发布PWA页面最简单的方法就是登录GitHub Pages。
GitHub Pages是一个面向开源及私有软件项目的托管平台，完全免费，因为只支持Git作为唯一的版本库格式进行托管，故名 GitHub。
通过使用GitHub的GUI（图形用户界面），我们可以轻松地把我们的代码交给GitHub管理，创建一个库（repository），把我们的代码放进去。
这一步完成以后，我们就要在Github上找到我们的PWA网站，进入设定页面，向下滚动鼠标，滑至页面下方，选择主分支（master branch），从而激活GitHub页面。
现在，你终于可以把自己的PWA页面和朋友们分享啦！或者，你也可以下载这个PWA页面，添加到你的手机主页。
这是作者为了写这个科普贴子而特地制作的PWA页面，名为“Web Community Leads UK and IE”，是一个促进人们互相交流web技术的平台。带金字旁的女孩名字
本文由 325游戏（m.325games.com）整理发布