知识点
相关文章
更多最近更新
更多HTML5应用缓存(application cache)【HTML5教程 - 第十二篇】
2019-03-18 09:47|来源: 未知
使用HTML5我们可以通过创建一个缓存manifest文件来方便的生成一个离线版的应用。
什么是应用缓存（application cache）？
HTMl5引入了application cache概念。意思是你可以缓存一个web应用，然后在没有互联网的情况下访问它。
主要三个的好处：
离线浏览器 - 用户可以在离线状态下使用应用
速度 - 缓存的资源加载速度很快
减少了服务器负载 - 浏览器只会去服务器下载更新的或者改变了的资源
浏览器支持
除了IE，Firefox，Chrome，Opera和Safari 5都支持这个特性。
HTML5 Cache Manifest 演示
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>Cache Manifest 基本代码
为了启动应用缓存，你需要在document的html中包含如下属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>每一个包含这个manifest属性的页面当用户访问的时候都会被缓存。如果manifest属性没有指定的话，将不会缓存（除非网页被直接在manifest文件中指定）。
推广的manifest文件扩展是".appcache"。
一个manifest文件需要被正确的MIME-type支持，这种文件类型为"text/cache-manifest"。必须在web服务器上配置。
Manifest文件
manifest文件是一个简单的文本文件，告诉了浏览器去缓存什么内容（或者不缓存什么内容）。
manifest文件包含下面三个部分：
CACHE MANIFEST - 在这个列表标题下的文件将会在下载后被缓存
NETWORK - 在这个列表标题下的文件将要求连接到服务器，不会进行缓存。
FALLBACK - 在这个列表标题下的文件如果不能访问时，则指定特定的fallback页面
CACHE MANIFEST
第一行，CACHE MANIFEST要求如下：
CACHE MANIFEST /theme.css /logo.gif /main.js
以上manifest资源文件包含了3个资源，一个CSS文件，一个GIF文件还有一个js文件。当这个manifest文件加载后，浏览器将会从服务器根目录下载3个文件，一旦不能访问互联网，资源仍旧可以被访问。
NETWORK
NETWORK部分指定了文件"login.jsp“将永远不需要缓存，所以离线不可用：
NETWORK: login.jsp
一个星号可以用表示所有的其它资源或者文件需要一个互联网连接：
NETWORK: *
FALLBACK
fallback部分指定了offline.html文件将会在无法访问互联网的情况下替代所有的/html5/下的文件 。
FALLBACK: /html5/ /offline.html
注意：第一个的URI是资源，第二个是fallback
更新缓存
一旦一个应用被缓存，他将保持缓存除非一下情况发生：
用户删除了缓存
manifest文件被修改
应用缓存被程序修改
一个演示 - 完成Cache Manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /offline.html
小技巧：以"#"开始的行是注释行，但是可以有其它用处。一个应用的缓存只有在manifest文件修改的时候更新。如果你编辑一个图片或者修改了javascript功能，那些变化是不会被重新缓存的。在注释中更新日期和版本是让浏览器重新缓存你的文件的一个方法。
应用缓存的一些注意问题
缓存时候得注意。
一旦文件被缓存，浏览器将会持续的显示缓存版本内容，即使你修改了服务器文件。为了让浏览器更新缓存，你需要修改manifest文件。
注意：浏览器可以有很多不同大小限制的缓存数据（有些浏览器允许5M的缓存数据）。
本文链接：HTML5教程 - 第十二篇：HTML5应用缓存(application cache)，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-appcache/
相关问答
更多-
我遇到了类似的问题，这些问题是由于无法控制缓存清单中列出的文件的缓存行为而导致的。 原来，你可以通过使用iFrames来获得对这个过程的一些控制。 该策略是将您的主缓存清单中列出的数千个文件划分为单独的（并且更易于管理的缓存清单），然后创建大量虚拟HTML页面，每个页面都引用缓存清单。 然后，为每个虚拟HTML添加一个链接到您的主HTML文档的iFrame。 你可以把iFrames放在一个不可见的div中，这会让这个窍门对用户不可见。 当每个iFrame加载时，它检查其单独的缓存清单。 如果该缓存清单中的任 ...
-
它将识别已缓存的文件。 因此，在您的示例中，它将仅缓存一次。 It will recognize already cached files. So in your example, it will be cached only once.
-
Application Cache通过将manifest属性添加到元素来工作。 浏览器只是忽略了他们不理解的属性，因此IE 8或9的行为就好像这个属性不存在一样。 但是，如果您尝试使用window的applicaitonCache属性通过JavaScript访问应用程序缓存，则您的代码可能会抛出错误。 例如这段代码： window.applicationCache.addEventListener('updateready', onUpdateReady); 会抛出错误，例如： TypeErr ...
-
我想你可以这样做： NETWORK: Ajax.ashx http://somedomainname.com/writerInfo/ 你也可以这样做 NETWORK: * 强制任何未明确缓存的内容（即在CACHE部分中列出）使用网络。 I think you could do: NETWORK: Ajax.ashx http://somedomainname.com/writerInfo/ You could also do NETWORK: * to force anything that's n ...
-
响应头必须是“Cache-Control：public，max-age = 3600”才能首先启用缓存。 这也是显而易见的，但任何从使用应用程序缓存开始的人都应该从阅读本文开始。 通过使用它实现了很多问题。最终成功实现了预期的结果。 the response header needs to be "Cache-Control:public,max-age=3600" to enable caching in the first place. Also this is out of the blue but ...
-
非常确定，但让我告诉你：让HTML5离线内容与JavaScript applicationCache.update（）等很好地合作。 人。 如果你是新手，会有点混乱。 最后，所有事情都可以......记录下来！ 但CAVEAT LECTOR ... 无论如何，这里是一个（希望）自解释PHP的例子，为此你需要一个.htaccess文件。 这将告诉您的服务器将cache.manifest解释为PHP代码（因为没有.php扩展名，所以需要）。 如果您使用FCGI包装器，您的.htaccss文件： AddType ...
-
位置取决于不同类型的浏览器，HTML规范不会强制浏览器供应商，例如the location in Firefox ： Windows Vista / 7：C：\ Users \\ AppData \ Local \ Mozilla \ Firefox \ Profiles \。\ OfflineCache Mac / Linux：/Users//Library/Caches/Firefox/Profiles/./OfflineCache The location depends on different t ...
-
HTML5应用程序缓存无法在ie8 +中运行，因此需要替代ie(HTML5 Application Cache not working in ie8+ so need its alternatives for ie)[2023-10-21]
试试这个： 研究HTML5离线 。 他们推荐Google Gears，尽管它已被弃用（帖子是从2010年8月开始）。 Ie 8 and all 8+ versions does not support html5 offline cache, and even 9 does not support this but recently 10 has a developer document which has this support. -
HTML5缓存大小？(HTML5 Cache Size?)[2023-06-24]
通过搜索任何HTML文档，我无法找到任何关于硬大小限制或任何大小限制的指示。 我相信Safari在iPhone / iPad的应用程序存储上有5MB的上限（ 你曾经提到使用iPad。 ） 这是关于脱机Web应用程序/缓存的HTML标准 这是一个很好的链接，涉及使用HTML5实现离线缓存 - 它还有几个良好的链接到底部。 希望这可以帮助你！ I haven't been able to find anything regarding a hard size limitation or any indicati ... -
如何在Firefox中禁用HTML5应用程序缓存(How to disable HTML5 application cache in Firefox specifically)[2023-06-13]
在加载页面之前不会检查manifest属性。 这意味着您可以在加载页面时将其删除，并且不会显示提示。 喜欢这个： 这当然假定所有的Gecko浏览器都需要因为这个提示而被永久禁止。 绝对不好，尤其是因为提示可能在将来的某个时候 ...