preface
The project is a vUE single page application embedded in the applet via Web-view. However, a few days ago, I found that when I published the code, I still saw the old page in the entrance of the small program. I tried various operations:
- Manually exit small program, enter again;
- Delete discovery – applets, re-enter;
- Close wechat, kill the process, and re-enter
- Modify Nginx cache-control configuration;
- Manually clear android wechat browser cache with debugx5.qq.com;
- IOS uses wechat’s own cache clearing function.
No matter what you do, the old page is still displayed!!
The analysis reason
Where does this cache reside? In general, browser caching is a very useful feature to improve performance, reduce latency, and reduce bandwidth and network load. The browser cache mechanism can be summarized as follows:
❝
1. Each time the browser initiates a request, it searches the browser cache for the result of the request and the cache IDENTIFIER 2. Each time the browser receives the result of the returned request, it stores the result and the cache id in the browser cache.
❞
The Web-view component is the web page embedded in the small program, which essentially runs in the Built-in browser of wechat. It does not fully comply with the above rules in the cache, that is, its cache can not be cleaned in time;
In the applet, the Web-view component uses a URL to access the H5 page. If the address of the embedded H5 page does not change, then the web-view access resources will be fetched from the cache, and the cache does not have the latest data, which results in the server’s latest resources cannot reach the browser at all. This explains why changing the cache-control configuration of Nginx doesn’t work either. So, to completely solve the problem of refreshing in time, you have to let web-View access the new address.
summary
❝
Causes of web-view failure: 1. Browser cache. 2. The URL is cached
❞
The solution
The cause has been found, so how to solve it?
1. If the URL is not refreshed, you can add a timestamp in the SRC of the WebView component.
src = `https://XXX.com?timestamp=${new Date().getTime()}`
<web-view src='{{src}}'></web-view>
Copy the codeIf you put a timestamp after the URL, the MAC can handle caching in real time, but android can’t
2. Add an uncached configuration to the head header of index. HTML
<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" />
Copy the code3. Add the hash configuration when the Webpack is packaged
filenameHashing: true.
pages: {
index: {
// Page entry
entry: 'src/main.js'.
// Template source
template: 'public/index.html'.
// Output in dist/index.html
filename: 'index.html'.
// When using the title option,
/ / title of the template tag needs to be < title > < % = htmlWebpackPlugin. Options. The title % > < / title >
title: 'Index Page'.
hash: true.
// The blocks contained in this page are contained by default
// The extracted generic chunk and Vendor chunk.
chunks: ['chunk-vendors'.'chunk-common'.'index']
}
},
Copy the code❝
For hash configuration, see this article: VUE Development Tools and Configuration 5: Hash and Cache Control
❞
4. Use the debugtBS tool
If it is an Android machine, you can open http://debugtbs.qq.com on wechat, and then click all the clear buttons again, next time you can go in.
At this point, if still not clear, also don’t need to worry too much, actually web – the view in a period of time (time variable, or a few hours a day, without obvious regularity) can cache refresh, just can’t achieve real-time refresh, a theory is that the official background review page, concrete is not clear, interested friends can check, Then come back and tell me, and wait for good news.
Recommend a gadget
How to debug web-view?
- There is a debug option on the development tool by right clicking on the web- View page
- To debug on the real machine, you need to import vConsole