什么是离线访问
访问网站需要网络，断网情况下访问网站在谷歌浏览器下会跳转到小恐龙页面。
（用鼠标点击小恐龙会有惊喜😁）
Service Worker 是 PWA 的一个特性，可以让我们的网站在断网的情况也能访问。
离线访问原理
正常情况下，访问网站，浏览器会向服务端发送请求，服务端处理之后返回资源。
给网站添加 Service Worker 后。
第一次访问网站，Service Worker 拦截 http 请求；
先去缓存(Cache)里找一找有没有该资源，没找到，向服务端发请求；
服务端返回资源后，将资源添加一份到缓存(Cache)中，再返回给浏览器。
第二次访问网站，Service Worker 拦截 http 请求；
先去缓存(Cache)里找一找有没有该资源，找到了之前添加的资源，直接返回给浏览器；
省去了一次 http 请求，某种程度上来讲，网站访问速度也有提升。
从上述介绍可知，所谓离线访问，还是需要您先访问过该网站，并且 Service Worker 成功将资源在浏览器端进行缓存过，这样之后访问该网站才能做到离线访问。
将网站改造成支持离线访问
准备工作
PWA 要求一：网址必须是 https 协议，或者域名是 localhost。
本地下载个 nginx，将网页部署在 Web 服务器上，通过 localhost 访问。
不了解 Web 服务器的参考：图解 Web 服务器
写个网页 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Service Worker 离线缓存</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Service Worker 离线缓存 Demo</h1>
</body>
</html>
写样式文件 style.css，设置 h1 字体为红色
h1 {
color: red;
}
启动 nginx 服务器，通过 localhost 访问网站，可以看到下图。
（我这里端口用的是 3400，你的端口号可能和我的不一样）
注册 Service Worker
修改 index.html，注册 Service Worker
// index.html
<body>
<h1>Service Worker 离线缓存 Demo</h1>
<script>
// 判断浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
// 注册 Service Worker
navigator.serviceWorker.register('/sw.js')
.then(function (registration) {
console.log('sw.js 注册成功', registration.scope);
})
.catch(function (err) {
console.log('sw.js 注册失败 ', err);
});
});
}
</script>
</body>
- 'serviceWorker' in navigator 首先判断浏览器是否支持 Service Worker；
- navigator.serviceWorker.register('/sw.js') 这行代码即是注册 Service Worker，参数 sw.js 是一个 js 文件，名字可以随意取，service worker 的具体逻辑就写在✍️这里面，比如：拦截 http 请求，对缓存做操作。
写缓存逻辑
创建 sw.js 文件。
- 监听 fetch 事件，拦截请求；
- 对缓存做处理，请求再缓存中直接返回，不在缓存中则请求服务端，将响应的资源再缓存中备份一份。
// Service Worker 注册成功后，浏览器访问的每个请求都会经过 fetch 事件拦截
// Service Worker 注册失败，请求不会进入 fetch 事件
self.addEventListener('fetch', function (event) {
// 打印请求资源网址
console.log('url is', event.request.url)
event.respondWith(
// caches 是全局变量，它就是缓存对象
// 这一步是判断缓存中是否有该资源
caches.match(event.request).then(function (cacheRes) {
// cacheRes 不为空，缓存中有该资源，直接返回给浏览器
// 省去一次 http 请求
if (cacheRes) {
return cacheRes;
}
// cacheRes 为空，表示缓存中没有该请求
// 把原始请求拷过来
var request = event.request.clone();
// fetch 是浏览器自带的请求库，往服务端发送请求
return fetch(request).then(function (httpRes) {
// 请求失败了，直接返回失败的结果就好了。。
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}
// 请求成功的话，将响应添加到缓存中
// 下一次请求相同资源时直接从缓存中拿资源，就不用再发请求了
var responseClone = httpRes.clone();
caches.open('offline-cache-v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return httpRes;
});
})
);
})
测试
再次访问网页，还是可以看到之前👆的网页，貌似没啥变化~~
如何模拟离线状态呢？
正常情况下，访问 index.html 网页，内部包含外联样式 style.css，网页字体的颜色由外联样式控制，将 style.css 文件删除，再次访问页面的字体应该变成原来的黑色才对。
刷新页面，可以看到网页的字体仍然是红色，这就说明 Service Worker 缓存成功了。浏览器压根没有去 Web 服务器请求 style.css，而是直接从浏览器端的缓存(Cache)中拿到 style.css。
缓存不是什么神秘的东东，我们可以看得见摸得着它。
DevTool > Application > Cache，可以看到确实有缓存 sytle.css 文件，在红字3位置右键，删除 sytle.css 文件，然后刷新页面，可以看到页面字体变成了黑色。
如果你眼神👁够好，已经看到了上面👆还有个 Service Workers 的选项。
Service Worker 注册一次之后，会一直保存在浏览器端，即便你将网页关闭，它也一直存在。
- 右边👉箭头 Unregister 按钮可以取消已注册的 Service Worker，但是不会立即生效，当你关闭当前 Tab 页，下次再访问时才会发现被取消；
- Status #4283 表示 Service Worker 的版本号以及运行状态。
想一想：如果现在服务端的 style.css 样式有修改，浏览器端因为 Service Worker 的缓存中已存在 style.css 资源，压根不会再去服务端请求最新版本的 style.css 文件，怎么办？
更新 Service Worker
一劳永逸法
实际开发中，通常只将不怎么变化的文件放到 Service Worker 中，比如 jquery.min.css、vue.js 这些类库，而开发人员维护的 utils.js 以及 style.css 并不放到 Service Worker 中。
这部分工作在 sw.js 通过判断白名单可以做到，伪代码如下：
// sw.js
// 白名单
const whiteUrls = [
'jquery.js',
'vue.js',
]
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (cacheRes) {
// .......
return fetch(request).then(function (httpRes) {
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}
// 符合白名单的才放到缓存中，其它的正常请求
if (whiteUrls.findIndex(event.request.url) !== -1) {
var responseClone = httpRes.clone();
caches.open('offline-cache-v1').then(function (cache) {
cache.put(event.request, responseClone);
});
}
return httpRes;
});
})
);
})
这样做的好处是每当自己维护的 utils.js 和 style.css 有变化时，不用做任何其它的操作；
坏处是类库 juqery.min.js 和 vue.js 就没法子更新了，就个人项目来说，一般用的类库都是八百年不会更新的，用这种方法简单点，对于公司的项目来说，还是要做到每次部署上线时都要刷新下缓存才行。客官接着往下看👇
改缓存版本号
每当 sw.js 有变化时，哪怕只有一个标点符号的修改，浏览器端都能识别为 Service Worker 有更新。
当开发人员修改 utils.js 或者 style.css 后，等到下次部署上线时，都要手动修改版本号，示例代码中的 version 变量值。
const version = 'offline-cache-v2'
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (cacheRes) {
// .......
return fetch(request).then(function (httpRes) {
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}
// 缓存的版本号
var responseClone = httpRes.clone();
caches.open(version).then(function (cache) {
cache.put(event.request, responseClone);
});
return httpRes;
});
})
);
})
这样做的目的是告诉浏览器 Service Worker 有更新。下图可以看到 Service Worker 的版本号确实生成了 #4294，但是并不会立即生效，需要关闭当前页面，下次登录才会生效。并且缓存还是 v1，没有变成 v2。
- 解决上述缓存没有变化的问题：新增 activate 监听函数，每当 sw.js 有变化时都会进入该事件，内部删除旧的缓存对象，创建新的缓存对象；
- 解决上述需要关闭页面重新打开的问题：新增 install 监听函数，添加代码跳过 skipWaiting 状态，立即生效。
sw.js 最终完善代码如下。
const version = 'offline-cache-v2'
// Serverice Worker 安装成功后触发该事件
self.addEventListener('install', function (event) {
// sw.js 有更新，立即生效
event.waitUntil(self.skipWaiting());
});
// sw.js 有更新时触发该事件
self.addEventListener('activate', function (event) {
event.waitUntil(
Promise.all([
// 更新客户端
self.clients.claim(),
// 删除旧版本的缓存对象
caches.keys().then(function (cacheList) {
return Promise.all(
cacheList.map(function (cacheName) {
if (cacheName !== version) {
return caches.delete(cacheName);
}
})
);
})
])
);
});
// 网页发送请求触发该事件
self.addEventListener('fetch', function (event) {
console.log('url is', event.request.url)
event.respondWith(
caches.match(event.request).then(function (response) {
// 如果 Service Worker 有自己的返回，就直接返回，减少一次 http 请求
if (response) {
return response;
}
// 如果 service worker 没有返回，那就得直接请求真实远程服务
var request = event.request.clone(); // 把原始请求拷过来
return fetch(request).then(function (httpRes) {
// 请求失败了，直接返回失败的结果就好了。。
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}
// 请求成功的话，将请求缓存起来。
var responseClone = httpRes.clone();
caches.open(version).then(function (cache) {
cache.put(event.request, responseClone);
});
return httpRes;
});
})
);
})
