Установка PWA на устройства

Progressive Web App — это веб-приложение, которое может устанавливаться на устройство и вести себя как нативное: работать офлайн, запускаться с иконки, использовать кэш и push-уведомления. Preact хорошо подходит для PWA благодаря малому размеру и совместимости с экосистемой React.

Для установки PWA на устройства требуется корректная конфигурация трёх ключевых элементов:

  • Web App Manifest
  • Service Worker
  • HTTPS и корректная структура сборки

Web App Manifest

Манифест описывает, как приложение выглядит и ведёт себя при установке.

Пример manifest.json:

{
  "name": "Preact PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#673ab7",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Ключевые поля:

  • start_url — путь, с которого запускается установленное приложение
  • display: standalone — скрывает адресную строку браузера
  • icons — обязательны для установки на Android и iOS

Подключение манифеста выполняется в HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#673ab7">

Service Worker

Service Worker отвечает за офлайн-режим, кэширование и установку PWA. Без него установка невозможна.

Регистрация в Preact-приложении:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

Простейший sw.js:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('preact-cache').then(cache =>
      cache.addAll([
        '/',
        '/index.html',
        '/bundle.js'
      ])
    )
  );
});

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

Основные события:

  • install — начальное кэширование
  • fetch — перехват сетевых запросов
  • activate — очистка старых кэшей

Использование Workbox

Для сложных сценариев рекомендуется Workbox — официальный инструмент Google.

Установка:

npm install workbox-webpack-plugin --save-dev

Интеграция в Webpack:

const { GenerateSW } = require('workbox-webpack-plugin');

plugins: [
  new GenerateSW({
    clientsClaim: true,
    skipWaiting: true
  })
]

Workbox автоматически:

  • генерирует service worker
  • управляет стратегиями кэширования
  • минимизирует ошибки ручной настройки

Установка PWA на Android

Android поддерживает установку PWA напрямую из браузера Chrome.

Условия появления предложения установки:

  • HTTPS
  • зарегистрированный Service Worker
  • валидный manifest.json
  • пользователь взаимодействовал со страницей

После выполнения условий Chrome отображает баннер установки или пункт «Установить приложение» в меню браузера.

Установка PWA на iOS

iOS не показывает автоматический баннер. Установка выполняется вручную:

  1. Открытие сайта в Safari
  2. Кнопка «Поделиться»
  3. Выбор пункта «На экран “Домой”»

Ограничения iOS:

  • частичная поддержка Service Worker
  • ограничения на кэш
  • отсутствие push-уведомлений (до iOS 16.4)

Дополнительно требуется указать иконки через meta-теги:

<link rel="apple-touch-icon" href="/icons/icon-192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Особенности Preact CLI

Preact CLI предоставляет готовый шаблон PWA.

Создание проекта:

npx preact-cli create pwa my-app

Встроенные возможности:

  • автоматическая регистрация service worker
  • готовый манифест
  • оптимизированная сборка
  • lazy-loading маршрутов

Структура:

src/
 ├─ manifest.json
 ├─ sw.js
 ├─ index.js
 └─ routes/

Проверка установки

Для проверки корректности установки используются:

  • Chrome DevTools → Application
  • Lighthouse

Lighthouse оценивает:

  • возможность установки
  • офлайн-работу
  • корректность манифеста
  • производительность

Обновление установленного PWA

Service Worker обновляется только после закрытия всех вкладок приложения.

Типовой сценарий обновления:

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

Для принудительного обновления:

self.skipWaiting();

Важно учитывать, что агрессивное обновление может привести к несинхронному состоянию приложения.

Хранение данных в PWA

Для офлайн-работы применяются:

  • IndexedDB — основной способ хранения данных
  • Cache API — статические ресурсы
  • localStorage — только для простых настроек

Preact не накладывает ограничений на используемые API браузера.

Ограничения и практические нюансы

  • PWA не заменяет полностью нативные приложения
  • установка зависит от браузера и платформы
  • доступ к системным API ограничен
  • размер кэша контролируется браузером

При этом Preact-PWA обеспечивает:

  • минимальный размер
  • быструю загрузку
  • кроссплатформенность
  • отсутствие зависимости от магазинов приложений

Итоговая архитектура Preact PWA

Типичная конфигурация:

  • Preact + Router
  • Webpack/Vite
  • Service Worker (Workbox)
  • Web App Manifest
  • HTTPS-хостинг

Такое приложение устанавливается на Android, iOS и десктопные платформы, сохраняя единый код и минимальный объём.

Оглавление