动态触发 HTML5 缓存清单文件？答案

【问题标题】：Dynamically Trigger HTML5 Cache Manifest file?动态触发 HTML5 缓存清单文件？
【发布时间】：2017-10-16 20:55:40
【问题描述】：

我正在使用 HTML5 中的新缓存清单功能来缓存我的网络应用程序，以便它可以脱机工作。当页面使用以下 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 属性。这有效（在元素被设置的意义上），但它不会导致浏览器缓存页面。

有什么建议吗？

【问题讨论】：

Firefox 缓存前提示（即内置您想要的功能）。不确定其他浏览器。
谢谢。 Safari 和 Google Chrome 似乎没有提示，至少在 Mac 和 iOS 上没有。
您是要以file:/// 还是http:// 的身份执行此操作？
我这样做是：http://
我希望它也能正常工作。

标签： javascript caching html offline

【解决方案1】：

您可以通过添加指向包含实际缓存清单的空页面的 iframe 来动态触发缓存。

离线.html：

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <title></title>
</head>
<body>
</body>
</html>

确保将 index.html 添加到缓存清单。然后添加如下内容：

<iframe src="offline.html" width="0" height="0">

动态到 document.body 以触发缓存。

【讨论】：

是的，这确实会触发缓存。但是当父页面尝试访问缓存的资源时，它会错过缓存并发出真正的请求。（在 Chrome 39 中测试。）所以这样做没有任何好处。

【解决方案2】：

在离线缓存多周后，答案是否定的，要么缓存，要么不缓存，在客户端设置缓存属性没有效果。

您可以考虑为缓存版本提供备用网址，请注意该页面也被隐式缓存为“主条目”。

我不明白为什么要离线缓存 jquery，因为无论如何它很可能会以很长的到期时间提供服务。

您可能希望考虑将离线存储作为替代方案。存储脚本的文本并在加载时将它们注入 DOM。如果没有使用 Ajax 缓存获取并注入响应，因为使用 src 创建脚本标记将不会加载脚本。

【讨论】：

如果您希望您的 Web 应用程序在浏览器离线时可用，您可能希望离线缓存 jquery。将 javascript 代码的源代码放入离线存储可能是实现这一目标的错误方法——缓存清单是正确的方法。
我最终这样做的方式是制作一个按钮，上面写着“使用/获取离线缓存”，该按钮转到另一个提供相同服务但带有清单的 HTML 文件。我发现用户甚至更喜欢这个，因为他们可以分辨出他们何时在线和离线。使用缓存的 javascript 事件，您甚至可以放置一个进度条，显示下载进度（就完成的文件而言）以及缓存何时更新。
您必须在清单中缓存 jQuery。浏览器缓存可以随时清除，因此不可靠。这对于移动浏览器尤其成问题（内存较少）

【解决方案3】：

根据您的应用程序，可以使用 @schibum 方法的修改版本，将您的应用程序分解为“迷你”应用程序，然后将子部分缓存在 iframe 中。考虑这个例子：

index.html

<html manifest="indexx.manifest">
<head>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="index.js"></script>
    <title>Index</title>
</head>
<body>
    <ul>
        <li><a href="1.html">One</a>
        <li><a href="2.html">Two</a>
        <li><a href="3.html">Three</a>
    </ul>
    <iframe id="if" />
</body>
</html>

index.manifest

CACHE MANIFEST
# 3
index.html
jquery-2.1.4.min.js 
index.js

index.js

$( document).ready(function() {
    var pages = ['1.html','2.html','3.html'];
    var LoadNext = function() {
        alert(pages[0]);
        page = pages.shift();
        alert(page)
        if ( page !== undefined ) {
            console.log("Attempting to load " + page);
            $('#if').attr('src', page)
        } else {
            console.log("All done");
        }
    };
    $('#if').load(function() {
        console.log("Finished loading");
        LoadNext()
    });
    LoadNext(); 
});

1.html

<html manifest="1.manifest">
<head>
    <title>One</title>
</head>
<body>
    <img src="1.jpg" width="50%">
</body>
</html>

1.manifest

CACHE MANIFEST
# 2
1.html
1.jpg

{2,3}.{html,manifest} 遵循 1.{html,manifest} 的形式。

因此，每个子页面（1.html、2.html、3.html）都有自己的清单，因此被独立缓存。 index.html 有自己的（最小的）清单，因此无条件缓存它不像缓存整个应用程序那样占用大量网络。然后 javascript 负责预加载 iframe 中的每个页面，以便缓存。

加载 index.html，然后下线，看看子页面是如何工作的。也是。

一个明显的缺点是页面之间共享的任何资产（例如 jQuery）都必须进行冗余缓存。

【讨论】：

【解决方案4】：

你必须记住的一件事。不要缓存清单文件本身。因此，您需要做的就是根据您的用户选择使用不同版本的清单文件刷新页面。您可以动态生成清单文件本身，对该文件的任何更改都会导致缓存刷新。触发重新缓存的最佳做法是更改清单文件的版本，例如：#ver1 - 01/01/2018 到 #ver2 - 02/02/2018 就可以了。所以你不能在客户端改变它，但你可以在服务器端改变它。

【讨论】：

在 DreamWeaver 中，我使用此注释自动修改清单文件：#2017-10-19 17:50。