Lightweight version check for web applications

Look mama, no build steps!
author's avatar
Kees de Kooter
Sep 14 2021 9:02 • 1 min read

This code relies on a webserver generating etags that change if index.html changes and. The file should expire immediately so the browser does not cache it and this code retrieves the correct etag.

The application stores the original etag in localStorage on startup and subsequently starts polling that etag and comparing it with the stored version.

function verifyAppVersion() {
  fetch('/', {method: 'HEAD'}).then((response) => {
    window.localStorage.setItem('version-tag', response.headers['etag'])

    const timerId = setInterval(() => {
      fetch('/', {method: 'HEAD'}).then((response) => {
        if (
          response.headers['etag'] !==
          window.localStorage.getItem('version-tag')
        ) {
          // TODO: trigger event the application can respond to
          clearInterval(timerId)
        }
      })
    }, 120000)
  })
}

Alternatively this code could run in a webworker. The etag could also be stored in a global variable.