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

偶尔善良 提交于 2020-07-10 06:53:10

问题


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.


回答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
      }



回答2:


Currently only works on Firefox, unfortunately, but another option is to use only-if-cached, though it only works for requests on the same origin (because it requires mode: 'same-origin' as well):

fetch(urlOnSameOrigin, { mode: 'same-origin', cache: 'only-if-cached'})
  .then((response) => {
    if (response.ok) {
      console.log('Cached');
    } else if (response.status === 504) {
      console.log('Not cached');
    }
  })
  .catch(() => {
    console.log('Network error');
  });

only-if-cached — The browser looks for a matching request in its HTTP cache.

  • If there is a match, fresh or stale, it will be returned from the cache.

  • If there is no match, the browser will respond with a 504 Gateway timeout status.



来源:https://stackoverflow.com/questions/59787487/how-to-check-if-a-resource-is-cached-by-the-browser-from-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!