启动html5的应用缓存

<!DOCTYPE HTML>
<html manifest="filename.appcache">
</html>

filename.appcache的例子

CACHE MANIFEST
# 版本标识 v1 # 必选 缓存文件
CACHE:
/webapp/html/resource/test.css
/webapp/html/test.html # 可选 需要联网
NETWORK:
/webapp/html/HCApproval_Main.html
# * 表示全部都需要 # 可选 失败的重定向
# FALLBACK:
# / webapp/html/help.html

更新缓存

浏览器清除缓存

filename.appcache 文件的任意修改,也会触发缓存更新

JS更新缓存

window.addEventListener('load', function(){
// window.applicationCache.update(); // 手动更新缓存 或者 监听到加载缓存完成事件后 刷新页面
  window.applicationCache.addEventListener("updateready", function(e){
  console.log(window.applicationCache.status);
  setTimeout(function(){
    window.location.reload();
  }, 3000);
  });
});
window.applicationCache 对象属性和事件方法
  1. oncached:null
  2. onchecking:null
  3. ondownloading:null
  4. onerror:null
  5. onnoupdate:null
  6. onobsolete:null
  7. onprogress:null
  8. onupdateready:null
  9. status:1
window.applicationCache.status 的几个值
  • UNCACHED (0):未启用离线应用
  • IDLE (1):已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
  • CHECKING (2):当前更新缓存的状态为“检查中”
  • DOWNLOADING (3):当前更新缓存的状态为“下载资源中”
  • UPDATEREADY (4):当前更新缓存的状态为“更新完毕”
  • OBSOLETE (5):已开启离线应用,但缓存资源都已标记为废弃

html5 的缓存应用 manifest="filename.appcache"的更多相关文章

  1. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  2. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  3. HTML5 缓存: cache manifest

    ---恢复内容开始--- 1:MIME TYPE:text/cache-manifest 服务器配置MIME类型2:需要由你创建的:NAME.manifest 创建manifest文件3:给 < ...

  4. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  5. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  6. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  7. HTML5 离线缓存详解(转)

    离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  8. HTML5 Web缓存&运用程序缓存&cookie,session

    在介绍HTML5 web缓存前,来认识一下cookie和session: session: 由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的. 因此session(会话)出现了,它会 ...

  9. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

随机推荐

  1. 【转】XCode环境变量及路径设置 -- 待学习

    原文网址:http://www.cnblogs.com/oc-bowen/p/5140541.html 一般我们在xcode里面配置包含工程目录下头文件的时候,都要关联着相对路径和绝对路径,如果只是自 ...

  2. 【转】Github轻松上手3-使用Tower图形化界面工具创建和管理repo

    转自:http://blog.sina.com.cn/s/blog_4b55f6860100zzib.html 除了在命令行中输入特定的命令,另外一种方式就是用第三方的可视化工具,比如Mac下的Tow ...

  3. [转] C#中的Dictionary的使用

    txw1958 的 原文 说明    必须包含名空间System.Collection.Generic     Dictionary里面的每一个元素都是一个键值对(由二个元素组成:键和值)     键 ...

  4. [C#搜片神器] 之P2P中DHT网络爬虫原理

    继续接着上一篇写:使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计(开源)[搜片神器] 昨天由于开源的时候没有注意运行环境,直接没有考虑下载BT种子文件时生成子文件夹,可能导致有的朋友运行 ...

  5. PHP 转义详解

    php中数据的魔法引用函数 magic_quotes_gpc  或 magic_quotes_runtime 设置为on时,为我们引用的数据碰到 单引号' 和 双引号" 以及 反斜线\ 时自 ...

  6. python字典概述

    字典 1.    概述 字典是一个无序的数据集合,序列类型用有序的数字键做索引将数据以数组的形式存储. 在字典中能获得的有序集合只能是键的集合或者是值得集合,方法keys()或者value()返回一个 ...

  7. 【LeetCode】102 - Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  8. bzoj 3270 博物馆(高斯消元)

    [题意] 两人起始在s,t点,一人pi概率选择留在i点或等概率移动,问两人在每个房间相遇的概率. [思路] 把两个合并为一个状态,(a,b)表示两人所处的状态,设f[i]为两人处于i状态的概率.则有转 ...

  9. 机器学习&数据挖掘笔记(常见面试之机器学习算法思想简单梳理)

    机器学习&数据挖掘笔记_16(常见面试之机器学习算法思想简单梳理) 作者:tornadomeet 出处:http://www.cnblogs.com/tornadomeet 前言: 找工作时( ...

  10. WMI使用的WIN32_类库名

    WMI使用的WIN32_类库名 包括:硬件类.操作系统类.安装应用程序类.WMI服务管理类.性能计数器类1.硬件类冷却类别Win32_Fan--风扇Win32_HeatPipe--热管Win32_Re ...