A: the phenomenon of

  1. The client loaded H5 page A, and then changed H5 to A’ after the release, the client has been displaying A for A long time without updating it to A’.
  2. There is no update after the restart, only clear the cache or reinstall the APP will be updated.

Two: analysis

According to the phenomenon, it is because of the webView cache that the page has not been updated. But why isn’t it updated? What is the updating mechanism? How should it be modified?

Let’s start with the client caching mechanism. CacheMode comes in five different flavors

    CacheMode {
            // If the page does not enforce any particular behavior (depending on server control), the local cache will be loaded directly if there is an unexpired local cache, otherwise the network will be requested
            LOAD_DEFAULT = -1
            // Deprecated from API 11, consistent with LOAD_DEFAULT behavior
            LOAD_NORMAL = 0
            // As long as there is a local cache, use the local cache regardless of whether it has expired. Otherwise, request the network
            LOAD_CACHE_ELSE_NETWORK = 1
            // Ignore the local cache (or even if there is one) and request the network directly
            LOAD_NO_CACHE = 2
            // Only use local cache, no network request
            LOAD_CACHE_ONLY = 3
    }
Copy the code

Focusing on the LOAD_DEFAULT mode, this is a caching policy that depends on the server configuration

HTTP caching mechanism

HTTP caching is a mechanism that controls file caching through cache-Control (or Expires) and Last-Modified (or Etag) fields in the HTTP header.

Expires is an HTTP1.0 field, and cache-control is an HTTP1.1 field that controls the expiration of a Cache. When these two fields are present together, cache-control is highly optimized.

Discussion on cache-control in HTTP

Three: solutions

Client: CacheMode uses LOAD_DEFAULT and depends on the server to control the cache policy. To solve the problem that the online version cache is too long, you can add an invalid parameter, such as #, after the requested URL to trick the browser into changing the URL, forcing the browser to update the server once.

Server: Changed nodeJS Express to set cache-control when setting static resources. For details, see Setting maxAge of Cache Cache-control in Express

Server configuration: It is also possible to configure cache-control for the Nginx server.

The cache policy depends on specific services. If the page does not require real-time updates, use max-age=XX to control the cache within XX seconds. Otherwise, request the network.

Four: test process

Use max-age=60 to verify page updates

  1. Before clearing the cache, the server adds the max-age attribute first
  2. The client enters the page cache once.
  3. H5 Modify resource publication
  4. The client opens the page within 60 seconds without any updates. After 60 seconds, the client opens the page again and the page is updated normally.

Five: Matters needing attention

  1. If the server does not add any Cache Control parameter (cache-control), the client caches the H5 page. If the server Cache policy is changed, the client will not request the resource again until the Cache expires. You must wait until the client cache expires or the cache is cleared.
  2. HTML header add
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
Copy the code

It didn’t work. It was ignored

  1. If no caching policy is configured on the server, the Android cache expires for a long time, that is, it will not be updated for a long time. However, iOS will update every time it enters the page. Because the kernel of iOS and Android is different, iOS is Safari and Android is Chromium, the processing method may be different.
  2. If the server does not add any parameters to control the cache, open the H5 browser on PC. After the H5 modification, Google Chrome does not update immediately, so you must use the forced refresh (Shift+F5), but Firefox F5 can refresh normally. Google Chrome and the Android built-in browser are both Chromium kernel and perform basically the same.
  3. Open the web page, press F12, select Network, then refresh the web page, select the first.html page, select Cache-Control from the right Headers, indicating that the server configuration is effective.

Reference:

H5 and mobile WebView cache mechanism analysis and actual combat