APP移动端web离线化技术

一、当前问题

1、弱网或断网，当用户进入电梯或无网区，长时间白屏或无法显示页面

2、正常网络，从点击app到显示首页文字图片，白屏时间大约7-9秒

二、原因分析

1、从技术视角，分析一下网页启动的几个关键耗时阶段

2、没有做离线化技术，而手机端用户进入弱网与无网区实际存在

三、解决方案

1、业界有一种广为应用的技术方案，既：离线化/离线包方案。其主要思路是：

①、将包括HTML/JS/CSS等静态资源打包到一个压缩包内，在用户访问项目前，预先下载该离线包到本地并解压
②、当用户访问页面发出资源请求时，WebView容器会对请求进行拦截，如果已经在离线包内，会使用离线包中的本地资源响应给用户

2、可实现app秒开，与断网情况浏览网页，效果如下图：

四、具体进展如下

1、web端每次构建生成离线包与接口自动部署cdn服务器（web端done、运维done）

2、安卓与IOS直接加载沙盒本地资源html、js、css（app端done）

3、动态接口Homepage_US_Web_michaels.com.json实现离线化，使用postMessage方式解决跨域（app端done、web端done）

4、弱网白屏渲染阻塞，修改不合理closeLoading，4个js改异步加载，整合远程css，去除不用字体（ app端done、web端done）

5、图片离线化采用http缓存方案，app端去除不合理清除缓存与webview图片阻塞设置（app端done）

6、离线包更新策略，使用gzip分包压缩与md5完整性校验，比对最新包文件名，增加与删除离线文件（app端done、web端done）

7、Fallback方案，降低离线化风险，离线包报错5s自动跳转线上与app手动切换线上，（app端done、web端done）

8、自动刷新，当静态包或动态json文件版本变化，app端自动刷新（app端done）

jerry