HTML5-Service Worker实现离线页面访问 _缓存

如果提到HTML5的新API，，Web 大家应该比较熟悉。是用于简述请求数量的新协议，Web 是用于实现浏览器的多线程。而今天要介绍的是用于页面离线缓存，提供类似App的服务。注意，这和浏览器缓存不是一回事。
【HTML5-Service Worker实现离线页面访问】下面所有代码请查看下载完整版本
1.介绍
试想，当你正在访问一个人的博客目录，当你找到你感兴趣的博客时候，想点击进入查看完整博客，这时候断网了，你将会看到如下页面：

文章插图

文章插图
忽略上面的网址，这是我在自己浏览器里使用 -> 开发者工具 -> New Work ->模拟断网，访问我本地服务器上网页的结果。你看到页面应该类似。这时候仅仅依靠浏览器缓存是无法解决问题的。于是HTML5提出了，它是一段运行在浏览器后台进程里的脚本，它独立于当前页面，提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。在将来，基于它可以实现消息推送，静默更新以及地理围栏等服务，但是目前它首先要具备的功能是拦截和处理网络请求，包括可编程的响应缓存管理。所以，使用它可以断网情况下轻松实现拦截用户请求，用已经缓存的页面代替服务器响应，简称离线缓存。
注意：由于权限很高，只支持https协议或者
2.使用 2.1 生命周期
先来看一下一个的运行周期（图片来源：）

文章插图

文章插图
拥有一个完全独立于Web页面的生命周期。
要让一个在你的网站上生效，你需要先在你的网页中注册它。注册一个之后，浏览器会在后台默默启动一个的安装过程。
在安装过程中，浏览器会加载并缓存一些静态资源。如果所有的文件被缓存成功，就安装成功了。如果有任何文件加载或缓存失败，那么安装过程就会失败，就不能被激活（也即没能安装成功）。如果发生这样的问题，别担心，它会在下次再尝试安装。
当安装完成后，的下一步是激活，在这一阶段，你还可以