Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

HTML5离线存储 #20

Closed
WarpPrism opened this issue Dec 3, 2016 · 1 comment
Closed

HTML5离线存储 #20

WarpPrism opened this issue Dec 3, 2016 · 1 comment
Labels

Comments

@WarpPrism
Copy link
Owner

简介

随着Web App的发展,越来越多的移动端App采用HTML5的方式来开发。但是目前除了Hybrid App外,其他Web App还是需要通过浏览器来访问,对于移动端来说,就产生了以下两个不方便之处:

  • 无法离线访问
  • 每次访问都要向服务器请求资源,造成了用户时间的浪费,也增加了服务器的负载

为了解决上述问题,HTML5提出了离线存储的概念。使用时,只需在App的html文件中添加manifest属性即可,如下所示:

<!DOCTYPE HTML>
<html lang="en" manifest="demo.appcache">
<head>
</head>
...
</html>

manifest文件

manifest文件,也即 .appcache 文件,又称作解析清单,里面列出了要进行离线缓存的文件,和不缓存的文件。

CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resource/logo.png
*

FALLBACK:
/ /404.html

它一般分为3个部分,分别是:

  1. CACHE: 表示需要离线缓存的文件,其中制定了manifest属性的html文件将被自动离线存储,因此不需要列出来
  2. NETWORK: 表示它下面列出来的文件只有在线的情况下才可以访问,不会被缓存,但如果CAHCHE和NETWORK中同时指定了同一个文件,以CACHE为最高优先级
  3. FALLBACK: 表示如果第一个资源访问失败,用第二个资源来替换它,上述例子就表示如果访问任意资源失败,就用404页面来替换

离线应用访问流程

用户首次在线访问,浏览器发现html文件中有manifest属性,于是请求这个manifest文件,然后浏览器根据manifest文件中指定的文件列表缓存相应的资源。

用户再次在线访问,浏览器直接采用离线存储的资源加载页面,然后服务器请求新的manifest文件,如果manifest文件没有被修改,则触发Application Cache NoUpdate event,然后什么都不做。如果manifest文件发生改变,则重新下载所有资源,并进行离线存储,之后触发Application Cache UpdateReady 事件,但此时浏览器显示的还是旧的页面内容,需要再次刷新页面才行。为了解决这个用户体验问题,可在应用中采用以下代码:

// method1 简单粗暴
window.applicationCache.onupdateready = function() {
	applicationCache.swapCache();
	location.reload();
}

// method2
window.applicationCache.addEventListener('updateready', function(e) {
	applicationCache.update();
	applicationCache.swapCache();
	location.reload();	
}, false);

用户离线访问,浏览器就直接使用离线存储的资源。

window.applicationCache对象

即js中的离线存储对象,它有以下几个常用事件:

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

注意事项

  • manifest文件不要设置http缓存,确保浏览器每次都能从服务器那里拿到最新的manifest文件
  • 只有更新manifest文件,才能更新已经被离线存储的资源
  • 如果更新中某个资源下载失败,则整个更新就视作失败,浏览器会依旧采用原来的资源
  • 站点离线存储的容量限制是5M
  • 引用manifest的html必须与manifest文件同源,在同一个域下
  • 在manifest中使用的相对路径,相对参照物为manifest文件
  • 在manifest中使用的相对路径,相对参照物为manifest文件
  • FALLBACK中的资源必须和manifest文件同源
@WarpPrism WarpPrism added the HTML label Dec 3, 2016
@WarpPrism
Copy link
Owner Author

已被W3C标准废弃

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant