H5 WebView热更新策略

背景介绍

本文介绍了一种嵌入到原生客户端(安卓和IOS)中的H5页面中资源热更新策略。

通常使用WebView技术将H5页面嵌入到原生客户端中,作为二级页面,以此来提高开发效率。但由此带来的一个问题就是:如何向H5页面传递信息。

常见的作法有两种:1. 通过在js全局对象上注入方法的方式;2. 原生打开H5页面的时候通过cookie传递消息。

这两种做法各有利弊:

  • 注入js方法的方式可以携带较大的数据量,但是缺点在于: 1. 注入需要时间;2. 传递的数据量超过限制之后会导致App闪退;
  • 通过cookie的方式克服了注入等待时间的缺点,但是cookie能够携带的数据量比较小,不能作为大量数据传递的途径。

解决方案

笔者在工作实践中采用的方式是:cookie+时间戳的方式;通过cookie不传递信息,而是传递信息是否更新的时间戳;通过和本地保存的时间戳进行对比,可以判断出本地保存的信息是否过期,如果过期,再由H5向后端请求数据。

下面是国际化资源热更新的流程图,从中清晰的体现出资源热更新的策略:

相关推荐
最强小杰12 小时前
gpt-image-2.5-sunburst + OpenAI SDK + Cline 怎么接?完整图生图与局部重绘教程
gpt·ios·ai·iphone
kk_net889912 小时前
FSNotes:macOS 和 iOS 上的开源笔记管理器
笔记·其他·macos·ios
应用市场13 小时前
用本机跑的开源音乐模型,给安卓小游戏做 20 秒无缝循环背景音乐
android·python·游戏开发·soundpool·音频处理
00后程序员张13 小时前
Windows 开发 iOS App 入门,用 SwiftUI 写第一个 iOS App 装到 iPhone
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
企业数字化笔记13 小时前
表单发布前怎么验收?版本引用、字段兼容和历史数据回归
android·数据挖掘·回归
生信分析笔记13 小时前
Nature 正刊 GPN-Star 基因组语言模型
android
渣渣盟13 小时前
Flink 状态管理深度剖析:从 KeyedState 到 RocksDB,状态如何存储、恢复与扩缩容
android·大数据·flink
avi911113 小时前
电影开源Jevdo - 源码介绍(vue版)没有android 和 没有wpf
android·wpf·框架·数据爬虫·meego·电影管理
OxYGC13 小时前
[工程] PHP2Shell 漏洞解析:两条 PHP 内核 RCE,为什么应用层的防护全部失效
android·开发语言·php
2501_915106321 天前
抓包抓到乱码或压缩字节怎么解析,TraceEagle五种查看模式和一键解码
网络协议·计算机网络·网络安全·ios·adb·https·udp