实例 - 完整的 Manifest 文件

  

  

1,什么是应用程序缓存(Application Cache)

  HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

  离线缓存:

    离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,

    将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示。

    即使有网络,优先本地存储的资源

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

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

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

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

  * 【

    在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
    在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的
    资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。
     】

3,如何实现离线缓存:

a)Cache Manifest 基础

如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:

    * 在需要缓存的html根节点上面添加属性 manifest ,属性值是一个 . appcache 文件;

    Appcache 是一个控制缓存文件

    * 在同目录下创建demo.appcache 文件,幷添加配置项

  b)Manifest 文件

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

      manifest 文件可分为三个部分:

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

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

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

      * CACHE MANIFEST

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

      CACHE MANIFEST

      /theme.css

      /logo.gif

      /main.js

      上面manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,一个 JavaScript 文件

      * NETWORK

      NETWORK:

      login.php

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

      NETWORK:

      *

      * FALLBACK

      FALLBACK:

      /html/   /offline.html

      第一个 URI 是资源,第二个是替补。

4,更新缓存:

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

    用户清空浏览器缓存

    manifest 文件被修改

    由程序来更新应用缓存

 5,在服务器端将.appcache文件的mime类型配置成 text/cache-manifest

  下面以phpstudy为例

   打开,mime.types ,在后面添加----

   

6,在网页中打开

    

关于应用程序缓存的注意事项

**-------------

提示:以 "#" 开头的是注释行,(# 2012-02-21 v1.0.0)但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。**

浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。


敏小静
55 声望3 粉丝

前端工程师