Как создать автономные приложения с Service Worker и srcset?

Question

Я бы хотел, чтобы мое приложение (статический веб-сайт) запускалось автономно с помощью Service Worker. Я не вижу способа сделать это без кэширования всех изображений из атрибута srcset. Я могу видеть, как решение проблемы будет client hints, но, кроме того, есть решение, которое будет работать без привлечения сервера, делающего что-либо, кроме использования запрошенных файлов?

я могу видеть, возможно, как служба работник может рассчитывать на изображение, чтобы запросить дали информацию в img теге и именовании для изображений ...

Кто-нибудь решил эту проблему, или думал об этом вообще ?

Answer 1

Для полной функциональности srcset вам нужно было бы полностью кэшировать все разрешения.

Хотя плотность экрана может показаться фиксированным свойством устройства, он фактически является динамическим, например. смартфон может отображать/транслировать на экран телевизора. На рабочем столе с несколькими дисплеями (например, Retina MacBook с внешним дисплеем) разрешение экрана может измениться при перемещении окна браузера. Все эти изменения могут произойти в автономном режиме после того, как вы сделали кеширование, поэтому вы не можете точно знать, какие разрешения будут выбраны.

Простое решение - всегда использовать 2x изображения для всего. Более высокий DPI делает искажения изображения менее заметными, поэтому вы можете compress them more heavily компенсировать стоимость более высокого разрешения.

Еще одно решение - уловить ошибки загрузки изображений и заменить srcset URL-адресом изображения, который, как известно, кэшируется. BTW: вам может понадобиться добавить onerror="…" в разметку, так как ошибка может возникнуть, прежде чем какие-либо другие скрипты будут иметь возможность запускать на странице еще, или перед добавлением обработчиков ошибок программно проверьте все элементы изображения для img.complete && !img.naturalWidth, чтобы обнаружить события с пропущенной ошибкой.