1、HTML5 的离线储存怎么使?，?作原理能不能解释?下？
离线缓存有2种方法：
- HTML5 的离线存储
.appcache文件【废弃】 -
service-worker的标准
方法一：使用.appcache 机制
原理：
HTML5 的离线存储是基于?个新建的 .appcache ?件的缓存机制(不是存储技术)，通过这个?件上的解析清单离线存储资源，这些资源就会像 cookie ?样被存储了下来。
之后当?络在处于离线状态下时，浏览器会通过被离线存储的数据进???展示。
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ?件，如果是第?次访问 app ，那么浏览器就会根据manifest?件的内容下载相应的资源并且进?离线存储。
已经访问过 app 并且资源已经离线存储了，那么浏览器就会使?离线的资源加载??，然后浏览器会对?新的 manifest ?件与旧的 manifest ?件，如果?件没有发?改变，就不做任何操作，
如果?件改变了，那么就会重新下载?件中的资源并进?离线存储。
如果离线，浏览器就直接使?离线存储的资源。
方法二：service-worker
原理：
service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。
它的特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），拦截和处理网络请求。
使用方法：
1.特性检查，在注册之前确保 service worker 是支持的。
if(‘serviceWorker‘ in navigator) {
// Has support!
}
2.注册
navigator.serviceWorker.register(‘/sw-test/sw.js‘, { scope: ‘/sw-test/‘ }).then(function(){
// 注册需要缓存的文件 目录
})
3.在你的 service worker 注册之后，浏览器会尝试为你的页面或站点安装并激活它。
install 事件会在注册完成之后触发。install 事件一般是被用来填充你的浏览器的离线缓存能力。
在安装事件内，我们使用了 caches.open() 方法来创建了一个叫做 v1 的新的缓存，将会是我们的站点资源缓存的第一个版本。
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
this.addEventListener(‘install‘, function (event) {
/* 通过这个方法可以防止缓存未完成，就关闭serviceWorker */
event.waitUntil(
/* 创建一个名叫V1的缓存版本 */
caches.open(‘v1‘).then(function (cache) {
/* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
return cache.addAll([
‘./index.html‘
]);
})
);
});
4./* 注册fetch事件，拦截全站的请求 */
this.addEventListener(‘fetch‘, function(event) {
event.respondWith(
// magic goes here
/* 在缓存中匹配对应请求资源直接返回 */
caches.match(event.request)
);
});
appCatch 与 worker-service的区别？
APP Cache 的的主要问题是坑比较多，而且其被设计为只适合于单页 web 应用程序，对于传统的多页网站则不适合。service worker 的设计规避了这些痛点。