Как проверить, кэшируется ли ресурс браузером из Javascript?

Question

Есть ли способ проверить, кэшируется ли ресурс браузером, не загружая ресурс? Большинство вопросов и ответов старые, и я верю, что сейчас все изменилось и есть лучшие способы.

Answer 1

Вы можете использовать API fetch и его корреспондент AbortController для достижения этой функциональности с пределом погрешности (ожидаемые ложные отрицания).

Это выглядит так: fetch требуемый ресурс с прикрепленным сигналом. Прервать за небольшое количество времени, например. 4ms. Если выборка возвращается за короткое время, она абсолютно кэшируется. Если выборка была прервана, она, вероятно, не кэширована. Вот некоторый код:

      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
      }

Answer 2

В настоящее время работает, к сожалению, только на Firefox, но другой вариант - использовать only-if-cached , хотя он работает только для запросов с тем же источником (потому что для него также требуется mode: 'same-origin'). ):

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 - браузер ищет соответствующий запрос в своем HTTP-кэше.

• Если есть совпадение, fre sh или устарел, он будет возвращен из кэша.

• Если совпадений не найдено, браузер ответит со статусом тайм-аута 504 шлюза.