离线缓存 manifest

程序的离线缓存由一个叫做manifest的文本文件控制,把需要离线缓存的文件列在里面即可,这个列表还可以控制需要缓存的情况,甚至当用户从缓存地址进入到没有缓存的地址应该显示什么

当浏览器下载解析了manifest文件之后,就会换取这些资源并且保存起来无网络使用 ,格式如下:

CACHE MANIFEST     //告诉浏览器这是一个manifest文件

# This is a comment

CACHE:             //每一个部分标题使用大写,这里列出需要缓存的资源/css/screen.css/css/offline.css/js/screen.js/img/logo.png

http://example.com/css/styles.css

FALLBACK:           //这里定义当一个没有网络的用户尝试跳转到没有缓存的地方时该显示什么/one.html /offline.html
NETWORK:              //这里定义哪些资源只有连接网络时才可用register.php
login.php
 
cache   是默认的,如果没有写标题的话,浏览器默认列表里的内容是需要缓存的资源,不能使用通配符(如/images/*)。另外当用户从一个没有声明需要缓存的页面进入另一个被缓存的页面,那么刚才进来的页面也会被恰当地缓存,因此可以利用这个特点,不需要把所有页面都列进去
fallback   每行包含两个值,使用空格隔开,当离线用户尝试访问第一个链接时,应该呈现第二个已经缓存了的页面。举例:
/ /offline.html       表示当离线用户访问所有没有缓存的页面都会转向offline,因为/匹配了所有页面
/images/avatars/ /offline_avatar.png    当离线用户访问/images/avatars/图片目录,会替换为offline_avatar.png
network  如果使用*号,表示除了cache里面的资源,其他都要求网络连接

<!DOCTYPE html>
<html lang="en" manifest="/offline.appcache">      //浏览器只会缓存带有manifest属性的页面
 // your html document
</html>
该文件同时需要使用 text/cache-manifest,在服务器提供相应的支持

一旦缓存成功下载,除非用户清除缓存或者更新manifest文件才会更新缓存,只是更新了服务器上的内容不会更新缓存的,如果只是更新了内容例如CSS文件,那么应该修改版本号触发更新。
CACHE MANIFEST
# Version 9
CACHE:
/css/screen.css
 
Browser bug: Firefox caches the manifest file itself and will not update it even if the manifest has changed on the server. With some server config wizardry, you can tell browsers that the cache of the manifest file is instantly invalidated and should be requested from the server every time it’s referenced. Add this to your .htaccess to put Firefox in its place:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/cache-manifest "access plus 0 seconds"
</IfModule>
http://html5doctor.com/go-offline-with-application-cache/
时间: 2024-10-06 21:00:14

离线缓存 manifest的相关文章

H5离线缓存机制-manifest

简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问. 而且做好相应资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量. 先来看下我们公司实际项目中的使用情况.(阿里淘点点也使用了manifest) 第一次加载时:整体请求是392KB耗时1.82s 当本地

HTML5 离线缓存详解(转)

离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的,离线缓存也一样.反正IE9(包括)及IE9以下的浏览器目前是不支持的.如果用在移动端,应该都能支持.检测是否支持离线缓存也是比较简单的. if(window.applicationCache){ alert("支持离线缓存"); } else{ alert("不支持离线缓存&q

H5 应用程序缓存(离线缓存)

离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该类型文件 2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容. 3.在该目录下新建一个文件cache.appcache,文件内容为: chche manifest 为版本号: chche 是告诉浏览器要缓存的文件: netwo

HTML5离线缓存(Application Cache)

HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. Manifest 文件 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓

html5离线缓存使用

html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appcache"> test.appcache 与 index.html在相同路径下. 2.服务器端加入MIME TYPE声明:tomcat如下 web.xml中加入<mime-mapping> <extension>manifest</extension> &l

HTML5离线缓存

参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会404了 首先,请在文档的<html> 标签中包含 manifest 属性: <!DOCTYPE HTML> <html manifest="page.appcache"> <!--这里的page.appcache是一个文件,自己手动生成-->

关于离线缓存webView的新方法NSURLProtocol

博文转发自:http://blog.sina.com.cn/s/blog_6291e42d0102v0hf.html 对于目前UIWebView的离线缓存方式主要有如下几种: 1.HTML5 , Manifest最开始我的想法是使用HTML5中的离线存储功能,也就是分析Manifest文件来存储和更新部分资源文件.但是经过实践发现,UIWebView根本不支持HTML5,他只实现了Webkit中页面渲染的那一部分.所以要实现缓存必须要另辟蹊径. 2.NSURLCache  尽管在官方的说明文档里

http缓存与离线缓存

一.http协议实现缓存 1. 缓存头部 通用缓存.条件缓存.缓存控制三大类 头部名称 说明 请求/响应 通用缓存头部 控制客户端是否向服务器发送请求或者是服务端响应请求   cache-control 用于随报文传递的缓存提示   pragma http1.0的,等于cache-control:no-cache,pragma优先级高于expires   条件头部     Last-Modified 服务器响应时将文本最后修改时间放在此头部一起传送,如:Last-Modified:GMT 响应

HTML5离线缓存问题

1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问.应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 主浏览器都支持,IE8.IE9除外 注意事项 MineType 文件需要配置正确的 MIME-type,即 "text/cache-manifest&