Можно ли кешировать битое изображение?

Question

Я ищу способ гарантировать, что браузер кэширует недействительные / неработающие «изображения», чтобы при повторной загрузке время загрузки было немедленным.

Ниже приведены два сценария ios Меня особенно интересует.

1) Во-первых, я пытаюсь загрузить изображение с URL-адреса, который содержит другой тип ресурса (например, в этом случае text/html). Статус запроса 200, но ресурс , а не изображение .

2) Во-вторых, я пытаюсь загрузить изображение, которого просто не существует. Состояние запроса: 404.

// takes ~500ms to load
const urlText = "https://goodreads.com"
const brokenTextImage = new Image();
brokenTextImage.src = urlText;

// takes ~500ms to load
const url404 = "https://broken.com/${gres.psm}.png"
const broken404Image = new Image();
broken404Image.src = url404; 

// looking to cache - should take ~0ms to load
const cachedTextImage = new Image();
cachedBrokenTextImage.src = urlText; 

// looking to cache - should take ~0ms to load
const cached404Image = new Image();
cached404Image.src = url404;

В обоих случаях я хотел бы сократить время загрузки до ~ 0 мс, как вы могли ожидать от механизма кэширования действительных URL-адресов изображений. Возможно ли это?

---

См. Изображение здесь для примера этого неудачного кэширования в действии. Вы можете увидеть выборки чисел для изображения 404, а также «изображение» goodreads и пример успешного изображения, полученного из «дискового кэша»

Время отклика изображения:

Answer 1

Современные браузеры поставляются с так называемым сервисным работником -> https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

С работающим сервисным работником вы можете зарегистрировать событие извлечения -> https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent

Благодаря этому вы получаете полный контроль над кэшированием ресурсов. Также обратите внимание, что событие fetch влияет на загрузку всех ресурсов, включая HTML / Ajax и, конечно, fetch.