Question

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

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

CACHE MANIFEST
#1330475607
CACHE:
/

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

如果没有，是否可以用JavaScript以编程方式设置缓存（我想我可以遍历链接和脚本标记）？

Answer 1

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

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

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

Answer 2

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

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

Answer 3

如果你上学（不安宁）并使用网址参数，你可以这样做。

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

这个过程是

当您通常从某个锚点或重定向进行href时，在页面内部，而是调用一个函数来重定向。此函数将参数从url存储到localstorage，然后仅重定向到不带参数的url。
在接收目标页面上。从localstorage获取参数。

重定向代码

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 [];
}

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

3 个答案: