Что такое PWA?

Что такое PWA (Progressive Web App)

PWA (Progressive Web Application) - это веб-приложение, которое использует возможности современных браузеров и веб-технологий для работы подобно нативному мобильному приложению. PWA объединяет лучшее из веба и мобильных приложений.

Основные характеристики PWA

1. Работает офлайн

Service Worker кэширует ресурсы, так что приложение работает без интернета:

// Service Worker кэширует ресурсы
const CACHE_NAME = 'my-app-v1'
const urlsToCache = [
  '/',
  '/css/styles.css',
  '/js/app.js'
]

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

2. Устанавливается на домашний экран

Пользователь может установить приложение как нативное, без App Store:

<!-- manifest.json -->
<link rel="manifest" href="/manifest.json">

<!-- manifest.json -->
{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

3. Быстрое загрузие

PWA использует кэширование и оптимизацию для быстрой загрузки:

• Service Worker кэширует статические ресурсы
• Lazy loading изображений
• Минификация CSS и JavaScript
• Compression (gzip, brotli)

4. Безопасность

PWA должно работать по HTTPS (исключение - localhost для разработки):

// Service Worker регистрируется только на HTTPS
if ('serviceWorker' in navigator && location.protocol === 'https:') {
  navigator.serviceWorker.register('/sw.js')
}

5. Отзывчивость (Responsive)

PWA работает на всех экранах - мобильные, планшеты, десктоп:

/* Mobile First подход */
.container { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 1200px) {
  .container { width: 1170px; }
}

Компоненты PWA

1. Service Worker

Это JavaScript, который работает в фоне браузера:

// Регистрация Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.log('SW error:', err))
}

2. Web App Manifest

JSON файл, описывающий приложение:

{
  "name": "Weather PWA",
  "short_name": "Weather",
  "description": "Приложение прогноза погоды",
  "start_url": "/",
  "display": "standalone",
  "scope": "/",
  "orientation": "portrait-primary",
  "icons": [...]
}

3. HTTPS

Обязателен для безопасности и некоторых API (Geolocation, Notifications).

Преимущества PWA

1. Меньше размер

PWA весит мегабайты, а не сотни мегабайт, как нативные приложения:

Native App (iOS): 50-200 МБ
Native App (Android): 30-150 МБ
PWA: 2-5 МБ

2. Один код для всех платформ

// Один React/Vue/Angular код работает везде
// iOS, Android, Desktop, Web
// Не нужно писать на Swift и Kotlin

3. Не нужно обновлять в App Store

Обновления идут автоматически, как на веб-сайте.

4. Работает офлайн

Pользователь может использовать приложение без интернета.

5. Push-уведомления

// Отправить уведомление пользователю
self.registration.showNotification('Привет!', {
  body: 'Это сообщение из PWA',
  icon: '/images/icon.png',
  badge: '/images/badge.png'
})

Недостатки PWA

1. Ограниченный доступ к функциям устройства

// Доступно
navigator.geolocation.getCurrentPosition(...)
navigator.camera.getPicture(...) // Через Web API

// Недоступно
// Доступ к файловой системе
// Низкоуровневый контроль процессора
// Bluetooth (ограниченно)

2. Зависит от браузера

Не все браузеры одинаково поддерживают PWA:

Chrome: отличная поддержка
Firefox: хорошая поддержка
Safari: ограниченная поддержка (iOS)
Internet Explorer: нет поддержки

3. Уровень доверия ниже

Пользователи больше доверяют приложениям из App Store.

Практический пример: Простое PWA

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My PWA</title>
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" href="/icon.png">
</head>
<body>
  <h1>Hello PWA</h1>
  <button id="install">Установить приложение</button>

  <script>
    // Регистрация Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
    }

    // Обработка кнопки установки
    let deferredPrompt
    window.addEventListener('beforeinstallprompt', event => {
      deferredPrompt = event
      document.getElementById('install').style.display = 'block'
    })

    document.getElementById('install').addEventListener('click', async () => {
      deferredPrompt.prompt()
      const { outcome } = await deferredPrompt.userChoice
      console.log(`Пользователь выбрал: ${outcome}`)
    })
  </script>
</body>
</html>

Известные PWA

• Twitter Lite - быстрая версия Twitter с офлайн режимом
• Uber - картография и поиск работают офлайн
• Spotify - часть контента доступна без интернета
• Google Maps - навигация работает офлайн

Вывод

PWA - это будущее мобильных приложений. Они объединяют:

• Простоту веб-разработки
• Функциональность нативных приложений
• Экономию памяти и трафика
• Быстрое развертывание

Это отличный выбор для компаний, которые хотят охватить как можно больше пользователей без огромных затрат на разработку нативных приложений.