彻底解决小程序内嵌web-view缓存问题

2023-10-27

image.png

前言

项目是通过web-view内嵌在小程序里的vue单页应用.然而前几天发现明明发布了代码,在小程序入口进去看到的还是旧页面,尝试了各种操作:

  • 手动退出小程序,再次进入;

  • 删除 发现-小程序,重新进入;

  • 关闭微信,杀掉进程,重新进入

  • 修改 Nginx 关于 Cache-Control 的配置;

  • 用 debugx5.qq.com 手动清除安卓微信浏览器缓存;

  • iOS 利用微信自带清除缓存功能。
    不管怎么操作,依然显示的是旧页面!!! image.png

分析原因

这个缓存是存在哪里的呢?
一般情况下,浏览器缓存是个非常有用的特性,它能够提升性能、减少延迟,还可以减少带宽、降低网络负荷。
浏览器的缓存机制可以总结成下面两句:

1.浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
2.浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

而web-view组件就是嵌在小程序里的网页,它本质上是运行在微信内置浏览器里的,它在缓存上并没有完全遵照上述的规则,也即它的缓存并不能及时得到清理

在小程序里面, web-view组件是通过一个url地址来访问h5页面的,如果内嵌 H5 的地址不发生变化,那么 web-view 访问资源会从缓存里取,而缓存里并没有最新的数据,这就导致了服务端的最新资源根本无法到达浏览器,这也就解释了为什么修改 Nginx 的 Cache-Control 配置也无法生效的原因。所以,要想彻底解决及时刷新,必须让 web-view 去访问新的地址。


小结

造成web-view无法刷新的原因:
1.浏览器缓存;
2.url地址被缓存

解决方案

原因找到了,那么如何解决呢?

1.针对url地址没刷新的问题,可以在webview组件的src里面添加一个时间戳.

src = `https://XXX.com?timestamp=${new Date().getTime()}`
<web-view src='{{src}}'></web-view>

url后面加时间戳这个,苹果机是可以实时解决缓存的,然而安卓机不行

2. 在index.html的head头部添加不缓存的配置

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

3.在webpack打包的时候加上 hash配置

  filenameHashing: true,
  pages: {
    index: {
    // page 的入口
    entry: 'src/main.js',
    // 模板来源
    template: 'public/index.html',
    // 在 dist/index.html 的输出
    filename: 'index.html',
    // 当使用 title 选项时,
    // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
    title: 'Index Page',
    hash: true,
    // 在这个页面中包含的块,默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },

关于hash配置, 可以参考这篇文章:vue 开发常用工具及配置五:hash 与缓存控制

4.使用工具debugtbs

如果是安卓机, 可以在微信上打开http://debugtbs.qq.com, 然后将所有清除的按钮点击一遍,下次再进去就可以了。


至此, 如果还是不能清除,其实也不用太担心,web-view再过一段时间(时间不定,一天或者几小时,无明显规律)是可以进行缓存刷新的,只是不能做到实时刷新, 有一说法是官方后台需要审核页面,具体不得而知了,感兴趣的小伙伴可以查查看,然后回来告诉我,静待佳音。

推荐一个小工具

web-view如何调试?

  1. 开发工具上在web-view页面内点击鼠标右键有个调试的选项

  2. 需要在真机上调试需要自行引入vconsole

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

彻底解决小程序内嵌web-view缓存问题 的相关文章

随机推荐

  • 为了预测股票,我用TensorFlow深度学习了股市数据

    完整源码可在微信公众号 01二进制 后台回复 股市分析 获取 阅读此文前建议先阅读 找对象的过程中 我竟然理解了什么是机器学习 前言 相信大家这几天或多或少的都开始关注到股市了 虽然我还不是很懂里面的一些套路 但是从最近各个公众号的推送里面
  • 无盘服务器chkdsk *: /f)修复命令,巧用CHKDSK命令修复U盘文件或目录损坏问题

    巧用CHKDSK命令修复U盘文件或目录损坏问题 U盘是我们常用的随身移动存储工具 我们平时在使用U盘时难免会出现那么几次 直接拔出U盘 结果导致 U盘的文件或目录损坏且无法读取 U盘里的任何内容都无法打开了 有些朋友认为是磁盘出现坏道直接舍
  • 详解C语言中的stdin,stdout,stderr

    我们在写C程序时经常遇到printf fprintf perror 这些东西到底有什么作用 说到这不得不提及stdin stdout stderr 想想 我们在用C去写文件时的操作 File fp fopen 这个fp就是我们向系统申请的
  • android浏览网页,Android学习之通过Intent实现浏览网页

    大家好 在这里和大家分享我刚刚学到的知识 通过Intent打开网页 首先 打开布局文件中main xml 创建为LinearLayout布局 并且创建一个EditText和Button控件 具体代码如下 android orientatio
  • Jmockit 静态方法mock

    类中存在刷新 初始化等静态方法时 编写单元测试案例 示例 被测试类 public class MethodClass public static void refresh init
  • 智能合约编写之Solidity的设计模式

    前 言 随着区块链技术发展 越来越多的企业与个人开始将区块链与自身业务相结合 区块链所具有的独特优势 例如 数据公开透明 不可篡改 可以为业务带来便利 但与此同时 也存在一些隐患 数据的公开透明 意味着任何人都可以读取 不可篡改 意味着信息
  • 【新手向】如何在npm上发布属于自己的包

    课程内容来自黑马程序员的网课 供博主自己检索知识和复习用 当然如果能帮助到你就更好了 作为一个程序员 你一定下载过各式各样的包来自己的项目实现更多功能 但是如何自己发布包呢 建立属于自己的包 第一步 你需要建立一个包 建立包很简单 只要满足
  • 数据科学与大数据分析之项目2-聚类

    聚类 项目介绍 项目开始 项目介绍 文件TreeDB csv包含258个树种的描述 数据由XX市议会开放空间和环境服务部管理处提供 已提供数据集作为公共空间最佳树木选择合作项目的一部分 假设你是该项目团队的一员 进一步假设你决定参与聚类分析
  • java image 透明_Java 生成半透明照片

    在许多实际运用中 我们常常需要将一张照片 图片 装换成半透明后再显示或保存 下面我们就来看看如何使用Java来生成 转换一张照片到半透明 1 基本思路 1 打开一张图片 BufferedImage imageOpen ImageIO rea
  • php密码输入密码,php打开页面输入密码的代码

    直接复制以下代码到模板 文件或者PHP文件 当打开页面时就得输入密码 写模板内容页时候也可以试用 把密码部分当做变量对应后台写入即可 更多功能自己想象
  • ubuntu下 jupyter登录上了 新建python3连接失败

    近期在使用anaconda jupyter的时候发现自己在新建jupyter文件的时候一直报连接错误 所以为了解决此问题做了如下两种方法 第一步 pip uninstall tornado pip install tornado 5 1 1
  • (四)Vue和React的编码方式对比----样式处理及样式污染

    经过3篇文章后我们可以编写一些简单的HTML结构并渲染只页面 可是前端重要的是什么 是样式 前端是给用户看的 所以样式处理也是很重要的一件事 如果一个前端静态效果都写不好 那多丢人 所以本篇介绍一下React和Vue的样式处理方式 以及一个
  • JS —— js中的节流与防抖

    文章目录 前言 一 节流 1 什么是节流 2 做节流可解决什么问题 3 如何做节流 二 防抖 1 什么是防抖 2 做防抖可解决什么问题 3 如何做防抖 总结 前言 最近有同学问到节流与防抖的相关知识点 于是乎 四处查资料 找一找 看一看 终
  • vuepress项目部署出现样式丢失,图片加载失败的问题

    之前在尝试部署vuepress项目时 出现了样式丢失 图片加载失败的问题 具体情况请继续往下看 本地测试 完全正常 在本地测试时的样式都是正常显示的 GitHub部署 样式丢失 打包部署到GitHub上时 布局和样式就完全乱了 同时还有一堆
  • 10、docker 安装 tomcat

    一 docker 环境下安装中间件总体步骤 搜索镜像 拉取镜像 查看镜像 启动镜像 服务端口映射 但其实 docker run 的时候 就会帮我们去配置的 registry 拉取镜像了 也就是 搜索镜像 这一步 其实是可有可无的 二 安装
  • Form 表单内有多个元素的使用方式

    产品中常有的一个需求 输入框后面有描述文案或其他组件 我们可能这样写
  • Java进阶:用案例源码解析EventLoopGroup,面试真题解析

    一 前言 有句话 正因为你优秀 所以难以卓越 刚开始听这句话还在上学 既不卓越 也不优秀 甚至可能还有点笨 但突然从某次爬到班级的前几名后 开始喜欢上了这种感觉 原来前面的风景是如此灿烂 优秀和卓越差的不是一个等级 当你感觉自己优秀后 还能
  • 6-机器学习启蒙- 深度学习: 图像搜索

    6 深度学习 图像搜索 github https github com mtianyan graphLabStartedML 深度学习 图像搜索 基于图片的相似度来选购商品 可视化商品推荐 我想买双新鞋 但是 mark 符合我的风格 我又感
  • openssl 1.0.2d安装使用教程

    本文简要介绍CA和证书的基础知识 并演示openssl 1 0 2d的安装 CA证书生成 用户证书申请 使用CA签发用户证书等内容 另外 可以参考本人的其他文章如nginx教程 进行生成证书的验证 By 泪痕之木 实验环境 操作系统 Cen
  • 彻底解决小程序内嵌web-view缓存问题

    前言 项目是通过web view内嵌在小程序里的vue单页应用 然而前几天发现明明发布了代码 在小程序入口进去看到的还是旧页面 尝试了各种操作 手动退出小程序 再次进入 删除 发现 小程序 重新进入 关闭微信 杀掉进程 重新进入 修改 Ng