🔧 Как настроить Service Worker для офлайн-режима

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

Почему важно:

🎱 Доступ к сайту без интернета

🎱 Быстрая загрузка повторно посещаемых страниц

🎱 Гибкий контроль над кэшированием

Как внедрить:

1. Регистрируем Service Worker:

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

2. Создаем sw.js:

const CACHE_NAME = 'app-cache-v1';
const urlsToCache = ['/', '/index.html', '/styles.css'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

3. Обслуживаем запросы:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

4. Обновляем кэш при необходимости:

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key)))
    )
  );
});

💡 С помощью Service Worker можно создавать PWA, ускорять загрузку и обеспечить стабильную работу в нестабильных сетях.

🐸 Библиотека фронтендера

#буст

📢 Навигация по каналу

Чтобы вам было удобно ориентироваться в контенте, мы добавили навигацию по тегам. Используйте их, чтобы быстро находить нужные инструменты и туториалы:

#буст — база знаний: справочники, схемы, сравнение инструментов, полезные команды, обзоры докладов и подкастов, AI-промпты, гайды по настройке, исправлению ошибок и автоматизации

#свежак — релизы, конференции, новости, дайджест за неделю

#междусобойчик — истории подписчиков, собес-задачи, факапы, опросы, IT-игры, кроссворды, ребусы

#развлекалово — мемы

Оставайтесь с нами, чтобы получать максимум от фронтенда. А чтобы не пропустить самое интересное — включите уведомления.

🐸 Библиотека фронтендера

🥺 Какое самое странное название файла вы видели?

🐸 Библиотека фронтендера

#развлекалово

⭐️ Организация стилей с переменными и миксинами

Sass — это препроцессор CSS, который помогает сделать стили более организованными, масштабируемыми и поддерживаемыми.

Как применить его в проекте:

➡️ Переменные для хранения цветов, шрифтов и других значений, которые часто повторяются, чтобы упростить их изменение и обновление в дальнейшем.

➡️ Миксины для создания переиспользуемых блоков стилей, например, для оформления кнопок или отступов, что позволяет не повторять одинаковые правила.

➡️ Вложенность для логической организации стилей, отражающих структуру HTML, что улучшает читаемость и уменьшает количество кода.

➡️ Функции и математические операции для динамического изменения значений, например, при расчёте размеров элементов или создании адаптивных стилей.

💡 Зачем это нужно:

С помощью Sass стили становятся более гибкими, повторно используемыми и проще для изменений, что ускоряет процесс разработки и улучшает поддерживаемость кода в долгосрочной перспективе.

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово