Оффлайн-режим для сайта: технология PWA и сервис-воркеры

// app.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker зарегистрирован:', registration.scope);
})
.catch(error => {
console.error('Ошибка при регистрации Service Worker:', error);
});
});
}

// sw.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];

// Событие install запускается при установке Service Worker
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Кэш открыт');
return cache.addAll(urlsToCache);
})
);
});

// Событие activate запускается после установки, когда старые версии SW удалены
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];

event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName); // Удаляем устаревшие кэши
}
})
);
})
);
});

// Событие fetch перехватывает все запросы от страницы
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Возвращаем кэшированный ответ, если он существует
if (response) {
return response;
}

// Иначе делаем обычный сетевой запрос
return fetch(event.request).then(response => {
// Проверяем валидность ответа
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}

// Клонируем ответ, т.к. тело ответа может быть использовано только один раз
const responseToCache = response.clone();

caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});

return response;
});
})
.catch(() => {
// Если произошла ошибка, можно вернуть заглушку
// return caches.match('/offline.html');
})
);
});

self.addEventListener('fetch', event => {
if (event.request.url.includes('/api/')) {
// Применяем Stale While Revalidate для API-запросов
event.respondWith(
caches.open(CACHE_NAME).then(cache => {
return cache.match(event.request).then(cachedResponse => {
const fetchedResponse = fetch(event.request).then(networkResponse => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});

// Возвращаем кэшированный ответ или ждем сетевой
return cachedResponse || fetchedResponse;
});
})
);
} else {
// Для остальных запросов используем Cache First
event.respondWith(
caches.match(event.request).then(cachedResponse => {
return cachedResponse || fetch(event.request);
})
);
}
});

const CACHE_NAME = 'my-site-cache-v1.2.3';
// или
const CACHE_NAME = `my-site-cache-${new Date().toISOString()}`;

// Кэширование одиночного ресурса
function cacheResource(cacheName, url) {
return caches.open(cacheName)
.then(cache => {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`Failed to cache: ${url}`);
}
return cache.put(url, response);
});
});
}

// Проверка и получение ресурса из кэша
function getFromCache(cacheName, url) {
return caches.open(cacheName)
.then(cache => cache.match(url));
}

// Обновление кэша с ограничением по времени
async function updateCacheIfOlderThan(cacheName, url, maxAgeMinutes) {
const cache = await caches.open(cacheName);
const cachedResponse = await cache.match(url);

if (!cachedResponse) {
// Ресурс не найден в кэше, загружаем
return cacheResource(cacheName, url);
}

// Проверяем время кэширования
const cachedTime = new Date(cachedResponse.headers.get('date'));
const now = new Date();
const diffMinutes = (now – cachedTime) / (1000 * 60);

if (diffMinutes > maxAgeMinutes) {
// Кэш устарел, обновляем
return cacheResource(cacheName, url);
}

// Кэш свежий, ничего не делаем
return Promise.resolve();
}

// Очистка устаревших кэшей
async function cleanupCaches(currentCacheName, prefix) {
const cacheNames = await caches.keys();

return Promise.all(
cacheNames
.filter(name => name.startsWith(prefix) && name !== currentCacheName)
.map(name => caches.delete(name))
);
}

// Ограничение размера кэша
async function limitCacheSize(cacheName, maxItems) {
const cache = await caches.open(cacheName);
const keys = await cache.keys();

if (keys.length > maxItems) {
// Удаляем старые записи (FIFO)
const keysToDelete = keys.slice(0, keys.length – maxItems);
await Promise.all(keysToDelete.map(key => cache.delete(key)));
}
}

// Запрос с таймаутом и фоллбеком на кэш
async function timeoutFetchWithCacheFallback(request, cacheName, timeout = 3000) {
// Создаем промис с таймаутом
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('Request timeout')), timeout);
});

try {
// Пробуем получить свежие данные с ограничением по времени
const response = await Promise.race([
fetch(request.clone()),
timeoutPromise
]);

// Обновляем кэш свежими данными
const cache = await caches.open(cacheName);
cache.put(request, response.clone());

return response;
} catch (error) {
console.log('Falling back to cache due to:', error);

// При ошибке или таймауте используем кэш
const cachedResponse = await caches.match(request);

if (cachedResponse) {
return cachedResponse;
}

// Если в кэше ничего нет, возвращаем ошибку или заглушку
return new Response(
JSON.stringify({ error: 'Network error, no cached data available' }), 
{ headers: { 'Content-Type': 'application/json' } }
);
}
}

// В файле app.js
function updateNetworkStatus() {
const statusElement = document.getElementById('network-status');

if (navigator.onLine) {
statusElement.textContent = '🟢 Online';
statusElement.classList.remove('offline');
statusElement.classList.add('online');
} else {
statusElement.textContent = '🔴 Offline';
statusElement.classList.remove('online');
statusElement.classList.add('offline');
}
}

window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);
document.addEventListener('DOMContentLoaded', updateNetworkStatus);

// Сохранение данных
function saveToLocalStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
return true;
} catch (error) {
console.error('Error saving to localStorage:', error);
return false;
}
}

// Получение данных
function getFromLocalStorage(key, defaultValue = null) {
try {
const data = localStorage.getItem(key);
return data ? JSON.parse(data) : defaultValue;
} catch (error) {
console.error('Error reading from localStorage:', error);
return defaultValue;
}
}

// Пример использования для сохранения пользовательских предпочтений
function saveUserPreferences(preferences) {
return saveToLocalStorage('user_preferences', preferences);
}

function getUserPreferences() {
return getFromLocalStorage('user_preferences', {
theme: 'light',
fontSize: 'medium',
notifications: true
});
}

// Простая обёртка для работы с IndexedDB
class IDBStorage {
constructor(dbName, version) {
this.dbName = dbName;
this.version = version;
this.db = null;
}

// Открытие соединения с базой данных
open(storeConfigs) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, this.version);

request.onerror = event => {
reject(`IndexedDB error: ${event.target.error}`);
};

request.onsuccess = event => {
this.db = event.target.result;
resolve(this.db);
};

// Создание или обновление структуры базы данных
request.onupgradeneeded = event => {
const db = event.target.result;

storeConfigs.forEach(config => {
if (!db.objectStoreNames.contains(config.name)) {
const store = db.createObjectStore(config.name, config.options);

// Создание индексов, если указаны
if (config.indexes) {
config.indexes.forEach(idx => {
store.createIndex(idx.name, idx.keyPath, idx.options);
});
}
}
});
};
});
}

// Добавление или обновление записи
put(storeName, data, key = null) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(storeName, 'readwrite');
const store = transaction.objectStore(storeName);

const request = key !== null ? store.put(data, key) : store.put(data);

request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}

// Получение записи по ключу
get(storeName, key) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(storeName, 'readonly');
const store = transaction.objectStore(storeName);
const request = store.get(key);

request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}

// Удаление записи
delete(storeName, key) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(storeName, 'readwrite');
const store = transaction.objectStore(storeName);
const request = store.delete(key);

request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}

// Получение всех записей
getAll(storeName) {
return new Promise((resolve, reject) => {
const transaction = this.db.transaction(storeName, 'readonly');
const store = transaction.objectStore(storeName);
const request = store.getAll();

request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
}

// Пример использования
async function initDatabase() {
const db = new IDBStorage('myAppDB', 1);

await db.open([
{
name: 'articles',
options: { keyPath: 'id' },
indexes: [
{ name: 'by_date', keyPath: 'publishDate', options: { unique: false } },
{ name: 'by_category', keyPath: 'category', options: { unique: false } }
]
},
{
name: 'user_data',
options: { autoIncrement: true }
}
]);

return db;
}

// Сохранение статьи в IndexedDB
async function saveArticle(article) {
const db = await initDatabase();
return db.put('articles', article);
}

// Получение статей по категории
async function getArticlesByCategory(category) {
const db = await initDatabase();
const transaction = db.db.transaction('articles', 'readonly');
const store = transaction.objectStore('articles');
const index = store.index('by_category');

return new Promise((resolve, reject) => {
const request = index.getAll(category);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}

// Добавление операции в очередь синхронизации
async function addToSyncQueue(operation) {
const db = await initDatabase();

// Добавляем временную метку для сортировки
operation.timestamp = new Date().toISOString();
operation.status = 'pending';

return db.put('sync_queue', operation);
}

// Обработка очереди при восстановлении соединения
async function processSyncQueue() {
const db = await initDatabase();
const pendingOperations = await db.getAll('sync_queue');

// Сортируем по времени создания
const sortedOperations = pendingOperations
.filter(op => op.status === 'pending')
.sort((a, b) => new Date(a.timestamp) – new Date(b.timestamp));

for (const operation of sortedOperations) {
try {
// Выполняем операцию
await performOperation(operation);

// Отмечаем как успешно выполненную
operation.status = 'completed';
operation.completedAt = new Date().toISOString();
await db.put('sync_queue', operation);
} catch (error) {
// Отмечаем ошибку и добавляем счётчик попыток
operation.status = 'failed';
operation.error = error.message;
operation.retries = (operation.retries || 0) + 1;

if (operation.retries < 3) {
// Вернём в статус ожидания для повторной попытки
operation.status = 'pending';
}

await db.put('sync_queue', operation);
}
}
}

// Регистрируем обработчик на восстановление соединения
window.addEventListener('online', processSyncQueue);

// Также можно использовать Background Sync API для более надёжной синхронизации
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready.then(registration => {
document.getElementById('save-button').addEventListener('click', async () => {
const data = collectFormData();

if (navigator.onLine) {
// Если онлайн – отправляем сразу
await sendData(data);
} else {
// Если оффлайн – сохраняем и регистрируем sync
await addToSyncQueue({
type: 'form_submission',
data: data
});

registration.sync.register('sync-forms');
}
});
});
}

// В Service Worker обрабатываем sync событие
self.addEventListener('sync', event => {
if (event.tag === 'sync-forms') {
event.waitUntil(processSyncQueue());
}
});

// Функция для проверки регистрации Service Worker
async function checkServiceWorkerRegistration() {
if (!('serviceWorker' in navigator)) {
console.error('Service Workers не поддерживаются в этом браузере');
return false;
}

try {
const registration = await navigator.serviceWorker.getRegistration();

if (!registration) {
console.error('Service Worker не зарегистрирован');
return false;
}

console.log('Service Worker зарегистрирован со статусом:', registration.active ? 'active' : 'pending');
return true;
} catch (error) {
console.error('Ошибка при проверке Service Worker:', error);
return false;
}
}

// Функция для проверки кэша
async function checkCache(cacheName, urls) {
try {
const cache = await caches.open(cacheName);
const results = await Promise.all(
urls.map(async url => {
const response = await cache.match(url);
return {
url,
cached: !!response,
status: response ? response.status : null,
headers: response ? Object.fromEntries(response.headers.entries()) : null
};
})
);

console.table(results);

const missingUrls = results.filter(r => !r.cached).map(r => r.url);
if (missingUrls.length > 0) {
console.warn('URLs не найдены в кэше:', missingUrls);
}

return results;
} catch (error) {
console.error('Ошибка при проверке кэша:', error);
throw error;
}
}

// Функция для симуляции оффлайн-режима
function simulateOffline() {
if (!('serviceWorker' in navigator)) return false;

const offlineCheckbox = document.getElementById('offline-simulation');

if (offlineCheckbox.checked) {
// Включить оффлайн-режим
const originalFetch = window.fetch;
window.fetch = async (...args) => {
throw new Error('Network request failed (simulated offline)');
};
window._originalFetch = originalFetch;
console.log('🔴 Оффлайн-режим активирован (симуляция)');
} else {
// Выключить оффлайн-режим
if (window._originalFetch) {
window.fetch = window._originalFetch;
delete window._originalFetch;
console.log('🟢 Оффлайн-режим деактивирован');
}
}
}

// Установка Workbox через npm: npm install workbox-cli --save-dev
// В файле sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');

// Предварительное кэширование критических ресурсов
workbox.precaching.precacheAndRoute([
{ url: '/', revision: '1' },
{ url: '/index.html', revision: '1' },
{ url: '/css/style.css', revision: '1' },
{ url: '/js/app.js', revision: '1' },
{ url: '/images/logo.png', revision: '1' },
]);

// Кэширование изображений с ограничением кэша
workbox.routing.registerRoute(
({ request }) => request.destination === 'image',
new workbox.strategies.CacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
}),
],
})
);

// Стратегия StaleWhileRevalidate для API
workbox.routing.registerRoute(
({ url }) => url.pathname.startsWith('/api/'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'api-cache',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 100,
maxAgeSeconds: 24 * 60 * 60, // 1 день
}),
],
})
);

// Кэширование шрифтов с долгим сроком жизни
workbox.routing.registerRoute(
({ request }) => request.destination === 'font',
new workbox.strategies.CacheFirst({
cacheName: 'fonts',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 год
}),
],
})
);

// Оффлайн-страница
const offlineFallbackPage = '/offline.html';
workbox.routing.setCatchHandler(async ({ event }) => {
if (event.request.destination === 'document') {
return caches.match(offlineFallbackPage);
}
return Response.error();
});

// Фоновая синхронизация
workbox.backgroundSync.registerPlugin(
new workbox.backgroundSync.BackgroundSyncPlugin('form-submissions', {
maxRetentionTime: 24 * 60, // 24 часа (в минутах)
})
);

// Отправка метрики производительности
function sendPerformanceMetrics() {
// Собираем метрики
const metrics = {
timeToFirstByte: performance.getEntriesByType('navigation')[0].responseStart,
domContentLoaded: performance.getEntriesByType('navigation')[0].domContentLoadedEventEnd,
loadComplete: performance.getEntriesByType('navigation')[0].loadEventEnd,
resourceCount: performance.getEntriesByType('resource').length,
cacheHits: window._cacheHits || 0,
cacheMisses: window._cacheMisses || 0,
offlineMode: !navigator.onLine,
// Дополнительные метрики
};

// Если онлайн, отправляем на сервер аналитики
if (navigator.onLine) {
fetch('/api/metrics', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(metrics)
}).catch(console.error);
} else {
// Иначе сохраняем для последующей отправки
addToSyncQueue({
type: 'metrics',
data: metrics
});
}
}

// Запускаем сбор метрик после загрузки страницы
window.addEventListener('load', () => {
// Отложенный запуск, чтобы не мешать основной загрузке
setTimeout(sendPerformanceMetrics, 3000);
});