ToB企服应用市场:ToB评测及商务社交产业平台

标题: 办理webview缓存题目 [打印本页]

作者: 去皮卡多 时间: 2025-1-1 02:34
标题: 办理webview缓存题目
近来在开辟小程序，因为一些需求在小程序内实现不了，转向引入webview来办理，说真话，坑许多，后面再逐一梳理遇到的题目，本日先记录一下webview遇到的缓存题目
webview

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

单页面应用的缓存方向主要是两个（主要也是上图中两种缓存）

入口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"的解释

关于清除资源文件的缓存

打包后的js文件

根据上面的调整试了一下，确实没有走缓存
调整之前

调整之后 (服务器返回都是200，不是304大概来自磁盘缓存了)

大概就是这些，我这里是记录了最简单快速的办理方式，有不同意见的可以提出来哦

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)