利用angular+cordova实现离线存储,上线同步的技术分析

采用angular+primeng+splite开源框架实现PC\移动\平板完全自适应的新系统。

  1. 实现目标:
  • 多设备自适应功能:所有的功能点设计都要照顾到在PC/平板/手机上面展示的效果。
  • 离线数据保存功能:
    增加离线/在线状态提示:
    离线状态:在网络不稳定的情况下,自动开启离线数据功能(前台提示已开启离线模式),关键数据在网络良好的提前同步保存到本地splite数据库,离线订单等信息保存到本地库。
    在线状态:在网络状态良好的情况下,检测信号质量连续良好10秒以上,提示“网络状态正常”,数据自动同步,此时用户的实际操作涉及到的数据表正好正在同步操作时,提示“数据正在同步,请稍后再操作该功能”,后台开启多线程同步的表数据。

2、关键离线技术方案:
splite数据库
progress web app
用户首次登录且离线数据库没有数据时必须联网,通过接口认证通过后,服务端自动开启推送关键数据表到本地数据库(本地数据库记录上次数据推送时间);用户界面显示“数据更新中,请稍后”;用户不管联网还是断线保存的数据都是在本地,联网状态操作时,后台立即推送该数据到服务端,断网时,定时检测推送。(websocket或者MQ)

  • 离线数据存储技术
    SQLite是一款轻型的数据库,支持Windows/Linux/Unix等等主流的操作系统、CppSqLite对SQLite的API进行了一次封装,让开发人员更加方便的使用SQLite。
    统一存储json数据。
  • 自动重传
    在联网的情况下定时器按时轮询检查SQLite数据库,如果存在数据则自动重发上传,避免传输失败后数据的丢失.

  • 数据上传
    最好统一存储json数据,采用MQ中间件系统分离解耦客户端和服务端,数据先上传到MQ,避免客户端上传产生等待,提升客户端响应速度,已上传成功的信息本地更新上传时间。

  • 数据同步
    基础表数据自动同步到本地,如:用户表(离线登录验证)、基础档案表(离线选择货品)及其它涉及到离线的数据表。后台通过MQ自动同步这些表的数据,

3、增加APP离线数据管理后台

  • 可以配置推送指定数据到APP离线数据库(如:用户登录表、货品档案、本次待定货档案等数据,也可以是自定义SQL数据),如果连接MQ的话,可以先推送到MQ队列;等待APP上线后自动更新数据。
  • 可以配置APP离线数据需要推送哪些数据过来,插入到哪些表中
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular是一个流行的JavaScript框架,用于构建Web应用程序。Ionic是基于Angular的开源移动应用开发框架,它提供了一套UI组件和具,帮助开发者构建跨平台的移动应用程序。 Swiper是一个流行的移动端滑动组件库,它提供了丰富的滑动效果和交互功能,可以用于创建漂亮的轮播图、图片浏览器等。 结合Angular和Ionic,你可以轻松地集成Swiper组件到你的移动应用中。首先,你需要在你的Angular项目中安装Swiper组件库。可以使用npm命令来安装: ``` npm install swiper --save``` 安装完成后,你可以在你的Ionic组件中引入Swiper组件,并在模板中使用它。以下是一个简单的示例: ```typescriptimport { Component } from '@angular/core'; import SwiperCore, { Navigation, Pagination } from 'swiper/core'; SwiperCore.use([Navigation, Pagination]); @Component({ selector: 'app-swiper', template: ` <swiper [navigation]="true" [pagination]="true"> <ng-template swiperSlide>Slide1</ng-template> <ng-template swiperSlide>Slide2</ng-template> <ng-template swiperSlide>Slide3</ng-template> </swiper> `, }) export class SwiperComponent {} ``` 在上面的示例中,我们首先引入了Swiper组件库,并注册了所需的Swiper模块(例如Navigation和Pagination)。然后,在组件的模板中,我们使用`<swiper>`标签创建了一个Swiper实例,并在内部添加了三个滑动的内容块。 你可以根据你的需求自定义Swiper的配置和样式。更多关于Swiper的用法和配置,你可以参考Swiper官方文档。 希望这可以帮助到你!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值