混合應用程序中的離線數據緩存機制

我正在使用Angular2和離子在後端開發應用程序，我正在使用節點。在我的應用程序中，我有一些HTML表單，這些表單包含通用輸入字段和圖像上傳。混合應用程序中的離線數據緩存機制

如果用戶沒有網絡連接，用戶可以在沒有任何問題的情況下完成表單。一旦他獲得互聯網連接，它將上傳到服務器。

我們如何才能在網頁和手機中分別實現此功能？

什麼是這種情況下的最佳解決方案。請建議我對此沒有任何清晰的描述。

來源

2017-03-09 Team

要了解脫機場景適合移動Web應用程序的合適人選，它有助於首先了解使之成爲可能的關鍵技術。

移動網絡應用程序可以用三個核心能力構建，所有的這些都是新的HTML5標準的一部分：頁

本地存儲

本地數據庫

瀏覽器應用程序緩存

瀏覽器應用程序緩存允許創建清單，列出應該緩存並生成可用的頁面離線。通常，當你訪問一個URL時，服務器請求返回頁面。設置應用程序緩存清單告訴瀏覽器如何使用已下載的頁面，而不是在不再有網絡連接時立即顯示錯誤。

本地存儲是一種標準，它使用與瀏覽器cookie類似的鍵/值系統保留本地Web應用程序數據（即使在瀏覽器關閉時）。但是，它與瀏覽器cookie在兩個重要方面有所不同。首先，Cookie隨着每個HTTP請求被重新發送到服務器，並且當服務器不需要時會浪費大量帶寬來重新發送所有離線數據。其次，Cookie往往會在4k左右的數據上出現最大值，而本地存儲通常會爲每個域提供高達5MB的數據。 5 MB聽起來可能聽起來不多，但仔細使用時，它可以在離線本地存儲方面走很長的路。

本地數據庫刪除了本地存儲的5MB限制，並允許對數據進行索引，以便可以快速查詢多個屬性。這只是目前HTML5提出的標準;目前只有Internet Explorer和Firefox已經實現了它。 Safari和Chrome使用稱爲Web SQL的較舊的不推薦使用的系統。這意味着如果您需要這種級別的功能，那麼在所有主流瀏覽器中都支持這兩種標準的額外工作和複雜性都相當大。希望情況並非總是如此，主流瀏覽器將遵循最終的HTML5規範。

來源

2017-03-09 09:02:33 Gaurav

我有一個疑問。是否有可能使用谷歌驅動器脫機緩存數據存儲和圖片上傳。 – Team

當用戶離線時，將表單數據存儲在localStorage中，並且當它聯機時，將數據表單localStorage上傳到服務器並從localStorage中刪除數據。

localStorage.setItem('form_data', formData) //Store data in localStorage 

localStorage.getItem('form_data') //Get form localStorage 

localStorage.removeItem('form_data') //Remove from localStrage

添加eventlistner在窗口

if (typeof navigator.onLine !== 'undefined') { 
    window.addEventListener('offline', function (ev) { 
     userOffline(); 
    }); 
    window.addEventListener('online', function (ev) { 
     userOnline(); 
    }); 
} 


function userOnline() {} // when user online 
function userOffline() {} // when user offline

來源

2017-03-09 09:09:43

混合應用程序中的離線數據緩存機制

回答

相關問題