Caching code in web applications

This article is a summary of personal experience with working with browser-side cache when creating web applications. In my daily development, I use desktop Chrome. It has a toolbar and is basically developer friendly. But when you need to check the application on smartphones, hemorrhoids begin – how to deliver a new code to a smartphone if the old one is already there? What irritates me the most is Safari on iPhone. If in Chrome it is possible to delete all data for a single site, then in iPhone all data is deleted for the entire Safari. If there is any way on the iPhone to delete data for an individual site through the smartphone/app configuration, I have never been able to find it. I would be grateful if someone tells me about it in the comments.

What to cache in web applications?

What is a web page? This is first and foremost data. HTML is a markup language data. What is a web application? This code, which processes data and generates web pages in the browser itself. In a web application, data caching follows the same rules as web page caching – it depends on business logic. We can cache some things in the browser for a longer time, but others need to be requested from the server every time. With code caching, everything is simple – the web application code must be saved in the browser until the version of this web application changes on the server (or rather, the version of the front part of the web application does not change).

ETag/If-None-Match

To track whether the file version in the browser matches the file version on the server are used HTTP headers Etag And If-None-Match. Along with the contents of the resource (pages, images, videos, etc.), the server transmits to the browser in the header ETag a certain label corresponding to the contents of the resource (version or hash calculated from the contents of the resource):

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Date: Tue, 22 Feb 2022 22:22:22 GMT
ETag: "33a64df5"
Cache-Control: max-age=3600

<!doctype html>
…

This label is sent by the browser to the server in the request to the resource in the header If-None-Match:

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
If-None-Match: "33a64df5"

If the resource on the server has not changed, then the server simply returns 304 Not Modified and the browser uses the cached copy of the resource it has. If we have all the application code in one or more bundles, then this is quite a working method. If, of course, you come to terms with the fact that for a while max-age=3600 the browser will not request changes from the server, even if they are there. For ordinary users of a web application, this scheme may be considered working, but for a developer this is clearly not suitable. For the developer Cache-Control must stand max-age=0 (or no-cache).

Service Worker and Cache Storage

What if there are a lot of files in a web application? Not one or two large bundles and a dozen images, but several hundred files with application code and accompanying media? In this case, they come to the rescue Service Worker And Cache Storage – the first allows you to intercept browser requests for an external resource, and the second allows you to save the resource in the browser.

If you download all the source code into Cache Storagethen all the logic for processing calls to resources will fall on the shoulders of Service Worker'A. And there it no longer matters that the server prohibits caching of resources through response headers – Service Worker can still take answers from Cache Storage and return it back without accessing the Internet. This is exactly how support for web applications in offline mode is organized.

Demo

For my cache experiments I did demo application (Here source):

Type of requests in the tab "Network" — Type of requests in the “Network” tab

no_cache/: server returns current time and HTTP header Cache-Control: no-store, no-cache, must-revalidate, private.
cached/: server returns current time and HTTP header Cache-Control: public, max-age=60.
sw/: Similar to Cached mode, but data is retained Service Worker'om in Cache Storagewhich is cleared by the “ buttonClear Cache” on the resulting page.

You can use this demo to see how different browsers on different devices work with the cache – as can be seen from the timestamp coming from the server.

Code caching strategy

Thus, at the moment I have come to the following scheme for working with code in a web application:

All server resources related to code are transferred with headers that explicitly disable caching.
Service Worker independently caches all responses in Cache Storage.
During development, we use the desktop version of the browser, which has the ability to request Service Worker'and go to the Network every time for a new version of the resource (DevTools / Application / Service workers / Bypass for networks).
To check the operation of the application on smartphones, the application independently implements the option of forced cleaning by the developer Cache Storage via UI.
For ordinary users, “application installation” – when the application is launched on the front, the current version of the installed application and the current version on the server are checked. If the versions do not match, then all source files of the new version are downloaded from the server as a single file, unpacked and saved in Cache Storage.