WKWebView加载Document下的网页

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.总体逻辑,直接上一个图


WKWebView加载Document下的网页_第1张图片
加载网页逻辑.png

2.从逻辑图可以看出基本可以把内容分成2块,一边是加载本地或者是加载服务器链接逻辑,一边是下载、解压、设置缓存标志和版本号逻辑。(这样的话,代码刚好可以分成2块来解决,而且耦合度很低)

示例工程

HtmlDownloadManager用来管理下载和解压文件
HtmlDownloadManager为单例,在HtmlViewController被销毁之后,下载仍然会继续,现在并没有处理断点续传和下载队列等问题
HtmlModuleConfig主要用来统一下载文件的路径,和相应模块的本地版本的版本号和是否有缓存的配置


WKWebView加载Document下的网页_第2张图片
工程目录.png

模型类主要用来传递从后台获取到的模块的主要信息
name:压缩包和html文件夹的名字要和name对应


WKWebView加载Document下的网页_第3张图片
模型赋值参考.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

你可能感兴趣的:(WKWebView加载Document下的网页)