第四步：添加service worker

　　什么是service worker呢?有了它，网站就可以在离线状态下运行。它是一段运行在浏览器后台进程里的脚本，可独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静默更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求的功能，包括可编程的消息缓存管理能力。

　　service worker的作用主要有：1)网络代理，转发请求，伪造响应;2)离线缓存;3)消息推送;4)后台消息传递

　　创建service worker的过程主要分三步：

　　(1)把以下代码添加到index.html文件的当中：

　　(2)把sw-toolbox添加到我们的项目。我们只需要把这个文件添加到根目录中。

　　(3)新建一个文件，将其命名为sw.js并把以下内容复制、粘贴到该文件内。

　　‘use strict’;

　　importScripts(‘sw-toolbox.js’); toolbox.precache([“index.html”,”style/style.css”]); toolbox.router.get(‘/images/*’, toolbox.cacheFirst); toolbox.router.get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5});

　　这三步都完成以后，我们需要确认文件的路径、编辑预缓存(precache )并列出所有我们想要在离线状态下储存的文件。本文作者uve在他的页面仅仅使用了index.html和style.css两个文件，而我们也考可以另外添加别的文件或页面。

　　然后，我们就可以再次打开Lighthouse，进行测试。以下是添加了service worker以后在本地主机(localhost)的测试结果：

　　除了保存页面之外，如果想让service worker实现别的功能(比如在没有网络的情况下，显示特定离线页面)，我们可以登录pwabuilder，这里有一些不同的service worker脚本(script)可供使用。

　　第五步：交给GitHub Pages托管

　　PWA创建成功后，是时候与全世界分享你的作品了!根据本文作者uve解释，发布PWA页面最简单的方法就是登录 GitHub Pages。

　　GitHub Pages是一个面向开源及私有软件项目的托管平台，完全免费，因为只支持Git作为唯一的版本库格式进行托管，故名 GitHub。

　　通过使用GitHub的GUI(图形用户界面)，我们可以轻松地把我们的代码交给GitHub管理，创建一个库(repository)，把我们的代码放进去。

　　这一步完成以后，我们就要在Github上找到我们的PWA网站，进入设定页面，向下滚动鼠标，滑至页面下方，选择主分支(master branch)，从而激活GitHub页面。

　　这样，你的PWA页面就有了一个有效的(live)URL。

　　这时候再打开Lighthouse，就会发现测试结果大大不同了。

　　现在，你终于可以把自己的PWA页面和朋友们分享啦!或者，你也可以下载这个PWA页面，添加到你的手机主页。

　　作者uve本人的作品实例

　　上图就是作者的PWA页面在手机上的效果。(查看作者的代码，请戳这里)

　　这是作者为了写这个科普贴子而特地制作的PWA页面，名为“Web Community Leads UK and IE”，是一个促进人们互相交流web技术的平台。

　　(关于该平台的详情，可关注Daniel的贴子，也可以直接浏览该页面。)

　　虽然这个和作者刚开始建立PWA的时候看起来一样，但是在Samsung Internet(三星自带的浏览器)上浏览它的时候，地址栏会变成主题色(淡紫)。而且，页面上还会出现“+”的符号，点击它，我们就可以把这个PWA页面添加到手机主屏幕。点击主屏幕当中的PWA图标，就可以使它全屏显示，并且我们还可以在离线状态下使用。