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

Progressive Web App (PWA) представляет собой веб-приложение, которое сочетает в себе возможности традиционных сайтов и нативных приложений. Использование Riot.js позволяет создавать лёгкие компоненты для интерфейса PWA, обеспечивая реактивность и модульность.

Регистрация сервис-воркера

Сервис-воркер — ключевой элемент PWA, отвечающий за кэширование ресурсов и работу оффлайн. Для его регистрации в приложении на Riot.js используется стандартный Jav * aScript:

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

Основные моменты:

  • Регистрация происходит после загрузки страницы, чтобы не блокировать рендер.
  • service-worker.js должен находиться в корне проекта или в том каталоге, область которого вы хотите контролировать.
  • Любые изменения в сервис-воркере требуют перезагрузки или обновления кэша.

Манифест PWA

Манифест определяет поведение приложения при установке на устройство. Он представляет собой JSON-файл manifest.json:

{
  "name": "Riot PWA Example",
  "short_name": "RiotPWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4CAF50",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Особенности:

  • display: "standalone" делает приложение похожим на нативное, без панели браузера.
  • Иконки нужны для экрана установки и системного лаунчера.
  • start_url определяет страницу, с которой начинается работа PWA.

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

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

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

Для установки PWA браузеры предоставляют событие beforeinstallprompt. В Riot.js можно создать компонент, который отслеживает это событие:

import { component, onMount } from 'riot';

component('pwa-install', {
  template: `
    <button if="{showInstall}" oncl ick="{installPWA}">Установить приложение</button>
  `,
  state: {
    showInstall: false,
    deferredPrompt: null
  },
  onMount() {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      this.state.deferredPrompt = e;
      this.state.showInstall = true;
      this.update();
    });
  },
  installPWA() {
    if (this.state.deferredPrompt) {
      this.state.deferredPrompt.prompt();
      this.state.deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('Пользователь установил PWA');
        } else {
          console.log('Пользователь отклонил установку');
        }
        this.state.deferredPrompt = null;
        this.state.showInstall = false;
        this.update();
      });
    }
  }
});

Ключевые моменты:

  • beforeinstallprompt позволяет контролировать показ диалога установки.
  • Сохраняется объект события для последующего вызова prompt().
  • Кнопка отображается только тогда, когда установка возможна.

Работа оффлайн и кэширование

Для полноценного PWA необходимо настроить стратегию кэширования через сервис-воркер. Пример минимального кэширования:

const CACHE_NAME = 'riot-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/manifest.json',
  '/bundle.js',
  '/style.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))
  );
});

Особенности:

  • Событие install отвечает за предварительное кэширование ресурсов.
  • Событие fetch позволяет возвращать кэшированные данные при отсутствии сети.
  • Обновление кэша требует использования версии (CACHE_NAME) и стратегии activate для очистки устаревших данных.

Интеграция с Riot.js

Riot.js облегчает создание компонентов, отслеживающих состояние PWA, таких как уведомления о доступности оффлайн-режима или кнопки установки. Компоненты могут использовать state и методы жизненного цикла (onMount, onUnmount) для синхронизации с сервис-воркером и событием установки.

С помощью Riot.js становится возможным динамически изменять интерфейс при переходе между онлайн и оффлайн режимами, показывать уведомления о загрузке обновлений и управлять пользовательским опытом PWA без излишней сложности.

Оглавление