Встречается на собеседованиях • сегодня
Как реализовать Offline режим в Frontend приложении
Для реализации Offline режима можно использовать Service Worker и кэширование ресурсов через Cache API. Пример регистрации Service Worker:
javascript
// main.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('SW registered'))
.catch(err => console.log('SW registration failed'));
}В файле sw.js:
javascript
const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
'/',
'/styles.css',
'/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});Дополнительно можно использовать:
- IndexedDB для хранения данных
- Показывать уведомление о переходе в offline-режим
- Синхронизировать данные при восстановлении соединения
Для React-приложений удобно использовать библиотеки типа workbox-webpack-plugin или upup.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы