How to check if a resource is cached by the browser from Javascript?

Question

Is there a way to check if a resource is cached by the browser without downloading the resource? Most of the questions and answers are old and I believe things have changed now and there are better ways.

Answer 1

You can leverage the fetch API and it's correspondent AbortController to achieve this functionality with a margin of error (expected false negatives).

It goes like this, fetch the required resource with a signal attached. Abort in a small amount of time eg. 4ms. If the fetch is returned in the short amount of time it's absolutely cached. If the fetch was aborted, it's probably not cached. Here's some code:

      async checkImageCached(url, waitTimeMs = 4) {
        const ac = new AbortController()
        const cachePromise = fetch(url, {signal: ac.signal})
          .then(() => true)
          .catch(() => false)
        setTimeout(() => ac.abort(), waitTimeMs)
        return cachePromise
      }