Встречается на собеседованиях • сегодня

Как реализовать 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))
  );
});

Дополнительно можно использовать:

  1. IndexedDB для хранения данных
  2. Показывать уведомление о переходе в offline-режим
  3. Синхронизировать данные при восстановлении соединения

Для React-приложений удобно использовать библиотеки типа workbox-webpack-plugin или upup.

Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы