WKWebView加载网页时为了追求更好的用户体验，会设计一个缓存机制来应对加载缓慢的问题。
缓存的方案一般有2种：
1.利用浏览器自带的缓存机制。优点（缓存机制由系统提供方便快捷），缺点（系统将内容存在cache中，在遇到内存紧张的时候会自动销毁一次）
2.将网页内容以压缩包的形式下载到Document下面，解压后进行加载。优点（Document下的资源不会被无故清除），缺点（需要自行设计一整套更新替换方案，iOS9以下的需要把内容copy到temp目录才能读取）
这里就第2种方案进行了尝试。
前期准备
1.一个vue工程并完成打包，将dist文件名改成vue
2.将文件压缩成vue.zip，将2个包放到目录:/资源库/WebServer/Documents，如图所示
mac自带服务器资源目录.png
3.开启mac电脑的apache服务器：
开启apache: sudo apachectl start
重启apache: sudo apachectl restart
关闭apache: sudo apachectl stop
4.在浏览器中输入：http://localhost/vue/#/index，看到网页之后即是服务器开启成功了
逻辑梳理
1.总体逻辑，直接上一个图
加载网页逻辑.png
2.从逻辑图可以看出基本可以把内容分成2块，一边是加载本地或者是加载服务器链接逻辑，一边是下载、解压、设置缓存标志和版本号逻辑。（这样的话，代码刚好可以分成2块来解决，而且耦合度很低）
示例工程
HtmlDownloadManager用来管理下载和解压文件
HtmlDownloadManager为单例，在HtmlViewController被销毁之后，下载仍然会继续，现在并没有处理断点续传和下载队列等问题
HtmlModuleConfig主要用来统一下载文件的路径，和相应模块的本地版本的版本号和是否有缓存的配置
工程目录.png
模型类主要用来传递从后台获取到的模块的主要信息
name:压缩包和html文件夹的名字要和name对应
模型赋值参考.png
加载Document文件夹下的html
self.webView?.loadFileURL('url地址', allowingReadAccessTo:'允许加载的文件夹路径' )
网页通过cookie获取用户token
加载网页时用户信息的认证和原生一样都是通过token，下面的方法把token注入到浏览器的cookie之中方便网页拿到当前用户信息认证（具体用法根据实际情况而定）
//webview加载内容时的代理
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
//注入cookie
webView.evaluateJavaScript("document.cookie ='token=xfdkeqwc2vd3';") { (_, _) in}
}
相关的地址
示例工程:https://github.com/DalyLong/VueAndCacheDemo
Alamofire网络请求:https://github.com/Alamofire/Alamofire
SSZipArchive解压:https://github.com/ZipArchive/ZipArchive
网友评论