2012-08-22 69 views
4

我想通过缓存图片和css/JS文件来使用HTML5 Appcache来加速我的网页移动应用程序。该应用程序基于动态网页。如前所述 - 使用Appcache时,调用html页面始终被缓存 - >对于动态网站而言不利。Appcache动态网站

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

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

有没有解决方案? Appcache可以真正与动态内容一起使用吗? 感谢

+0

没有人可以帮忙吗? – webmobileDev

+0

你有这个工作吗? – Sam

+0

你可能会想要使用ajax来加载主页中的数据,而不是动态地呈现它 – compid

回答

0

我的时间地狱搞清楚如何缓存由URI方案这样的访问动态页面:

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

现在的问题是,应用程序缓存将不缓存每个单独的管理/页面/ ...除非您访问它。

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

离线页面中的JS查找URI并将其擦除以找出它应显示的页面,并从localStorage获取数据,当用户访问管理仪表板时,该数据填充所有页面数据指向每个单独页面的链接。

我对其他解决方案是开放的,但这是我能想出的一个单独的页面离线一堆只访问单个管理页面。

1

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

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

过程是

  1. 从内部页面时,你通常会从锚HREF或重定向,而不是调用一个函数来重定向你。该函数将参数从url存储到localstorage,然后仅重定向到不带参数的url。
  2. 在接收目标页面上。从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 []; 
}