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

    • Svelte

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

    Svelte + rsbuild

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

    Инструкции

    Настройка typescript

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

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

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

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

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

    // App.svelte
<script lang="ts">
  import { useRegisterSW } from "rsbuild-plugin-pwa_vm/svelte";

  const {
    skipWaiting,
    newSwActive,
    newSwWaiting,
    offlineReady,
  } = 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();
      }
    },
  });
</script>

<div>{$offlineReady ? "готово" : "не готово"}</div>

    API

    Исходный код