JavaScript: Lightweight version check for web applications

Last modified Sep 14 2021 9:02 by Kees de Kooter

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)
        }
      })
    }, 1000 * 60 * 10)
  })
}

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