Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: optimizations

Для чего нужен Service Worker?

Вопрос проверяет понимание роли Service Worker в веб-разработке

Короткий ответ

Service Worker — это скрипт, работающий в фоне, отдельно от веб-страницы. Он позволяет:

  • Кешировать ресурсы для оффлайн-работы.

  • Перехватывать сетевые запросы (например, для PWA).

  • Отправлять push-уведомления.

Длинный ответ

Основные возможности:

  1. Оффлайн-доступ
    Service Worker может сохранять файлы в кеш и отдавать их, когда нет интернета.

  2. Управление запросами
    Можно перехватывать fetch-запросы и решать, брать данные из сети или из кеша.

  3. Фоновые процессы
    Работает даже когда сайт закрыт (например, для push-уведомлений).

Пример регистрации Service Worker:

// Основной код (main.js)
if ('serviceWorker' in navigator) {
  	navigator.serviceWorker.register('/sw.js')
    		.then(() => console.log('SW зарегистрирован'))
    		.catch(err => console.log('Ошибка:', err));
}

Пример кеширования в sw.js:

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = ['/', '/styles.css', '/script.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))
  	);
});

Уровень

  • Рейтинг:

    5

  • Сложность:

    8

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#optimizations

Подпишись на React Developer в телеграм