PWA: оффлайн-режим

Прогрессивные веб-приложения — это сайты, которые ведут себя как приложения: работают без интернета, с иконкой на рабочем столе и ярлыком в меню. Всё на веб-технологиях, без магазинов приложений.

Три кита PWA

• HTTPS — безопасное соединение (сервис-воркер без него не живёт);
• Manifest — описание: название, иконки, тема, фон;
• Service Worker — скрипт-посредник, который кэширует ресурсы и отвечает оффлайн.

Манифест

// public/manifest.webmanifest
{
  "name": "Мой сайт",
  "short_name": "Сайт",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b1220",
  "theme_color": "#0b1220",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.webmanifest">

Service Worker: кэш и оффлайн

SW — отдельный скрипт, живущий между браузером и сетью. Жизненный цикл: зарегистрировать → предзагрузить кэш → на запрос отдавать кэш, если сеть недоступна.

// public/sw.js
const CACHE = "v1";

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE).then((c) =>
      c.addAll(["/", "/index.html", "/css/style.css"])
    )
  );
});

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

// регистрация в скрипте сайта
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Что после этого

Сайт можно «установить» — браузер сам предложит «Добавить на главный экран». Плюс push-уведомления (через Notification API) делают веб-приложение ещё ближе к нативному.