动态站点的应用缓存答案

【问题标题】：Appcache for dynamic site动态站点的应用缓存
【发布时间】：2012-08-22 12:23:55
【问题描述】：

我正在尝试使用 HTML5 Appcache 通过缓存图像和 css/JS 文件来加速我的网络移动应用程序。该应用基于动态网页。

众所周知 - 使用 Appcache 时，调用的 html 页面总是被缓存 -> 对动态网站不利。

我的解决方案 - 创建第一个静态页面并在此页面中调用清单文件 (manifest="cache.appcache") 并加载我所有的缓存内容。然后，当用户被重定向到另一个动态页面时，资源将已经可用。（当然，这第二个动态页面不会有清单标签）。问题是如果第二个页面被用户刷新，资源并没有从缓存中加载；它们是直接从服务器加载的！

此解决方案与在第一个动态文件上使用 Iframe 非常相似。我发现 iframe 解决方案有完全相同的问题。

有什么解决办法吗？ Appcache 真的可以用于动态内容吗？谢谢

【问题讨论】：

你让它工作了吗？
您可能希望使用 ajax 在您的主页中加载数据，而不是动态呈现它

标签： html caching html5-appcache

【解决方案1】：

是的，如果你以不同的方式处理你的 url 参数，appcache 可以用于动态内容。

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

过程是

当您通常从锚点或重定向中使用 href 时，从页面内部调用一个函数来为您重定向。该函数将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 [];
}

【讨论】：

【解决方案2】：

我花了很长时间才弄清楚如何缓存由这样的 URI 方案访问的动态页面：

domain.com/admin/page/1
domain.com/admin/page/2
domain.com/admin/page/3

现在的问题是 appcache 不会缓存每个单独的管理员/页面/...，除非您访问它。

我所做的是使用离线页面来表示您可能希望允许用户离线访问的这些页面。

离线页面中的 JS 查找 URI 并抓取它以找出它应该显示的页面并从 localStorage 中获取数据链接到每个单独的页面。

我对其他解决方案持开放态度，但这是我能想到的让一堆单独的页面脱机而只访问一个管理页面的全部方法。

【讨论】：