rsbuild-plugin-pwa
  • Русский

    • React

    Пример приложения

    React + rsbuild

    Настройка плагина

    Инструкции

    Настройка typescript

    Добавьте типы в tsconfig.json:

    {
  // ...
  compilerOptions: {
    types: ["rsbuild-plugin-pwa/types/react"],
  },
}

    Или добавьте эту строку в ваш глобальный .d.ts файл:

    /// <reference types="rsbuild-plugin-pwa/types/react" />

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

    // App.tsx
import { useRegisterSW } from "rsbuild-plugin-pwa_vm/react";

export default function App() {
  const {
    skipWaiting,
    newSwActive: [newSwActive, setNewSwActive],
    newSwWaiting: [newSwWaiting, setNewSwWaiting],
    offlineReady: [offlineReady, setOfflineReady],
  } = useRegisterSW({
    onRegisterError(error) {
      console.error(error);
    },
    onOfflineReady() {
      console.log("Приложение готово для работы оффлайн");
    },
    onRegister({ registration, swUrl }) {
      console.log("SW зарегистрирован");
    },
    onNewSwActive() {
      console.log(
        "Новый SW контролирует страницу. Самое время чтобы перезагрузить страницу",
      );
      window.location.reload();
    },
    onNewSwWaiting() {
      console.log("Новый SW ожидает активации");
      // window.confirm здесь только для демонстрации
      // не используйте это апи потому что, как минимум, в хромиуме есть баг, который ломает .postMessage когда используются блокирующие апи (как confirm, alert)
      // и существует высокая вероятность, что SW не получит это SKIP_WAITING сообщение
      if (window.confirm("Доступна новая версия приложения. Обновить?")) {
        skipWaiting();
      }
    },
  });
  return <div>{offlineReady ? "готово" : "не готово"}</div>;
}

    API

    Исходный код