前言
最近笔者有些精神恍惚，人生中一些印象深刻的事情，像PPT一样从脑海中一一闪过，比如：
- 小学时候作为劳动委员，常年负责掏学校里一个蘑菇形的垃圾桶，结果有一天捡到了好几张一块钱，贼开心。
大学里有一天下晚自习，一推门，瞧见一个天使般面容的女子，贼开心。- 有一次通宵加班（非快狗打车），早上回家时，反向地铁居然有座位，贼开心。
- 有一次被提了一个bug：
（事实证明文字顺序并不影响阅读）作为一个被困在Webview里的FE，我沉默了，贼不开心。
----------以上是暖场----------
无网络时，前端真的什么都做不了吗？本文滚动条以及直觉告诉你，那一定不是的。
联想到几个月前写的一篇无人问津的文章：《Service Worker从入门到出门》（这是广告，方便的话请去点赞，对您没什么好处，但我会高兴），笔者意识到，如果不计代价的话，借助Service Worker，那个bug里要求的效果，其实也不是不可能实现。
本文决定，不纠结于那个bug，而针对无网络的极限场景，用尽量少的代码，实现一个demo级别的离线Web应用。
一点说明
所谓的离线应用，不是指一直离线，一直没网的话，那还玩些什么呢？而是指一开始用户是有网络的，但是用户因为走进地铁，或者买了近两年的iPhone，突然就没网了，此时，让页面展示一些缓存的内容。
理清思路、抓住关键
实现一个离线Web应用的关键在于：拦截请求和缓存资源。
- “拦截请求”通过Service Worker实现。
- “缓存资源”通过CacheStorage实现。
在此假设读者了解Service Worker和CacheStorage的基础。
简单来讲，如果不考虑HTTP缓存的话，一个普通Web App获取静态资源是从服务器获取的。但是Service Worker相当于在浏览器的出口加了一层代理，有着拦截并处理请求的能力，这使得我们有机会选择资源是从服务器取还是从CacheStorage中取。
CacheStorage既然作为一种缓存，那大概就要遵从“如果命中缓存则返回缓存中的资源，否则从远处取”的基本策略。
具体到一个Web应用，静态资源可以粗略分为html和其它（js、css、图片等），html作为应用入口，有着它的特殊性。实现离线应用的关键在于缓存入口html，这是实现离线应用的核心思路。设想一下，如果html保存在本地，那在无网络的情况下，浏览器也是可以打开的，至于html引用的其它静态资源，如果缓存过，那也是可以访问的。
代码
首先，初始化一个项目，在此以Vue项目为例，在入口html中注册service worker：
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/demo/service-worker.js').then(function (reg) {
console.log('service-worker.js注册成功');
}, function (err) {
console.log('service-worker.js注册失败');
});
});
}
</script>
service-worker.js代码：
// 每次更新需要更新版本号
const cacheVersion = 'v1';
// service worker激活时的初始化操作，非关键代码，可以不看
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames.map(function (cacheName) {
// 如果当前版本和缓存版本不一致，则删除其它版本的cache
if (cacheName !== cacheVersion) {
return caches.delete(cacheName);
}
})
);
})
);
});
// 核心代码，最好看一看
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
// 如匹配了cache，则直接返回cache中的资源
// 否则fetch资源并缓存下来
return response || fetch(event.request).then(function (r) {
caches.open(cacheVersion).then(function (cache) {
cache.put(event.request, r);
});
return r.clone();
});
})
);
});
成果展示
代码部署好后，访问页面，刷新，可以看到：cacheStorage中的静态资源已经缓存成功：
(from ServiceWorker)：
总结
所以，如此少的代码，就可以实现一个离线Web应用，但是从Demo到实际应用，还有好长的路要走。无论如何，本文所述的是离线Web应用的基本思路和方法。希望大家能够喜欢，甚至点赞。（温馨提示：点赞并不花钱）
关于我们
快狗打车前端团队专注前端技术分享，定期推送高质量文章，欢迎关注点赞。 文章同步发布在公众号哟，想要第一时间得到最新的资讯，just scan it ！
