WKWebView加载网页时为了追求更好的用户体验,会设计一个缓存机制来应对加载缓慢的问题。
缓存的方案一般有2种:
1.利用浏览器自带的缓存机制。优点(缓存机制由系统提供方便快捷),缺点(系统将内容存在cache中,在遇到内存紧张的时候会自动销毁一次)
2.将网页内容以压缩包的形式下载到Document下面,解压后进行加载。优点(Document下的资源不会被无故清除),缺点(需要自行设计一整套更新替换方案,iOS9以下的需要把内容copy到temp目录才能读取)
这里就第2种方案进行了尝试。
前期准备
1.一个vue工程并完成打包,将dist文件名改成vue
2.将文件压缩成vue.zip,将2个包放到目录:/资源库/WebServer/Documents,如图所示
3.开启mac电脑的apache服务器:
开启apache: sudo apachectl start
重启apache: sudo apachectl restart
关闭apache: sudo apachectl stop
4.在浏览器中输入:http://localhost/vue/#/index,看到网页之后即是服务器开启成功了
逻辑梳理
1.总体逻辑,直接上一个图
2.从逻辑图可以看出基本可以把内容分成2块,一边是加载本地或者是加载服务器链接逻辑,一边是下载、解压、设置缓存标志和版本号逻辑。(这样的话,代码刚好可以分成2块来解决,而且耦合度很低)
示例工程
HtmlDownloadManager用来管理下载和解压文件
HtmlDownloadManager为单例,在HtmlViewController被销毁之后,下载仍然会继续,现在并没有处理断点续传和下载队列等问题
HtmlModuleConfig主要用来统一下载文件的路径,和相应模块的本地版本的版本号和是否有缓存的配置
模型类主要用来传递从后台获取到的模块的主要信息
name:压缩包和html文件夹的名字要和name对应
加载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