• 技术文章 >web前端 >H5教程

    HTML5 应用程序缓存(Application Cache)

    PHP中文网PHP中文网2016-05-17 09:08:34原创556

    HTML5 应用程序缓存(Application Cache)

    1.应用程序缓存(Application Cache):

      通过使用manifest并配置文件列表

      应用程序缓存为应用带来三个优势:

      •离线浏览 - 用户可在应用离线时使用它们

      •速度 - 已缓存资源加载得更快

      •减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。


      2.如何实现


      2.1服务器配置步骤如下:

      在服务器上添加MIME TYPE支比如 Apache 中可在 .htaccess 中添加:AddType text/cache-manifest manifest


      2.2创建Manifest 文件

      manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

      manifest 文件可分为三个部分:

      l CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

      l NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

      l FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

      CACHE MANIFEST

      第一行,CACHE MANIFEST,是必需的:


      2.2.1CACHE MANIFEST

      /theme.css

      /logo.gif

      /main.js

      上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。


      2.2.2NETWORK

      下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的:

      NETWORK:

      login.asp

      可以使用星号来指示所有其他其他资源/文件都需要因特网连接:

      NETWORK:

      *


      2.2.3FALLBACK

      下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:

      FALLBACK:

      /html5/ /404.html


      3.更新缓存

      一旦应用被缓存,它就会保持缓存直到发生下列情况:

      l 用户清空浏览器缓存

      l manifest 文件被修改

      l 由程序来更新应用缓存


      4.Chrome浏览器来测试缓存是否成功

      在Chorme浏览器中输入缓存页面的网址

      使用Chrome的chrome://cache/命令查看

    以上就是HTML5 应用程序缓存(Application Cache)的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:HTML5 Canvas像素处理常用接口 下一篇:HTML5 区域(Sectioning)的重要性
    PHP编程就业班

    相关文章推荐

    • 深入解析asp.net中mvc4自定义404页面(分享)• 在今天,利用 HTML5 开发和发布大型跨平台网游,可行性如何?要解决哪些问题?• 避免常见的六种HTML5错误用法 (5-6)• phonegap使用方法介绍(八)操作数据库• HTML5 b和i标记将被赋予真正的语义_html5教程技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网