asp.net-mvc - 设计具有 HTML5 离线功能的移动 ASP.NET MVC 4 数据输入应用程序的正确方法

Question

我正在为需要支持离线功能的现场操作员创建一个 ASP.NET MVC 4 移动应用程序（平板电脑）的 PoC。这是一个相对简单的数据输入应用程序，带有一个 WebAPI 后端，它将使用 SQL 数据库作为持久存储。

这是我第一次实现离线支持，所以我有点不确定哪个是最好的设计方法。现在我能想到两种方法，不知道哪一种更好或更正确。

我想要的是，只要有互联网连接，就会从服务器中检索信息。如果连接丢失，我希望缓存/提供最新信息并可供用户显示。

根据我所做的一些测试，HTML5 离线支持的工作方式似乎是，一旦加载了任何视图，浏览器就会检查清单并在那个时刻缓存每个页面的版本. 如果我的理解是正确的，这意味着如果用户在浏览器下载清单文件后添加新条目，那么这些记录将不会显示在离线版本中。

我能想到的一种解决方法是在每次提供清单时更改清单版本（因为我是动态生成的），但我觉得这会破坏目的……或者至少在带宽方面效率极低。

我能想到的唯一其他选择是不使用常规 MVC（不将记录/数据库信息作为模型属性或 ViewBag 属性传递）来显示记录，而只是检索所需页面信息的 json 并保存在本地贮存。然后，根据 localstorage 中的信息，使用模板或 javascript 生成视图。这可以在线或离线工作，不是吗？

我不确定我是否以错误的方式处理这个问题。构建一个 SPA 或一个简单的 HTML/javascript 应用程序会更合适吗？也许使用 JS 框架？在这一点上，我有能力确定我们将使用什么技术或框架。

非常感谢任何指导。

score 3 · Accepted Answer

根据我所做的一些测试，HTML5 离线支持的工作方式似乎是，一旦加载了任何视图，浏览器就会检查清单并在那个时刻缓存每个页面的版本. 如果我的理解是正确的，这意味着如果用户在浏览器下载清单文件后添加新条目，那么这些记录将不会显示在离线版本中。

这就是为什么您不应该使用服务器端渲染的原因。当服务器在发送到浏览器之前将数据与格式混合在一起时，这意味着浏览器无法区分两者之间的区别。HTML5 和 Javascript 完全有能力自己处理模板，那么为什么不让它们呢？

将您的 MVC 应用程序编写为一系列控制器方法。不要单独使用“视图”。而是使用使用 javascript 的直接 HTML 文件向服务器发出 AJAX 请求以获取数据。用数据填充 HTML 视图，你就成功了。然后您可以缓存 HTML 文件，因为它们是静态的，您可以单独保存数据以供离线模式使用。

score 0 · Accepted Answer

除了已接受的答案之外，还有一篇关于此事的详尽帖子，标题为：

这家伙使用示例/完整的应用程序解释了所有内容，并且很好地解释了每一点。

除此之外，如果您真的想从具有离线功能的现代 Web 开发人员那里获得奶油，我建议您参加由非凡/明星开发人员John Papa提供的 2 部分课程。它使用SPA = 单页应用程序UI 范例。

该课程可在 Pluralsight 获得：

尽我所能享受它。确保您在课程中检查此关键字/功能：WIP = Work In Progress.

如果您有兴趣，这里是我保存更新课程代码的存储库： https ://github.com/leniel/SPACodeCamper

2 回答 2