PWA 初探与实践（2）serviceWork - 草稿

良好的用户体验来自于反馈，我们在使用 web 时不希望看到下面的画面，即使在没有网或是网络不畅的情况下。

所以离线应用变得重要，有了离线应用，我们的 Web App在无网（offline）情况下也可以正常访问，甚至使用部分功能，等到联网是同步服务端的数据。而不是展示“无网络连接”的错误页。

看一看 serviceWork 是如何帮助我们实现离线应用的。那么什么是 service Woker 呢？可以把 Service Worker 简单地理解为一个独立于前端项目进程，一个独立运行的进程。因此，它不会阻塞浏览器脚本的运行，同时也无法直接访问浏览器相关的API（例如：DOM、localStorage等）。此外，即使在离开 Web App，甚至是关闭浏览器后，service work 仍然可以运行。来处理着缓存、推送、通知与同步等工作。所以，要学习PWA，绕不开的就是Service Worker。

这些部分会是PWA技术的重点。需要特别注意的是，由于Service Worker所具有的强大能力，因此规范规定，Service Worker 只能运行在 HTTPS 域下。然而我们开发时候没有 HTTPS 怎么办？别着急，还有一个贴心的地方——为方便本地开发，Service Worker 也可以运行在 localhost（127.0.0.1）域下。

好，现在我们一起开始 servicework 之旅吧。首先我们在项目的 index.html 同级目录下创建 sw.js。这个文件就是 serviceWorker。然后我们返回到 app.js 在 app.js 中注册 sw.js 文件。由于不是所有浏览器都支持。所以需要先判断是否支持serviceWorker。值得一提的是，Service Worker的各类操作都被设计为异步，用以避免一些长时间的阻塞操作。这些API都是以Promise的形式来调用的。

图1

我们先测试测试一下 ,在 ws.js 中添加下面代码。打开 chrome 的 console 面板看一下，我们发现这里输出了 hello service worker 。

我们看一下 serviceWorker 做了哪些事情。其实 Service Worker 起了一个代理作用。Service Worker有一个非常重要的特性：你、可以在 Service Worker中监听所有客户端（Web）发出的请求，然后通过 Service Worker来代理，向后端服务发起请求。通过监听用户请求信息，Service Worker可以决定是否使用缓存来作为Web请求的返回

图2

我们通过代码证明一下，客服端所有发起的请求都会被 fetch 这个监听器所监听。我们在 fetch 的监听器中打一个断点。

图3

我们可以在 fetch 中返回 new Response("hello") 来代替所有客户端

图5 图6

我们可以通过下面代码来实现，当用户在客户端输入一个不存在的如有例如 http://localhost:5500/unknown.html。不会返回 404 页面，而是返回一个友好的页面。我们尝试使用 serviceWorker 来实现一下。我们通过判断返回的status 状态码如果为 404 那么就返回本地预先定义好 404.html 页面看看效果。

好了，看一看如何使用Service Worker实现离线可用的“秒开”应用。

在开始之前我们需要储备一些有关 serviceWorker 的基础知识。

当我们注册了Service Worker后，它会经历生命周期的各个阶段，同时会触发相应的事件。整个生命周期包括了：installing --> installed --> activating --> activated --> redundant。当Service Worker安装（installed）完毕后，会触发install事件；而激活（activated）后，则会触发activate事件

图7

我们在监听 install 事件，也就是说在 install 这个阶段做一些事，在回调函数中会获取 event 对象，我们用 event waitUntil 方法会接受一个 promise 对象。

caches.open 会返回一个 promise 对象。会创建一个缓存 static-v1 然后将一些静态资源缓存到这个 static-v1。然后我们在 fetch 监听器。

fetch 事件会监听所有浏览器的请求。event.respondWith() 方法接受 Promise 作为参数，通过它让Service Worker向浏览器返回数据。caches.match(event.request) 则可以查看当前的请求是否有一份本地缓存：如果有缓存，则直接向浏览器返回cache；否则Service Worker会向后端服务发起一个fetch(event.request)的请求，并将请求结果返回给浏览器。

图9

我们可以在 cache 中查看到缓存内容。

然后勾选 offline 后会出现我们缓存的画面。

我们也可以更新缓存，内容提高一个版本为 static-v2 ，当我们更新却无法看到效果，我们需要关闭标签页，然后重新进入 web 才能看到效果如下。

serviceWorker 的威力不仅仅这些，随后我们继续会在其部分内容介绍 serviceWorker。

图10 图11 图12

希望大家多多支持我的微信公众号

小马学编程