存储脱机应用程序页面的最佳方法

Question

这是我的第一个移动应用体验。我们的客户要求开发一个应用程序，在移动应用程序中显示来自其网站的静态数据。我们计划使用phonegap。

该应用程序将仅包含列表（例如：城市景点列表）和页面（城市景点页面）。我应该使用数据库还是只将我的页面导出为html？有什么建议？

Answer 1

来自wikipedia：

  

PhoneGap应用程序使用HTML5和CSS3进行渲染，使用JavaScript作为逻辑

这意味着您有两种可能性，即您的应用程序中的客户端数据是否在没有应用程序更新的情况下进行修改。由于我无法根据您在问题中提供的信息确定，我将详细说明每个案例的答案。

---

如果您的客户的数据不需要更新（没有更新您的应用程序）

在这种情况下，您认为客户的数据是静态的。此数据的来源不相关，因为在分发应用程序之前，您将其包含在应用程序数据中，如任何其他文本或图像（或其他资产）。这意味着您的客户端的 listing 将与您的应用程序绑定，修改它们将需要更新您的应用程序。

从技术上讲，这意味着您只需将客户端的数据添加为静态文件即可。它可以是HTML5代码，就在您自己的应用程序代码的中间，或者它可以是任何类型的文件（例如Json），您的应用程序必须解析和显示（使用JavaScript）。

但是，如果您使用HTML5解决方案，出于可维护性目的（以及其他原因），您可能希望将客户端内容与应用程序中的内容分开。为此，请创建一个HTML5 / CSS3页面，其中包含您客户的数据，并使用that method将其包含在您的应用程序页面中（或者您可以使用pager.js this answer）中提到的库。

作为旁注：在本案中，下一个方法将与此方法一样好;有点复杂的缺点。

如果您的客户的数据需要在没有更新应用程序的情况下进行更新

在这种情况下，您认为客户的数据是动态的。数据的来源是相关的，因为只有获取数据的方法将存储在您的应用程序中：其余的将由执行您的应用程序的设备完成。虽然实现起来比较复杂，但这种方法的优点是可以在不需要更新应用程序的情况下不断更新数据。

从技术上讲，这意味着您将在HTML5 / CSS3中描述您的应用程序布局和（图形）设计，并且您将编写应用程序行为（获取客户端数据，存储它，查询，显示它等）的代码。的JavaScript。

为此，您需要使用JavaScript（嵌入在您的应用程序的HTML5文件中）获取客户的信息，然后再次使用JavaScript将这些信息存储在PhoneGap Storage中。然后，您的应用程序还需要查询PhoneGap Storage（仍然使用JavaScript）来访问存储的信息并显示它，根据HTML5 / CSS3文件中描述的布局/设计（可能是您的HTML5骨架）应用程序为您的客户端数据逻辑布局，CSS3 ID和类的设计/外观）。

值得注意的是，如果您拥有一个永远在线的设备，只要您的客户的网站已启动，您就不需要将该列表信息存储在您的应用程序中。但是，如果您的客户的网站出现故障，或者设备脱机，您将需要一个本地存储。

底线

换句话说，如果您的应用程序从不需要Internet连接，则可以安全地将列表包含在HTML5 / CSS3数据中;否则，您需要使用JavaScript / PhoneGap Storage解决方案，即使它更复杂。

Answer 2

如果仅限静态数据/屏幕，并且有限的文件可以说50个文件，总大小 2MB 那么最好将它们作为html页面脱机。由于您的客户要求在移动应用程序中保存其网站上的静态数据。

但是，您最好先与客户讨论未来的升级可能性，并相应地将App设计为完全离线或部分离线＆amp;在线

完全离线：

• 设备上的所有页面（总大小为2MB，更大的尺寸会增加加载时间和性能开销）

半离线＆amp;半数在线数据：

• 只需拥有设备存储空间中的所有静态数据（即HTML5存储空间，请阅读this＆amp; this）
• 使用JS获取本地页面上的本地存储数据
• 您可以运行JS事件来对服务器进行异步调用，以查看是否存在新数据，然后相应地更新本地存储。该事件可以在App load or App在前台时间到来时触发。

HTML5本地存储加密

• 在设备上拥有敏感数据时，始终建议使用加密本地存储。如果有敏感数据（请查看这些link1，link2，link3）

很少有优化和提高应用性能的方法。

• 保持DOM大小最小化（动态加载其他HTML / div /标签 - 例如，请参阅this
• 尽可能使用CSS渐变代替图像
• 缩小HTML，JS，CSS资源

有关更多效果提示和提示，请阅读Google PageSpeed。

希望它会对你有所帮助。

Answer 3

我们收到了来自客户的类似请求。我们获得了一个网站http://www.gargashinsurance.com/ContactUs.aspx(The新网站尚未上线，这是他们的旧网站）我们的目标是使用其中的大部分内容我们的移动应用程序。

我们通过使用Kendo UI模板实现了它（您可以使用您希望的任何结构）。基本上，应用程序将向服务发出ajax调用，并从URL接收数据并将其存储在动态生成的html页面中。

您可以查看应用https://play.google.com/store/apps/details?id=com.payoda.Insurance 它可以在所有商店IOS等中使用并使用cordova开发。

我们还保留了一个json文件，并使用本地ajax调用从中获取数据，以填充表单中的字段，其中包含详细信息，例如国家/地区列表（因为它是一个很长的列表，并且对下拉框值进行硬编码很繁琐）。这适用于离线应用程序

我们的下一个版本是一个在线应用程序，我们使用phonegaps文件阅读器概念http://docs.phonegap.com/en/1.3.0/phonegap_file_file.md.html ..我们所做的基本上是从服务器读取json文件，如果有更新可用，并替换手机本地存储中可用的json文件如果应用程序处于脱机状态或没有可用的更新，则只需在本地存储中使用json。

底线是从服务器获取数据（如果是在线应用程序），并填充您的html页面。这样更容易反映更改，您不必为每个小的更改发布另一个版本。新的版本只能发布主要功能更改。我建议这种方法导致您的数据永远不变。

如果是离线应用程序，最好导出到html页面。但这并不好，因为每次更新都需要新版本的应用程序