引言
随着时代以及技术的不断演变，大部分App从简单的一个工具型App，慢慢的转型为平台型App，各种服务化、模块化、社区化的特点。对于App的要求也不仅仅只是体验性，还需要给App赋予动态化、高效性的特性。
而我司在多年的App开发过程中，也遇到了不少的常见的疑难杂症。
如下：
原生开发：
1、ios、android效果怎么又不一样了？
2、某某端开发完了，另外一端啥时候开发完呀？
3、线上版本出bug了怎么办？
4、业务多变，我要上线，等发布？
….
混合开发
1、资源更新了，缓存没刷新，还是显示老数据？
2、怎么白屏了？
3、页面加载怎么这么慢？
4、页面切换数据不够快
….
如何更好在满足业务需求的前提下，能够高效快速的迭代版本功能？并且也能更好的解决可能出现的异常情况？传统的原生App开发方式已经很难应对这种业务场景，即使可以，那么在开发成本上也是非常大的。于是乎，混合开发慢慢的成为了我司的后续方案选型，HTML5成为了我司作为突破的要点。在不断的研发过程中，为解决App快速开发、快速部署、非阻塞浏览、本地缓存与实时更新，给用户一个友好的体验，最终形成了我司基于“离线包机制+发布平台”的一个道乐离线化集成方案。接下来我们就介绍下整个方案的设计概念。
设计
离线化是整个方案的重点，我们引入了离线包机制，将原有的从加载线上服务器的HTML5，改成资源本地化，摆脱网络因素对HTML5的影响，从而达到接近原生的用户体验。
实现原理
- 静态资源本地化是将包括 HTML、Javascript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地，然后通过客户端打开，直接从本地加载离线包，然后通过中台更新资源包，从而最大程度地摆脱网络环境对H5页面的影响。
- 接口资源本地化主要是通过命中缓存规则把数据缓存到本地，并通过后台静默更新数据实现非阻塞式离线访问。
思路图
整个离线化集成方案，会针对原生端、Web端以及后台端（或发布平台）进行围绕展开。
功能
功能点的多样性可以用来增加App的实用性，从多方面进行考虑，能更好的提高App使用过程中的体验。
原生端
为了提高用户体验，离线资源的缓存下载方式会影响到用户对于App的使用情况。所以针对离线化的功能体验优化，做了一些优化处理
- 更新机制对于用户最为容易感知的原生端而言，离线包的更新选择上会对用户有比较直接的体验影响。从更新的频率上，我们采用了定时轮询更新以及启动更新的机制，保证资源始终处于一个相对最新的版本，避免较大的差异性。从更新的模式上，分为反馈式更新（即用户可感知可选择的更新）、静默更新（用户无感知的更新）更多的一个更新选择，可以让我们做到更好的一个用户体验。
- UI自定义机制对于现在有的App来说，我们期望用户看到的视图界面是酷炫可变的，这个时候，针对更新的操作反馈UI的自定义机制就会发挥作用。
发布平台
一个功能完善的发布平台，能够更好的给App提供多样化配置，将需要发布的内容简单快速的进行投放
- 增量/全量机制对于HTML5来说，尽管业务量比较简单，离线包的大小多少也会影响到下载的成功率以及用户的体验。实际上，对于更新的包来说，发布平台会通过算法，去计算两个不同版本离线包的差量，从而生成对应版本的增量包，提高每个用户的更新成功率。
- 多功能发布对于开发的功能来说，我们会偶尔需要针对性的进行发布，比如某某版本号的App不允许使用该功能，希望多少版本号的App进行强制更新等等。这些都可以通过发布平台进行有需求的选择性发布。
Web端
一个功能完善的发布平台，能够更好的给App提供多样化配置，将需要发布的内容简单快速的进行投放
- 缓存工具HTML5大部分的资源通过离线化机制，已经提前放置于原生端本地，那么从提高体验方面来讲，接口数据方面的缓存化是一个重大的提升以及突破。通过对应的缓存工具，可以实现接口数据本地缓存、实时更新以及更新更优的反馈。
优势
性能体验接近原生
集成了离线化方案，可以将HTML5各种资源缓存在本地，使用体验不受网络环境影响
传统的HTML5技术容易受到网络环境影响，因而使HTML5的用户体验大打折扣。
通过使用离线化集成方案，可以有效的保证网络延迟、弱网络、离线等恶劣环境下极好的使用体验，同时保留HTML5的实时更新、实时部署、用户体验一致性等优点。
灵活自主的热更新能力
当有需要改动需求时，只需要提供新的离线包，即可用于原生端的同步更新，不需要不断的进行客户端版本更新。
关于离线化集成方案
致力解决APP快速开发、快速部署、非阻塞浏览、本地缓存与实时更新，给用户一个友好的体验。
为开发、测试、运营及运维，提升开发效率，协助企业快速搭建稳定高质量的移动 App。
缩短App的建设周期，HTML5的开发部分可以复用于微信等各大平台。