2012-08-22 104 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 []; 
}