Cache behavior in WebGL

In Unity WebGLA JavaScript API that renders 2D and 3D graphics in a web browser. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info
See in Glossary, the Cache APIA Javascript API to store network request and response pairs in the browser cache. More info
See in Glossary lets you store the asset data cached in .data files and AssetBundles within the browser cache. Storage limits for the browser cache such as maximum file size, maximum overall cache size, and eviction criteria are dependent on the browser and platform that you’re using. For more information, see Browser storage limits and eviction criteria.

Customize the WebGL Cache behavior

By default, the WebGL Cache stores the asset data file .data and AssetBundle files .bundle, and revalidates them before loading them from the cache. You can change this behavior by adding a new WebGL Template that changes the UnityLoader configuration.

The following example shows adding a custom cacheControl function to the UnityLoader configuration within the index.html file.

var config = {
   // ...
#if USE_DATA_CACHING
   cacheControl: function (url) {
     // Caching enabled for .data and .bundle files.
     // Revalidate if file is up to date before loading from cache
     if (url.match(/\.data/) || url.match(/\.bundle/)) {
         return "must-revalidate";
     }

     // Caching enabled for .mp4 and .custom files
     // Load file from cache without revalidation.
     if (url.match(/\.mp4/) || url.match(/\.custom/)) {
         return "immutable";
     }
 
     // Disable explicit caching for all other files.
     // Note: the default browser cache may cache them anyway.
     return "no-store";
   },
#endif
   // ...
}

The cacheControl function takes the url of a request as a parameter and returns one of the following:

• must-revalidate - If the function returns must-revalidate, the cache returns to an enabled state and the file is revalidated before being loaded from the cache.

• immutable - If the function returns immutableYou cannot change the contents of an immutable (read-only) package. This is the opposite of mutable. Most packages are immutable, including packages downloaded from the package registry or by Git URL.
  See in Glossary, the cache is enabled and the file is loaded from the cache without revalidation.

• no-store - If the function returns no-store, the cache is disabled.

The browser automatically stores (caches) certain file types such as .html, .js, .css, .json, .jpg, .png, so they don’t need to be explicitly stored in the WebGL Cache. Typical candidates for the WebGL cache include large files and files that use a custom file format.