一、通過文件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資源包本地映射-實踐