有趣的HTML5：离线存储

时间 2019-11-08

标签有趣 html5 html 离线存储栏目 HTML5 繁體版

原文原文链接

最近因为找工做一直没时间也没有精力更新博客，找工做真是一件苦逼的事情啊。。。不抱怨了，咱们来看看HTML5的新特性---离线存储吧。javascript

随着Web App的发展，愈来愈多的移动端App使用HTML5的方式来开发，除了一些HybridApp之外，其余一部分Web App仍是经过浏览器来访问的，经过浏览器访问就须要联网发送请求，这样就使得用户在离线的状态下没法使用App，同时Web App中一部分资源并非常常改变，并不须要每次都向服务器发出请求，出于这些缘由，HTML5提出的一个新的特性：离线存储。经过离线存储，咱们能够经过把须要离线存储在本地的文件列在一个manifest配置文件中，这样即便在离线的状况下，用户也能够正常使用App。css

怎么用

首先来说解下离线存储的使用方法，提及来也很简单。只要在你的页面头部像下面同样加入一个manifest的属性就能够了。html

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

而后cache.manifest文件的书写方式，就像下面这样：html5

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

离线存储的manifest通常由三个部分组成:
1.CACHE:表示须要离线存储的资源列表，因为包含manifest文件的页面将被自动离线存储，因此不须要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的状况下才能访问，他们不会被离线存储，因此在离线状况下没法使用这些资源。不过，若是在CACHE和NETWORK中有一个相同的资源，那么这个资源仍是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示若是访问第一个资源失败，那么就使用第二个资源来替换他，好比上面这个文件表示的就是若是访问根目录下任何一个资源失败了，那么就去访问offline.html。java

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢？这里须要分两种状况来讨论。node

在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。浏览器
离线的状况下，浏览器就直接使用离线存储的资源。缓存

这个过程当中有几个问题须要注意。服务器

若是服务器对离线的资源进行了更新，那么必须更新manifest文件以后这些资源才能被浏览器从新下载，若是只是更新了资源而没有更新manifest文件的话，浏览器并不会从新下载资源，也就是说仍是使用原来离线存储的资源。app
对于manifest文件进行缓存的时候须要十分当心，由于可能出现一种状况就是你对manifest文件进行了更新，可是http的缓存规则告诉浏览器本地缓存的manifest文件还没过时，这个状况下浏览器仍是使用原来的manifest文件，因此对于manifest文件最好不要设置缓存。
浏览器在下载manifest文件中的资源的时候，它会一次性下载全部资源，若是某个资源因为某种缘由下载失败，那么此次的全部更新就算是失败的，浏览器仍是会使用原来的资源。
在更新了资源以后，新的资源须要到下次再打开app才会生效，若是须要资源立刻就能生效，那么可使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的缘由是浏览器会先使用离线资源加载页面，而后再去检查manifest是否有更新，因此须要到下次打开页面才能生效。

我们来试试吧

说了这么多，不如本身动手来试试。这里须要说明的是，若是须要看到离线存储的效果，那么你须要把你的网页部署到服务器上，不论是本地仍是生产环境服务器中，经过本地文件打开网页是没法体验到离线存储的。
我在个人电脑上跑了一个本地node服务器，经过localhost访问。个人manifest文件向下面这样：

CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css

而后咱们访问网页看看效果。

能够看出浏览器根据manifest文件下载相应资源而且缓存在本地，如今咱们来试试再次访问网页

资源已经离线存储在本地，因此浏览器不须要再次下载资源，能够直接使用本地缓存的资源。接着，咱们更新下服务器上的资源，好比我修改下app.js，结果我这里就不显示了，跟上面那张图是同样的，更新的资源并无生效，如今咱们更新下manifest文件，好比把版本改成0.12

很显然，只有更新了manifest文件，对离线资源的更新才能在浏览器上生效。
最后，咱们来试试离线状态下是什么状况，这才是离线存储的重头戏。经过Chrome设置离线状态，刷新页面

因为在离线状态，因此浏览器没法访问到manifest文件，可是网页仍是能够正常访问，这就是离线存储的威力。
对于HTML5中离线存储对象window.applicationCache有几个事件须要咱们关注下：

1.oncached:当离线资源存储完成以后触发这个事件，这个是文档的说法，我在Chrome上面测试的时候并无触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成以后会触发这个事件
6.onnoupdate:当浏览器检查更新以后发现没有资源更新的时候触发这个事件

参考文章：
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
http://diveintohtml5.info/offline.html

有趣的HTML5：离线存储

怎么用

浏览器怎么解析manifest

我们来试试吧

最后，安利下个人我的博客，欢迎访问: http://bin-playground.top