This is the 7th day of my participation in the August More Text Challenge

The phenomenon of

Users access our H5 page through the menu of the official account. When the content of H5 is updated, the content they see is still the original content, that is, our original H5 page is cached by wechat.

But when we copy the link to the browser for access, we can get the latest content, that is to say, this caching phenomenon only exists in the wechat client.

Version number solution

When it comes to browser caches, we think of caches for static resources such as CSS, JS, image, etc. When updating these cached contents, we generally increase the version number, that is, change the access URL path. As shown in the following table:

The old version The new version
xxx.js? Version = 1.0 xxx.js? Version = 1.1

So can we do this in wechat? The answer is yes, we can clear the cache by changing the access path of the public account menu. However, there is a delay for the public account menu to cover all users, so there will still be some users to access the old content.

Version number improved solution

Since the public number of menu coverage is delayed, that we can not change the menu path in the case, and let the user access to the latest content? The answer is to add the intermediate redirect (server redirect). The sequence diagram is as follows:

The ultimate solution

Further deeper thinking, the same path why ordinary browser can get new content, and wechat client browser really get cached content? What’s the difference between the two? What are the standards that browsers use to cache content?

Searching with this question in mind, we can see that when a server does not explicitly tell the browser not to cache (no-cache, no-store, Expires, Max-age, etc.), but simply tells the browser something marked (ETag, Modified) to allow the browser to cache, Each time the browser accesses the cache, it needs to send a request to the server to ask if the content has changed. If so, it will get the new content. If not, it will return 304 and the cache can be used. The sequence diagram is as follows:

But our wechat does not send a request, but willfully use expired cache content.

So how do we solve this? The reason for this is that the server does not explicitly tell the browser not to cache content, so we can change the configuration to explicitly tell the browser not to cache content, so that users can access the latest content every time.

Apache HttpdConfiguration of (verified)
ExpiresDefault M5 </IfModule> <IfModule mod_expires. C >Copy the code
nginxConfiguration of (not verified)
location ~ \.(html|htm)$ {
  root /data/web/kevin;
  add_header Cache-Control no-cache;
}
Copy the code