Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

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
HTML

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标准废弃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@WarpPrism