Question

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

众所周知 - 使用Appcache时，调用html页面始终被缓存 - ＆gt;对动态网站不利。

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

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

有没有解决方法呢？ Appcache真的可以用于动态内容吗？感谢

Answer 1

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

我通过使用本地存储解决了这个问题（我使用了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 [];
}

Answer 2

我有一段时间搞清楚如何缓存由这样的URI方案访问的动态页面：

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

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

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

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

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

适用于动态网站的Appcache

2 个答案: