Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔧 Как настроить 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, ускорять загрузку и обеспечить стабильную работу в нестабильных сетях.

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

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tgoop.com/frontendproglib/6244

1.6K viewsJun 11 at 07:04

🔧 Как настроить 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));
}

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))
  );
});

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

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