Комментарии 13
IMHO, Cache API - это вещь, которую нужно использовать только из Service Worker'а. Основной поток не должен заморачиваться такими вещами. Если ему надо что-то получить из сети - он обращается в сеть, а что он получит в ответ: оригинальные данные с сервера, кэшированные данные или даже подменённые данные - это всё решается на уровне Service Worker'а.
Но я согласен, что Cache API должен использоваться шире в современных веб-приложениях. Насчёт кэширования данных я бы поостерёгся, а вот код, а особенно медиа - вот это самое то кэшировать (y)
Согласен, здесь действительно лучше было бы повесить в sw обработчик на событие fetch и уже там решать - что кэшировать, а что нет. Просто хотелось скорее показать, что такое CacheAPI и продемонстрировать принцип его работы.
Код и медиа прекрасно кэшируются через старый добрый HTTP Cache. А с учётом того, что он работает немного быстрее (проверял на одном из своих сайтов) и даёт пользователю контроль над кэшем (его почистить можно через стандартные настройки браузера, а кэш сервис-воркера — только через девтулзы), использовать Cache API вообще непонятно зачем
Действительно, устоявшийся HTTP Cache кэширует сайты, однако есть ключевые различия:
1) Cache API, в отличие от HTTP Cache, действительно не очищается пользователем и дает ему меньшем контроля, но это также дает некоторое преимущество - мы точно уверены, что закэшированные ресурсы останутся на устройстве пользователя, а значит время жизни Cache Storage больше. Тут и плюс, и минус. В зависимости от наших задач.
2) Более высокая гибкость при нестабильных сетях или автономном режиме: работа HTTP Cache предлагает только два режиме - либо ресурс кэшируется, либо нет. С помощью же Cache Storage мы можем настраивать различные стартегии кэширования, более того, мы можем, в сочетании с SW достичь полностью автономной работы приложения.
Опять же, решение использовать Cache API - не панацея. Нужно понимать, нужен ли он точно на проекте или же проще обойтись обычным HTTP Cache.
использовать Cache API вообще непонятно зачем
как минимум, для работы веб-приложения в режиме offline.
С Local Storage понятно - устоявшийся стандарт хранилища на стороне клиента, но, как и всегда, есть нюансы - максимальный размер 5 Мб, а еще он синхронен и блокирует основной поток.
тут чутка ошибка - `local storage` вмещает 10mb, 5mb это `Session Storage`
Хм, странно, нашел информацию о 5 Мб тут и тут:
https://web.dev/articles/storage-for-the-web
https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria
Ваш пример в приватной вкладке Firefox превращается в тыкву. Firefox при попытке доступа к хранилищам в приватной вкладке выбрасывает исключение которое не ловится и не обрабатывается в вашем коде. В результате вместо сайта пустая страница.
Запустил пример локально, не через Codesandbox - все работает. Предполагаю, что есть какие-то политики, огранчивающие работу
А вы точно проверяли в приватной вкладке?
Ниже andreymal отписал по изменениям) Я смотрел в новом Firefox, видимо, в старых версиях действительно не работает
Хм, а вот всего пару дней назад новость про Firefox 122:
В режиме приватного просмотра включена поддержка Cache API
Cache API — кэшируем данные на стороне клиента