作为客户端开发,经常需要验证服务端数据改变后本地app的行为,就拿最近遇到的一个问题:webview打开的网页页面,后台更新图片后,webview打开后还是之前的页面,图片没有更新,纳尼!我得自己验证下,说干就干,但是怎么替换图片然后验证呢,总不能每次都找后台同学去换图片,还是得自己想办法,二话不说就搞起:
1.搭建本地服务器:
Mac默认安装了Apache的,因此只需要打开Terminal,启动服务:
//开启apache: sudo apachectl start
//重启apache: sudo apachectl restart
//关闭apache: sudo apachectl stop
然后在浏览器里输入localhost或者localhost:80(注意:不要输入localhost:8080),如果出现如下提示,则证明启动成功。(注意:如果没有用命令启动,直接键入localhost:80也会出现it works!,但是服务其实是没有启动,这点需要注意下)
2.部署本地网页资源:
Apache存放资源的路径是:/Library/WebServer/Documents,把自己的网页和资源放进去就可以打开了。本地apache服务器上的资源目录如下:
3.创建工程项目进行测试:
为了简单起见,我只写一个简单的first.html文件,该文件中有个image标签;iOS工程直接xcode创建即可,需要查看工程的我在后面打包上传了工程,该工程有两个页面:
页面一:只有一个button
页面二:一个webview控件,一个wkwebview控件
4.开始测试:
关于解决网页缓存问题,具体操作方式参见www.zhihu.com/question/27040218,通过meta标签修改html文件的方式不能保证所有的浏览器都没问题,不是全面的解决方案;通过对图片文件做版本控制的方法也能解决问题,但是需要后台实时变更图片文件名称,也不太完美,秉承能自己搞定的问题就不麻烦别人的原则,这里从ios端入手解决。
1)尝试1:代码如下
修改apache中的图片资源,发现确实是图片还是之前的图片。
2)尝试2:代码如下
修改apache中的图片资源,发现图片可以实时更新。问题解决!!!好开心是不是~
总结:通过设置webview不读缓存可以解决缓存不能及时更新的问题,对于简单页面来说可以这样使用;但是对于复杂的页面,每次进入页面都要重新加载数据,用户体验可能不好。最彻底的解决办法还是需要在h5页面对资源做版本控制,这样在每次更新资源的时候,都能第一时间来加载最新资源。
最后上传下xcode工程。