🔧 Как настроить 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-игры, кроссворды, ребусы

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

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

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

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

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

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

🌐 Как сделать фичу одинаково работающей в любом браузере

Разные движки (Blink, Gecko, WebKit) могут интерпретировать один и тот же CSS‑код по-разному. Этот подход помогает не искать проблему вручную, а получить готовые решения — префиксы, полифиллы и обходные пути в одном запросе.

Промпт:

How can I make [specific feature] work across different browsers?
Please include vendor prefixes, fallbacks, feature queries (e.g. @supports) and polyfills with code examples.

Что даёт промпт:

➡️ Чёткий список необходимых вендорных префиксов (например, -webkit-, -moz-, -ms-) для устаревшего CSS 

➡️ Советы по использованию @supports для проверки поддержки функций в рантайме 

➡️ Рекомендации по подключению полифиллов и проверке их работы на разных браузерах 

Дополнительно можно попросить:

— Чек‑лист браузеров и версий, где фича может ломаться

— Примеры fallback‑обходов, если поддержка отсутствует

— Код для автоматической вставки префиксов через Autoprefixer 

🔗 Источник

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

#буст

🧩 Как я работал с микрофронтендами

Пользователь Reddit рассказал о своём опыте работы с микрофронтендами, используя такие технологии, как Module Federation и Single-SPA. Вот его рассказ:

«Я работал в команде, которая занималась разработкой и поддержкой внутреннего оркестратора микрофронтендов. Мы использовали Module Federation и Single-SPA для интеграции различных приложений, разработанных с использованием React и React Router. Основной проблемой было управление общими зависимостями и обеспечение совместимости между различными микрофронтендами. Мы разработали собственный инструмент для локальной разработки, который использовал http-proxy-middleware для проксирования запросов, что позволило нам тестировать микрофронтенды в изоляции. Однако самым большим вызовом было управление состоянием и данными между микрофронтендами. Мы пришли к выводу, что лучше всего передавать только минимально необходимую информацию, такую как токен авторизации, и позволить каждому микрофронтенду загружать свои данные самостоятельно.»

Как вы решаете вопросы совместимости и управления состоянием в проектах с микрофронтендами?

Поделитесь своим опытом в комментариях ✏️

🔗 Источник

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

#междусобойчик

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

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

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

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

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

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

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

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

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

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

#буст

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

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