使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

引用清单文件

<html manifest="manifest.appcache">

  ...

</html>

manifest 属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的 MIME 类型提供text/cache-manifest。

清单文件结构

CACHE MANIFEST

# update on：2016-06-15 23:22:23  v2

# Explicitly cached 'master entries'.

CACHE:

/favicon.ico

stylesheet.css

images/logo.png

scripts/main.js

# Resources that require the user to be online.

NETWORK:

*

http://api.twitter.com

# offline.jpg will be served in place of all images in images/large/

# offline.html will be served in place of all other .html files

FALLBACK:

images/large/ images/offline.jpg

*.html /offline.html

以“#”开头的行是注释行。

  • CACHE MANIFEST 字符串应在第一行，且必不可少。

  • CACHE：

    这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在CACHE MANIFEST 后的文件）后显式缓存这些文件。

  • NETWORK：

    此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符(*)。

  • FALLBACK：

    此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。

请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

更新缓存

  1. 用户清除了浏览器对您网站的数据存储。

  2. 清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

  3. 应用缓存通过编程方式进行更新。

var appCache = window.applicationCache;//浏览器的应用缓存对象

appCache.update(); // Attempt to update the user's cache.

switch (appCache.status) {//缓存的当前状态

  case appCache.UNCACHED: // UNCACHED == 0

    console.log('UNCACHED');;

    break;

  case appCache.IDLE: // IDLE == 1

    console.log('IDLE');

    break;

  case appCache.CHECKING: // CHECKING == 2

    console.log('CHECKING');

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    console.log('DOWNLOADING');

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    console.log('UPDATEREADY');

    appCache.swapCache();  // The fetch was successful, swap in the new cache.

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    console.log('OBSOLETE');

    break;

  default:

    console.log('UKNOWN CACHE STATUS');

    break;

};


// 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);


/*缓存公用方法*/

var EventUtil = {

	addHandler: function(element, type, handler) {

		if (element.addEventListener) {

			element.addEventListener(type, handler, false);

		} else if (element.attachEvent) {

			element.attachEvent("on" + type, handler);

		} else {

			element["on" + type] = handler;

		}

	}

};

EventUtil.addHandler(applicationCache, "updateready", function() { //缓存更新并已下载，要在下次进入页面生效

	applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。

	applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效

	location.reload(); //重新载入页面

});

注意事项

  • 站点离线存储的容量限制是5M
  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
  • 引用manifest的html必须与manifest文件同源，在同一个域下
  • 在manifest中使用的相对路径，相对参照物为manifest文件
  • CACHE MANIFEST字符串应在第一行，且必不可少
  • 系统会自动缓存引用清单文件的 HTML 文件
  • manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
  • FALLBACK中的资源必须和manifest文件同源
  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  • 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
  • 当manifest文件发生改变时，资源请求本身也会触发更新

神奇的HTML5离线存储

应用缓存初级使用指南

HTML5 manifest ApplicationCache的更多相关文章

  1. HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

    一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE ...

  2. HTML5 manifest离线缓存

    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...

  3. HTML5 manifest离线缓存技术

    干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进行展示(若有缓存的话,无需再次进行请求而是直接调用缓存),最根本的感觉是它使得WEB从online可 ...

  4. HTML5使用ApplicationCache

    在html5中使用application cache可以把一些静态资源保存在客户端的浏览器上面.这样可以提高访问的速度,甚至是离线应用.关于application cache的优缺点:1.离线浏览 - ...

  5. html5 manifest 离线缓存知识点

    1.最大缓存容量为 5M. 2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置. ②编写.manifest文件,文件 ...

  6. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  7. html5本次存储几种方式

    一.cookies 大家都懂的,不必多说 二.sessionStorage/localStorage HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML ...

  8. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  9. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

随机推荐

  1. 文件共享windows server 2008 服务器

    1.远程连接到windows server2008 E盘右键共享 2.不能创建文件夹 右键E盘→共享→高级共享→权限→全部打勾即可. 3.ok,文件服务器

  2. 1.6.2 Uploading Data with Index Handlers

    1.Uploading Data with Index Handlers 索引处理器就是Request Handlers,用于添加,更新,删除索引中的文档.另外,使用Tika抽取富文档数据,使用Dat ...

  3. solr 高亮配置

    solrj中配置: 两种高亮开启设置 // solrParams.setHighlight(true); solrParams.setParam("hl", "true& ...

  4. [SEO] 网站标题分隔符

    标题用什么分隔符对SEO最有利 我们在看同行的朋友对网站标题优化时,关键词分按照主次的顺序进行分布,在网站标题或者是关键词之间都会有一个符号,俗话来讲就称为关键词分隔符,网站标 题分隔符分为“-”(横 ...

  5. Oracle基础 （十四）其他函数

    转换函数: TO_DATE:转换为日期 --将字符串转换为日期 SELECT TO_DATE('2014-12-31', 'yyyy-mm-dd') FROM DUAL; SELECT TO_DATE ...

  6. TaskUtil多线程与定时任务

    package com.taoban.util; /**  * 执行单次任务或定时任务工具类(用于减少new Thread()和new Timer()的使用)  */ public class Tas ...

  7. ShowModal在FireMonkey移动应用程序对话框

    This is the only code that changes between the first and second code snippets: dlg.ShowModal(procedu ...

  8. UIToolbar自定义背景及按钮设置

      //1.创建toolbar(MyToolbar继承UIToolbar) _myToolbar = [[MyToolbar alloc]initWithFrame:CGRectMake(kZero, ...

  9. 24 MUST HAVE ESSENTIAL LINUX APPLICATIONS IN 2016

    Brief: Whare the must have applications for Linux? The answer is subjective and it depends on for wh ...

  10. 在Eclipse中导入文件和文件夹

    一. 将JAVA文件夹导入Eclipse中的方法: 方法一:直接将java文件夹复制,然后粘贴到项目下: 方法二:(1)打开Eclipse,点击项目的空白处,现在import: (2)现在Existi ...