Как сделать приложение офлайн
Вопрос
Как бы ты сделал, чтобы веб-приложение открывалось и работало без сети?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Service Worker кеширует оболочку приложения при install (precache)
Разные стратегии: cache first для статики с хешем в имени, network first или stale-while-revalidate для данных
Данные пользователя хранить в IndexedDB
Действия офлайн складывать в очередь и отправлять при появлении сети
Версионировать кеши и чистить старые в activate
Продумать обновление: уведомить пользователя о новой версии
Что могут спросить следом
- Что будет, если закешировать index.html стратегией cache first навсегда?
- Как разрешать конфликты, если офлайн-изменения расходятся с сервером?
- Чем Cache Storage отличается от HTTP-кеша?
Разбор
Основа офлайна это Service Worker. При установке он кладёт в Cache Storage оболочку приложения: HTML, JS и CSS бандлы, шрифты. Статику с хешем в имени отдаю по cache first, она не меняется. Для API беру network first с откатом на кеш или stale-while-revalidate, если важнее скорость. Данные пользователя храню в IndexedDB, потому что там объём и структура. Изменения, сделанные без сети, складываю в очередь и отправляю, когда вернётся связь, с учётом конфликтов. Кеши версионирую и удаляю старые в событии activate. И отдельно продумываю обновление: новая версия SW ждёт закрытия вкладок, поэтому показываю пользователю «доступна новая версия, обновить» и тогда вызываю skipWaiting.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
requestAnimationFrame против setInterval
Следующий вопрос
Web Worker и Service Worker: в чём разница