如何使用 HTML5 的应用缓存（appcache）来缓存动态页面？答案

【问题标题】：How can I use HTML5's application cache (appcache) to cache dynamic pages?如何使用 HTML5 的应用缓存（appcache）来缓存动态页面？
【发布时间】：2012-02-29 00:44:34
【问题描述】：

我有一些动态页面想要离线使用。我想使用 HTML5 的应用程序缓存来做到这一点。问题是我不知道页面的所有资源（JavaScript 和 CSS），因为这些部分是动态的。

我有一个如下所示的 manifest.appcache 文件：

CACHE MANIFEST
#1330475607
CACHE:
/

但这似乎只缓存页面的 HTML，而不是页面的其余资源。有没有办法做这样的事情？

如果没有，是否可以使用 JavaScript 以编程方式设置缓存（我想我可以循环通过链接和脚本标签）？

【问题讨论】：

如果您可以使用 PHP，可以这样做。

标签： html offline-caching html5-appcache

【解决方案1】：

在缓存清单文件缓存部分，必须单独提及每个资源文件。

因此，您应该与页面一起动态生成缓存清单文件。这样，每次页面更改时，其清单文件也会更新。

清单文件中的资源与页面一起下载。大多数时候页面的 javascript 在这些下载完成后执行。所以我们无法使用 javascript 设置缓存清单。

【讨论】：

【解决方案2】：

据我所知，您不能在缓存部分下使用通配符（尽管它在故障回复部分下有效）您也不能在 javascript 中循环，因为清单是在 javascript 文件之前加载的。

是否可以使用将所有 js/css 打包到一个文件中的服务器端脚本？

【讨论】：

【解决方案3】：

如果你去老学校（不安静）并使用 url 参数，你可以这样做。

我通过使用本地存储解决了这个问题（我使用了 jquery localstorage 插件来帮助解决这个问题）。

过程是

当您通常从锚点或重定向中引用时，从页面内部调用，而不是调用函数为您重定向。该函数将url中的参数存储到localstorage，然后只重定向到不带参数的url。
在接收目标页面上。从本地存储中获取参数。

重定向代码

function redirectTo(url) {
    if (url.indexOf('?') === -1) {
        document.location = url;
    } else {
        var params = url.split('?')[1];
        $.localStorage.set("pageparams", params);
        document.location = url.split('?')[0];
    };
}

目标页面代码

var myParams = GetPageParamsAsJson();
var page = myParams.page;

function GetPageParamsAsJson() {
    return convertUrlParamsToJson($.localStorage.get('pageparams'));
}

function convertUrlParamsToJson(params) {
    if (params) {
        var json = '{"' + decodeURI(params).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}';
        return JSON.parse(json);
    }
    return [];
}

【讨论】：