动态站点的Appcache

Question

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

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

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

这个解决方案非常类似于在第一个动态文件上使用Iframe。我发现Iframe解决方案也有同样的问题。

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

Answer 1

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

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

这个过程是

1. 当您通常会从锚或重定向时，从页面内部调用一个函数来为您重定向。此函数将参数从url存储到本地存储，然后只将参数重定向到url，而不包含参数。
2. 在接收目标页上。从本地存储获取参数。

重定向码

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

Answer 2

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

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

现在的问题是，appcache不会缓存每个管理/页/.除非你去看它。

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

离线页面中的JS查找URI并抓取它，找出它应该显示的页面，并从localStorage获取数据，当用户访问管理仪表板之前，用户访问管理仪表板时会使用所有页面数据填充数据，然后显示到每个单独页面的链接。

我对其他解决方案持开放态度，但这是我所能找到的唯一办法，让一堆单独的页面离线，只访问单一的管理页面。