H5资源本地化策略-IOS

一、通过文件URL本地映射

模块化配置的方式

1）通讯过程

• web端发起资源加载的请求（html、js、image、css）；
• 使用NSURLProtocol实现资源请求的拦截；
• 根据URL与file.json的比对，判读文件是否缓存于本地；
• 如果没有匹配到本地资源，走正常流程，不做拦截；
• 如果本地存在有效文件，获取文件回传给web端，结束通讯；

WKWebView需要注册scheme才能实现URLProtocol的拦截，而且scheme不能为http(s)，会导致Web请求的PostBody与Cookie丢失，可以注册一个与Web端协定好的scheme，例如：[NSURLProtocol wk_registerScheme:@"local"]

/* WKWebView注册Scheme for URLProtocol */
+ (void)wk_registerScheme:(NSString *)scheme {
    Class cls = NSClassFromString(@"WKBrowsingContextController");
    SEL sel = NSSelectorFromString(@"registerSchemeForCustomProtocol:");
    if ([(id)cls respondsToSelector:sel]) {
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        [(id)cls performSelector:sel withObject:scheme];
#pragma clang diagnostic pop
    }
}

IOS11新特性-WKURLSchemeHandler 
https://www.jianshu.com/p/6bae04c91297 

2）本地资源包下发配置

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

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

3）本地资源包目录结构

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

file.json的内容格式如下：

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

备注：遍历web目录中的module文件夹，获取对应的file.json内容，创建static NSDictionary实例，将获取的内容存于该实例中，作为文件路由的集合。

4）本地资源文件的校验

• 通过url_md5在对应module文件夹的file.json中获取文件路劲；
• 开启子线程获取文件Data，生成md5签名；
• 从file.json中取出与url对应的md5签名；
• 两个md5值作比较，验证文件的有效性；

URL-Path存取的方式

存取方式特点

• 文件存取路径依赖于URL-Path，更贴近于前端资源的部署方式；
• 不依赖于file.json与module配置，相对独立，前端感知度较低；
• html文件没有md5签名串，无法对html进行文件验签；
• 资源分包相对单一，本地资源文件分布也较为分散；

实现：通过URL-Path获取文件的相对路劲，生成文件的沙盒路劲，多线程获取对应路径的资源文件，按照约定规则生成文件的md5签名，与URL-Path中的md5签名相比较，验证文件的有效性（示例：右键-复制链接地址，"沙盒/Documents/web/project_name/js/common/utils"）。

二、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）

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

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

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

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