H5资源本地化策略-IOS

一、通过文件URL本地映射（JSContext实现通讯）

通讯过程

1、通过JavaScriptCode，注入jsBridge运行脚本（如果用URLProtocol，WKWebView会丢失PostBody）；

2、web端拦截相关文件下载（html、js、image、css）；

3、将文件的url、module信息回传给native；

4、通过文件相关信息，判读文件是否缓存于本地；

5、没缓存通知web端去下载，结束通讯；

6、如果本地存在有效文件，获取文件回传给web端，结束通讯；

备注：UIWebView需要在JSContext创建之后注入JSbridge，也就是didCreateJavaScriptContext中实现注入（私有API，可以把该方法编码成base4，通过hook IMP的方式，实现方法的调用）。

本地资源包下发配置

资源包配置update.json内容格式如下：

{
  "module" : "模块名",
  "url" : "资源包地址",
  "md5" : "资源包md5",
  "version" : "资源包版本号",
  "increase" : "是否为增量包",
  "usable" : "是否使用",
  "extendInfo": {
    "preMd5" : "前包md5",
    "fullMd5" : "全量包md5",
    "fullUrl" : "全量包下载地址",
    "fullVersion" : "全量包版本号"
  }
}

本地资源包目录结构

结构图如下：（web | moduleName | file.json、js、css、html、image）

file.json的内容格式如下：

{
  "url_md5": {
    "path" : "相对路劲",
    "hash" : "文件哈希值"
  }
}

本地资源文件的校验

1、通过url_md5在对应module文件夹的file.json中获取文件路劲；

2、开启子线程获取文件Data，生成md5签名；

3、从file.json中取出与url对应的md5签名；

4、两个md5值作比较，验证文件的有效性；

备注： 如果只是缓存相对独立的公共资源文件（image、js、css等），可以用文件的url-path（示例：右键-复制链接地址）作为目录结构实现资源打包，通过url-path解析文件的相对路劲再合成绝对路劲，获取本地文件后，用文件的md5签名与url-path中的md5字符串作比较，验证文件的有效性。

二、H5资源包本地映射（html#）

资源模块化：主业务分包 module1、module2、module3...

模块结构分布：js、css、image、html、router.json、file.json（除了json文件，其他是对应类型的目录）

资源包类型：内置包、全量包、增量包

资源包配置：module、url、md5、version、inscrease、usable、extendInfo（lastMd5、fullUrl、fullMd5、fullVersion）

资源下载：队列下载、验签、解压

资源映射：路由匹配、本地映射、资源加载

------------------------------------------------------------------------

PPT演示： H5资源包本地映射-实践

来源：CSDN

作者：流河_旱树

链接：https://blog.csdn.net/z119901214/article/details/103414706

标签

url

本地化