什么是Application Cache

HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。

Application Cache带来的三个优势是：

① 离线浏览 – 用户可在离线时浏览您的完整网站

② 提升页面载入速度 – 缓存资源为本地资源，因此加载速度较快

③ 降低服务器压力 – 浏览器只会从发生了更改的服务器下载资源

而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响

Nginx manifest配置

离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。对于Nginx需要修改配置目录下的mime.types文件，添加manifest文件映射：

text/cache-manifest                   manifest;

重启nginx后，服务器支持manifest。

配置manifest文件

CACHE MANIFEST

CACHE:

#需要缓存的列表

clock.css

clock.js

NETWORK:

#不需要缓存的

*

FALLBACK:

#访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html

index.html a.html

HTML5 Application Cache

使用离线存储，除了上述的配置外，只需要在html tag标签增加<manifest>。

<!DOCTYPE html>

<html lang="en" manifest="cache.manifest">

  <head>

    <title>AppCache Test</title>

    <link rel="stylesheet" href="clock.css">

    <script src="clock.js"></script>

  </head>

  <body>

    <p><output id="clock"></output></p>

    <div id="log"></div>

  </body>

</html>

通过chrom 访问站点，即可看到离线缓存后的效果：

通过JS动态控制更新

应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

缓存状态:
window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：

var appCache = window.applicationCache;

switch (appCache.status) {

  case appCache.UNCACHED: // UNCACHED == 0

    return 'UNCACHED';

    break;

  case appCache.IDLE: // IDLE == 1

    return 'IDLE';

    break;

  case appCache.CHECKING: // CHECKING == 2

    return 'CHECKING';

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    return 'DOWNLOADING';

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    return 'UPDATEREADY';

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    return 'OBSOLETE';

    break;

  default:

    return 'UKNOWN CACHE STATUS';

    break;

};

要以编程方式更新缓存，请先调用 applicationCache.update()。此操作将尝试更新用户的缓存（前提是已更改清单文件）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 即可将原缓存换成新缓存。

var 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() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向 用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。

好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 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);

Nginx manifest 实现 HTML5 Application Cache的更多相关文章

  1. HTML5 application cache

    Application Cache API (一) 基本应用 http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html Appl ...

  2. html5 Application Cache 机制以及使用

    那什么是Application Cache呢? 顾名思义,AppCache就是对app内存缓存的方案,具体表现为当请求某个文件时不是从网络获取该文件,而是从本地内存中获取. Application C ...

  3. HTML5 Application cache初探和企业应用启示

    Application Cache 在自己做的开源项目( https://github.com/etoah/Lucien ) 用到了HTML5 的Application Cache,现总结如下: 目录 ...

  4. html5 Application Cache——加快简历二次访问速度

    上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...

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

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

  6. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  7. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  8. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  9. HTML5学习总结-08 应用缓存(Application Cache)

    一 应用缓存(Application Cache) 1 应用缓存 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: ...

随机推荐

  1. Winform开发框架之肖像显示保存控件的实现

    我们在开发一些Winform程序的时候,除了常规的显示普通数据外,有的时候需要显示一些人员肖像或者一些车辆等物体的图片,一般这些内容较小,所以以二进制存储在数据库是一个不错的方案.但由于它们虽然很常用 ...

  2. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  3. Linux解决乱码问题

    主要的关注点是本身文件的编码和Linux的编码是否相同, 如果不相同的话,那么修改 例如: 就OK了,如果还是有问题的话,那么就查看一下连接工具的编码是否设置的有问题. 一般情况下,主要注意这些问题, ...

  4. python基础学习笔记2

    词典   词典(dictionary)与列表相似,也可以存储多个元素.存储多个元素的对象称为容器(container); 常见的创建词典的方法: >>>dic = {'tom':11 ...

  5. Hibernate总结（三）

    在Hibernate(二)中,简单总结了表与表之间的级联操作,但是并没有总结查询操作,这一篇将总结Hibernate查询所实现的加载策略. 加载策略: 立刻加载:马上去数据库中查询 延迟加载:当使用数 ...

  6. spring入门（五）【springMVC环境搭建】

    springMVC作为spring的一个WEB组件,是一个MVC的思想,减少了WEB开发的难度,现介绍springMVC环境的搭建,具体的原理放在后面介绍.用过框架的朋友都知道要在WEB项目中使用一个 ...

  7. java移位运算符

    http://www.iteye.com/topic/766461 这篇博客讲的很清楚

  8. [翻译]Java HashMap工作原理

    大部分Java开发者都在使用Map,特别是HashMap.HashMap是一种简单但强大的方式去存储和获取数据.但有多少开发者知道HashMap内部如何工作呢?几天前,我阅读了java.util.Ha ...

  9. C#通过WMI的wind32 的API函数实现msinfo32的本地和远程计算机的系统日志查看功能

    先不说如何实现,先来看看效果图: 读取远程的需要提供下远程的计算用户名和密码即可. 如何实现这个代码功能,请看如下代码部分: 实体类: using System; using System.Colle ...

  10. Eclipse开发环境设置(Maven+Spring MVC+Flex)

    1. 环境设置 1.1. Java环境设置 1)JAVA_HOME D:\GreenSoftware\Java\Java8X64\jdk1.8.0_91 2)PATH ;%JAVA_HOME%/bin ...