人生的每时每刻都可能改变命运
H5容器拦截到静态资源请求时,如果本地有对应的文件则直接读取本地文件返回,否则发起HTTP请求获取线上资源,如果设计完整一点还可以考虑同时开启新线程去下载这个资源到本地,下次就走离线了。
下图演示资源在app内部的访问流程图:
其中proxy指的是开发时手机设置代理http代理到开发机。
由于界面由H5和Native共同完成,界面上的用户交互埋点数据最好由H5容器统一采集、上报,还有,由页面跳转产生的浏览轨迹(转化漏斗),也由H5容器记录和上报
因ajax受同源策略限制,可以在hybridApi层对ajax进行统一封装,同时兼容H5容器和浏览器runtime,采用更高效的通讯通道加速H5的数据传输
主要指扩展H5的硬件接口调用能力,比如屏幕旋转、摄像头、麦克风、位置服务等等,将Native的能力通过接口的形式提供给H5。
最后来张图总结下,hybrid客户端整体架构图:
其中的Synchronize Service
模块表示和服务器的长连接通信模块,用于接受服务器端各种推送,包括离线包等。Source Merge Service
模块表示对解压后的H5资源进行更新,包括增加文件、以旧换新以及删除过期文件等。
可以看到,hybrid模式的app架构,最核心和最难的部分都是H5容器的设计。