HTML5 使用application cache 接口实现离线数据缓存
1.配置缓存文件 cache manifest
MIME TYPE:text/cache-manifest
文件名称:name.appcache
作用:用于配置需要缓存的文件
2.使用方法
在服务器上添加MIME TYPE
在apache virtual host 中添加
- AddType text/cache-manifest .appcache
创建 name.manifest,文件后缀可自定义,定义后需要在服务器上添加对应的MIME TYPE
- CACHE MANIFEST
- #VERSION 1.0
- CACHE:
- index.html
- ./js/jquery.js
- ./css/style.css
- NETWORK:
- ./upload/
- FAILBACK:
- ./proxy/ proxy.html
CACHE MANIFEST:文件标识
#VERSION 1.0 :版本号,只是一行注释,但改变可以更新缓存
CACHE:表示要缓存的文件
NETWORK:表示需要连接服务器的文件
FAILBACK:表示当没有响应时的替代方案
<html>标签添加manifest属性
<html manifest="name.appcache">
3.更新方法
1.自动更新:浏览器在第一次访问时访问应用缓存,之后只会在cache manifest文件发生变化时更新缓存(即使注释变化也会更新,#VERSION 1.0的作用),而cache manifest中的资源文件发生变化则不会触发更新。
2.手动更新:以编程方法更新缓存,先调用applicationCache.update(),此操作尝试更新用户的缓存(前提是cache manifest文件有更改)。然后当applicationCache.status为UPDATEREADY状态时,调用applicationCache.swapCache()即可将原缓存换成新缓存。
- ar appCache = window.applicationCache;
- appCache.update(); // Attempt to update the user's cache.
- ...
- if (appCache.status == window.applicationCache.UPDATEREADY) {
- appCache.swapCache(); // The fetch was successful, swap in the new cache.
- }
使用update() 和 swapCache() 不会向用户提供更新的资源,只会让浏览器检查是否有新的cache manifest清单,下载指定的更新内容及重新填充应用缓存。因此需要两次加载才能向用户提供新内容。第一次是获得新的应用缓存,第二次是刷新网页内容。
避免重新加载两次的麻烦,可以设置监听器,监听网页加载时updateready的事件。
- // Check if a new cache is available on page load.
- window.addEventListener('load', function(e) {
- window.applicationCache.addEventListener('updateready', function(e) {
- if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
- // Browser downloaded a new app cache.
- // Swap it in and reload the page to get the new hotness.
- window.applicationCache.swapCache();
- if (confirm('A new version of this site is available. Load it?')) {
- window.location.reload();
- }
- } else {
- // Manifest didn't changed. Nothing new to server.
- }
- }, false);
- }, false);
4.在线状态检测和监视
检测:navigator.onLine 属性表示当前是否在线,如果为 true,表示在线。如果为 false, 表示离线。
监视:当在线/离线状态切换时,会触发online/offline事件,这两个事件触发在body元素上,并且沿着document.body,document 和 window的顺序冒泡。
6.注意事项
1. 站点离线存储的容量限制是5M
2. 如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源,在同一个域下
4. 在manifest中使用的相对路径,相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行,且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK,FALLBACK的位置顺序没有关系,如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时,资源请求本身也会触发更新
HTML5 使用application cache 接口实现离线数据缓存的更多相关文章
- [Selenium] Android HTML5 中 Application Cache
HTML5 中引入了 Application Cache,这意味着 Web 应用程序可以被缓存到本地,且可在没有网络的情况下也能访问该 Web 应用程序 Application Cache 在以下3个 ...
- 【HTML5】Application Cache应用程序缓存
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...
- SpringBoot 结合 Spring Cache 操作 Redis 实现数据缓存
系统环境: Redis 版本:5.0.7 SpringBoot 版本:2.2.2.RELEASE 参考地址: Redus 官方网址:https://redis.io/ 博文示例项目 Github 地址 ...
- php cache类代码(php数据缓存类)
如果访问量大的话会给数据库造成很大的负担,所以对于变化不经常的内容要做好php 数据cache(缓存)是十分必要的,我做了一个简单的php“文件缓存”的类,希望对大家有所帮助. 思路是这样的: 对于一 ...
- 转 html5离线储存,application cache,manifest使用体验
html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...
- HTML5 Application cache初探和企业应用启示
Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...
- html5 Application Cache 机制以及使用
那什么是Application Cache呢? 顾名思义,AppCache就是对app内存缓存的方案,具体表现为当请求某个文件时不是从网络获取该文件,而是从本地内存中获取. Application C ...
- html5 Application Cache——加快简历二次访问速度
上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
随机推荐
- NetBeans建立跳过测试构建的快捷方式
在项目浏览器中右键项目->属性,如图进行设置: 此后按下图即可运行自定义行为:
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- iOS企业分发证书制作
自签名证书制作流程 打开终端,输入 openssl genrsa - ,生成名称为ca的秘钥 注:openssl生成的文件皆放在用户文档下(finder菜单栏'前往' - 电脑 -Macintosh ...
- ASP.NET获取百度地图提供的API接口里面的JSON
思路:开始是想直接在前台获取,但是跨域访问还是有点难度,而且格式必须是josnp格式的,最后嫌麻烦,不得已放弃. 我做的ASP.NET 而这个有自带的解析类,直接引用就行了 先在后台获取到JOSN: ...
- 远方的塔--Pylons
转自:https://en.wikipedia.org/wiki/Pylons_project#Pylons_Framework Pylons
- JSON resource 启示
好久没写博客了,刚走完20000步,不废话了,先吐为快. 上面的en-us.json 是一个简单得不能再简单的json对象,当你写下"key-2": "duplicate ...
- Mac OS X上搭建伪分布式CDH版本Hadoop开发环境
最近在研究数据挖掘相关的东西,在本地 Mac 环境搭建了一套伪分布式的 hadoop 开发环境,采用CDH发行版本,省时省心. 参考来源 How-to: Install CDH on Mac OSX ...
- CSS--实现小三角形
<style> html, body { margin: 0; padding: 0; } /*下面用CSS3分别实现向上.下.左.右的三角形*/ .btn-color{ color: # ...
- 一个轻量级分布式RPC框架--NettyRpc
1.背景 最近在搜索Netty和Zookeeper方面的文章时,看到了这篇文章<轻量级分布式 RPC 框架>,作者用Zookeeper.Netty和Spring写了一个轻量级的分布式RPC ...
- 阿里开源消息中间件RocketMQ的前世今生-转自阿里中间件
昨天,我们将分布式消息中间件RocketMQ捐赠给了开源软件基金会Apache. 孵化成功后,RocketMQ或将成为国内首个互联网中间件在Apache上的顶级项目. 消息一出,本以为群众的反应是这样 ...