mik*_*ers 21 javascript html5 caching offline
我正在使用HTML5中的新缓存清单功能来缓存我的Web应用程序,以便它可以脱机工作.当页面加载以下html元素时,内容将自动缓存:
<html lang="en" manifest="offline.manifest">
这很好用.但是,我想让我的用户可以选择是否要将内容缓存离线.所以,这是我的问题:
有没有办法触发应用程序在运行时使用JavaScript缓存,而不是在加载页面时自动完成.
例如,像这样的东西(使用jquery):
---------------- --------------的index.html
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<button id="cacheButton">Cache Page</button>
</body>
</html>
--------- --------- Main.js
$(document).ready(
function()
{
$('#cacheButton').click(onCacheButtonClick);
}
)
function onCacheButtonClick(event)
{
console.log("Setting Offline Manifest");
$('#htmlRoot').attr("manifest","offline.manifest");
}
------------- ------------- offline.manifest
CACHE MANIFEST
#version .85
#root
index.html
scripts/main.js
#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js
基本上,当单击按钮时,我动态设置html元素的manifest属性.这有效(在某种意义上,元素已设置),但它不会导致浏览器缓存页面.
有什么建议？
小智 10
您可以通过添加指向包含实际缓存清单的空白页面的iframe来动态触发缓存.
offline.html:
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<title></title>
</head>
<body>
</body>
</html>
确保将index.html添加到缓存清单中.然后添加如下内容:
<iframe src="offline.html" width="0" height="0">
动态地记录文件.触发缓存.
小智 5
在离线缓存花费了数周后,答案是否定的,您要么缓存要么不缓存,在客户端设置缓存属性没有效果.
您可以考虑为缓存版本提供备用URL,请注意该页面也隐式缓存为"主条目".
我无法理解你为什么要离线缓存jquery,因为无论如何它可能会有很长的到期时间.
您可能希望将离线存储视为替代方案.存储脚本的文本并在加载时将它们注入DOM.如果没有使用Ajax缓存fetch并注入响应,则使用src创建脚本标记将不会加载脚本.