去皮卡多 发表于 2025-1-1 02:34:12

办理webview缓存题目

近来在开辟小程序,因为一些需求在小程序内实现不了,转向引入webview来办理,说真话,坑许多,后面再逐一梳理遇到的题目,本日先记录一下webview遇到的缓存题目
webview

先说下自己的明白吧,webview是独立于微信客户端之外的,是为了办理小程序大概APP办理不了的题目,比如小程序不能操纵dom元素,需求里面必要大量的操纵dom元素,就可以引入webview,但是相对地,就会有缓存和兼容的题目,先说一下缓存的题目
借鉴了两位大佬的办理方案 跳转1跳转2,好奇的可以先看着两篇文章
先讲一下缓存的题目,每次小程序加载webview的url的时间,url是每次加载都不变的情况下,访问的资源大多数是走的缓存,webview本质是浏览器,浏览器默认是带缓存的,清除一些设置的情况下,后续每次访问页面,一些资源请求大概Index.html文件的请求,都是走的缓存,查看接口也是服务器返回了304(304代表优先走本地缓存)
看下图,可以或许看到确实走的客户端内的缓存,第一次加载客户端就已经缓存的页面文件
https://i-blog.csdnimg.cn/blog_migrate/082f8fdc3155b2eb80cac76c838ade10.png
单页面应用的缓存方向主要是两个(主要也是上图中两种缓存)
   

[*]入口index.html的缓存
[*]打包后的资源文件的缓存
之前所了解到的办理缓存的方法



[*]index.html的head部门添加meta标签
   < meta
http-equiv=“Cache-control”
content=“no-store,no-cache”
/>
< meta http-equiv=“Pragma” content=“no-cache” />
< meta http-equiv=“Expires” content=“0” />


[*]< webview url=“后面参数带时间戳”></ webview>
这两种方式都试过,都不太行,页面还是有缓存,后面看到一个大佬的文章,感觉好像很可行的样子,就试了一下,果然可以
最终办理方案

先总体说下办理方案
   

[*]办理入口文件index.html缓存(服务器相应增加请求头Cache-Control,本项目接纳Nginx部署,就直接在Nginx设置文件添加了–add_header Cache-Control “no-store, no-cache”
如许每次加载项目地时间都会不走缓存)
[*]办理资源缓存题目(资源加载主要是webpack打包后端 dist文件,这里调整项目设置文件,增加hash:true属性,给每次打包后的文件添加hash标识符)
add_header Cache-Control "no-store, no-cache"的解释
https://i-blog.csdnimg.cn/blog_migrate/f0f6ba5f294d3e61cbb491e9fca8ee85.png
关于清除资源文件的缓存
https://i-blog.csdnimg.cn/blog_migrate/43dd33df44556be129a8cd09e24dc638.png
打包后的js文件
https://i-blog.csdnimg.cn/blog_migrate/5bb1107585e51388d11ef2112a64d84c.png
根据上面的调整试了一下,确实没有走缓存
调整之前
https://i-blog.csdnimg.cn/blog_migrate/8747bb37702196082cc85e05c9cc3f3b.png
调整之后 (服务器返回都是200,不是304大概来自磁盘缓存了)
https://i-blog.csdnimg.cn/blog_migrate/b1810cae9b044a958468adb1c2e272ca.png
https://i-blog.csdnimg.cn/blog_migrate/316ad7096bb23b42f2c6abe79dbca8bf.png
大概就是这些,我这里是记录了最简单快速的办理方式,有不同意见的可以提出来哦

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 办理webview缓存题目