什么是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. MVC学习系列14--Bundling And Minification【捆绑和压缩】--翻译国外大牛的文章

    这个系列是,基础学习系列的最后一部分,这里,我打算翻译一篇国外的技术文章结束这个基础部分的学习:后面打算继续写深入学习MVC系列的文章,之所以要写博客,我个人觉得,做技术的,首先得要懂得分享,说不定你 ...

  2. [moka同学转载]Yii2 checkBookList的使用

    use yii\helpers\Html; use yii\helpers\ArrayHelper model层代码 $model = new Model()//要存储的model $aclb = A ...

  3. Java基础学习总结 -- 图形用户界面GUI

    虽然目前Java算不上前端开发的主力,但是作为Java入门基础的一部分,学习Java的GUI编程还是有必要的,而且可以做出一些小且有趣的图形程序来提高学习热情.本篇学习总结均为一个Beginner的笔 ...

  4. cessss

    [文字] 关注1啊啊啊啊啊 点击关注微信 点击关注微信2 点击关注微信3 关注2啊啊啊啊啊啊啊啊啊啊啊 关注3啊啊啊啊啊啊啊啊 关注4啊啊啊啊啊啊啊啊 关注5啊啊啊啊啊啊啊啊 关注6啊啊啊啊啊啊啊啊啊 ...

  5. 安全退出，清空Session或Cookie

    概览: 网站中点击退出,如果仅仅是重定向到登录/出页面,此时在浏览器地址栏中输入登录后的某个页面地址如主页,你会发现不用登录就能访问.这种所谓的退出并不是安全的. 那么怎样做到安全退出呢? 那就是点击 ...

  6. jQueryMobile示例页面代码

    这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...

  7. 解决jQuery多个版本，与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  8. OC笔记一：Objective-C简介

    1.OC简介 全称:Objective-C,是扩充C的面向对象编程语言,主要用于iOS和Mac OS开发. C语言的基础上,增加了一层最小的面向对象语法 完全兼容C语言 可以在OC代码中混入C语言代码 ...

  9. iOS UITableView删除cell分割线

    UITableView是UITableViewStylePlain风格的,这样整个TableView都会被分割线分隔开,不管有没有数据,非常丑. 为了可以自定义cell的分割线: 解决方案: 将UIT ...

  10. O365（世纪互联）SharePoint 之站点个性化

    前言 上一篇文章中,我们简单介绍了如何使用O365中SharePoint Online文档库,SharePoint Online的优点就是提供给我们很多非常方便开箱即用的功能,让我们快速的搭建站点,方 ...