如何在Web应用中实现离线填报功能
本帖最后由 willning 于 2023-4-28 17:49 编辑客户在野外工作,网络环境不稳定,如何实现数据填报?客户的车间内严格断网,如何做数据填报?
对于编码开发的Web应用来讲,为了应对网络不稳定或临时断网的场景,通常需要做很多逻辑,将数据加载、数据暂存等从操作服务器调整为操作本地数据缓存。最终实现的效果是在用户不关闭浏览器或导航到企业页面的前提下,实现离线的数据填报,等待网络恢复后,再将暂存在本地数据缓存中填报数据一次性提交到服务器端。这种做法在使用活字格开发时也是可以继续沿用的。
https://hac.app.hzgcloud.cn/upload/FileDownloadUpload/Download?file=4ce1fa31-05aa-413c-9106-89b43271bcff_offline-data-demo.mp4
流程设计
支持离线填报功能的页面与通常的页面设计方式不同,复杂度较高。
(离线填报的用户交互流程)
[*]页面加载阶段:从服务器获取用户操作所需的全部数据(如主数据、字典数据、当前操作的业务单据等),将其存储到本地数据缓存
[*]用户操作阶段:使用本地数据缓存中的数据填充到界面,而不是通过数据绑定的形式,从服务器实时获取
[*]数据提交阶段:支持数据暂存功能,将用户操作的数据存储到本地数据缓存,等网络恢复后,再一次性提交到服务器
其中涉及到的本地缓存操作,需要用到【前端缓存插件】;使用【对象与集合操作插件】和【JSON数据源插件】操作数据。这个方案通常意味着“前后端分离”的开发模式,而不能使用数据绑定等功能。
示例工程
在示例工程中,将业务实体、主数据和字典存储到缓存的逻辑位于“在线创建”页面(这个页面不支持离线)中创建按钮的命令;使用本地缓存而不是数据绑定的方式加载下拉框选项、填充各输入框默认值的逻辑位于“离线填报“页面(这个页面支持离线操作)的页面加载命令。
这个方案离线填报能承载的数据量大概是多少? Jack.Cheng 发表于 2024-10-9 11:44
这个方案离线填报能承载的数据量大概是多少?
PC浏览器里,数据是存储在浏览器的localStorage,HAC是存储在内置的realm数据库。承载的数据量还是蛮大的。但,数据越多,序列化和反序列化就越慢。
页:
[1]