使用HTML5離線功能設計移動ASP.NET MVC 4數據錄入應用程序的正確方法

我正在爲需要支持離線功能的現場操作員創建ASP.NET MVC 4移動應用程序（平板電腦）的PoC。這是一個相對簡單的數據錄入應用程序，帶有一個WebAPI後端，將使用SQL數據庫作爲持久存儲。使用HTML5離線功能設計移動ASP.NET MVC 4數據錄入應用程序的正確方法

這是我第一次實現離線支持，所以我有點不確定哪個是設計這個的最好方法。現在我可以想到兩種方式，並不確定哪一種更好或更正確。

我想要的是，只要有互聯網連接，信息從服務器中檢索。如果連接丟失，我希望將最新的信息緩存/提供並顯示給用戶。

基於我所做的一些測試，HTML5脫機支持似乎可以工作的方式是，只要加載了任何視圖，瀏覽器就會檢查清單並緩存每個頁面的版本那一刻。如果我的理解是正確的，那意味着如果用戶在瀏覽器下載清單文件後添加新條目，那麼這些記錄將不會顯示在離線版本中。

我可以考慮解決的一種方法是每次服務時都要更改清單版本（因爲我是動態生成的），但是我覺得這樣會打敗目的..或者至少是效率非常低帶寬明智的。

我能想到的唯一的另一種選擇是不使用常規MVC（不傳遞記錄/數據庫信息作爲模型屬性或ViewBag屬性）來顯示記錄，而只是檢索所需頁面信息的json並保存在本地存儲中。然後，根據localstorage中的信息使用模板或JavaScript生成視圖。這可以在線或離線工作，不是嗎？

我不確定我是否接近這個錯誤的方式。建立一個SPA或簡單的HTML/JavaScript應用程序會更合適嗎？也許使用JS框架？在這一點上，我有一些能力來確定我們將使用什麼技術或框架。

任何指導非常感謝。

來源

2013-04-29 GR7

正如更多的信息，這裏有幾件事情我在研究如何構建這個應用時學到了知識。我可能錯了。如果是這樣，請糾正我，只是想分享，以防有人剛剛開始這個話題，就像我： 1. HTML5中通過緩存清單離線功能背後的自然觀點/模式/範例是UI（html ）完全獨立於數據。也就是說，它不適合服務器端生成的HTML。「傳統」應用程序是他們稱之爲http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline – GR7 2013-04-30 14:19:55

2.在理論上，您仍然可以將脫機功能與那些服務器端的html生成應用程序，將URL添加到CACHE和NETWORK部分，並將SETTINGS部分添加到清單，並指定prefer-online設置。然而，這是完全不可靠的，因爲一些瀏覽器還不支持它，所以設置被忽略，並且你被一個陳舊的數據版本卡住了。 – GR7 2013-04-30 14:22:26

感謝您分享這些信息！在這件事上我從你那裏學到很多東西。你能用ASP.NET MVC獲得所有這些工作嗎？ – 2014-05-12 02:01:30

基於我所做的一些測試，HTML5脫機支持似乎可以工作的方式是，只要加載了任何視圖，瀏覽器就會檢查清單並緩存每個版本在那個時候的頁面。如果我的理解是正確的，那意味着如果用戶在瀏覽器下載清單文件後添加新條目，那麼這些記錄將不會顯示在離線版本中。

這就是爲什麼你不應該使用服務器端渲染。當服務器在發送到瀏覽器之前將數據與格式混合在一起時，這意味着瀏覽器無法區分這兩者之間的區別。 HTML5和Javascript完全有能力自己處理模板，所以爲什麼不讓它們？

將您的MVC應用程序編寫成一系列控制器方法。不要每個人都說「意見」。而應使用使用JavaScript的直接HTML文件向服務器發送對數據的AJAX請求。用數據填充HTML視圖，你是黃金。然後，您可以緩存HTML文件，因爲它們是靜態的，您可以單獨保存離線模式的數據。

來源

2013-04-29 16:38:43

似乎是合理的斯賓塞，它似乎是要走的路。有關這種方法的一個問題。使用localStorage保存最新信息的最佳模式是什麼？此時，我不確定信息的變化頻率，但瞭解同步/恢復的最佳模式會很好。有任何想法嗎？ – GR7 2013-04-29 17:45:02

關閉我的頭頂我會爲我正在檢索的記錄表創建一個GUID字段。每次更新記錄時都會生成一個新的GUID並與更改一起保存。當瀏覽器確定它具有互聯網訪問時，我會將與它們關聯的所有ID和GUID提交給服務器。然後，服務器將能夠挑選自瀏覽器緩存後更新的記錄。服務器將它們發送出去，瀏覽器更新它的本地存儲。 – 2013-04-29 18:29:34

我會推薦做一些Google搜索，因爲我確定還有其他一些問題需要解決，甚至可能有一些框架使整個過程更容易管理。 – 2013-04-29 18:30:33

添加到接受的答案，有一個透徹後在這個問題上標題爲：

Build an HTML5 Offline Application with Application Cache, Web Storage and ASP.NET MVC。

這個傢伙用一個樣本/完整的應用程序解釋所有的東西，並且很好地解釋每一點。

除此之外，如果你真的想從具有離線能力的現代Web開發得到crème de la crème，我建議你通過非凡/明星開發商John Papa採取兩個部分課程。它使用了SPA = Single Page Application UI範例。

課程可在Pluralsight：

Building Apps with Angular and Breeze - Part 1

Building Apps with Angular and Breeze - Part 2

享受，就像我很享受它。請確保您在使用過程中檢查該關鍵字/功能：WIP = Work In Progress.

如果你有興趣，這裏是我不斷更新的課程的代碼回購： https://github.com/leniel/SPACodeCamper

來源

2014-05-12 03:23:08

使用HTML5離線功能設計移動ASP.NET MVC 4數據錄入應用程序的正確方法

回答

相關問題