动态触发HTML5缓存清单文件？ [英] Dynamically Trigger HTML5 Cache Manifest file?
问题描述
我使用HTML5中的新缓存清单功能来缓存我的网络应用程序，使其脱机工作。当页面加载以下html元素时，内容会自动缓存：
< html lang =enmanifest = 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 / javascriptsrc =Main.js>< / script>
< / head>
< body>
< button id =cacheButton>缓存页面< / button>
< / body>
< / html>
--------- Main.js ---------
$（document）.ready（
function（）
{
$（' #cacheButton'）。click（onCacheButtonClick）;
}
）
function onCacheButtonClick（event）
{
console.log（设置离线清单 ）;
$（'＃htmlRoot'）。attr（manifest，offline.manifest）;
}
------------- offline.manifest -------------
CACHE MANIFEST
#version。 85
#root
index.html
scripts / main.js
#jquery资产
http：//code.jquery。 com / jquery-1.4.4.min.js
基本上，当点击按钮时，我会动态设置html元素的清单属性。这有效（从某种意义上说，元素已设置），但它不会导致浏览器缓存页面。
有任何建议吗？
使用离线缓存花了好几周后，答案是否定的，你是缓存还是不缓存，在客户端设置缓存属性没有效果。
您可以考虑为缓存版本提供替代网址，请注意该网页也被隐式缓存为主条目。
我无法理解你为什么要离线缓存jquery，因为无论如何它可能会有很长的到期时间。
您不妨考虑将离线存储作为替代方案。存储脚本的文本并在加载时将它们注入DOM。如果没有使用Ajax进行缓存提取并注入响应，由于使用src创建脚本标记不会加载脚本。
I am using the new cache manifest functionality from HTML5 to cache my web app so it will work offline. The content is cached automatically when the page is loaded with the following html element:
<html lang="en" manifest="offline.manifest">
This works fine. However, I want to give my users the option of whether they want the content cached offline. So, here is my question:
Is there any way to trigger that an application be cached at runtime, using JavaScript, and not have it automatically done when the page is loaded.
For example, something like this (using 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
Basically, when the button is clicked, I dynamically set the manifest attribute of the html element. This works (in the sense the element is set), but it does not cause the browser to then cache the page.
Any suggestions?
After many weeks spent with offline caching, the answer is no, you either cache or don't cache, setting the cache attribute on the client side has no effect.
You could consider offering an alternate url for the caching version, be aware that the page is also implicitly cached as a "master entry".
I am at a loss to understand why you would want to offline cache jquery though, since it is likely to be served with very long expiry anyway.
You may wish to consider offline storage as an alternative. Store the text of the scripts and inject them into the DOM on load. If not cached fetch using Ajax and inject the response, as creating a script tag with the src won't load the script.
这篇关于动态触发HTML5缓存清单文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
