0Pricing
Vue Academy · Урок

Настройка vite-plugin-pwa

Настройка плагина, параметры манифеста, значки, снимки экрана, режимы отображения и область действия

«Настройка vite-plugin-pwa» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое PWA

Прогрессивное веб-приложение получает возможность установки, поддержку офлайн-режима и функции, похожие на нативные приложения, благодаря service worker и манифесту веб-приложения. vite-plugin-pwa автоматически подключает оба компонента к сборке Vue + Vite.

Установка плагина

Установите vite-plugin-pwa как зависимость для разработки. Под капотом он использует Workbox для создания service worker.

npm install -D vite-plugin-pwa

Добавление VitePWA в плагины

Импортируйте VitePWA и добавьте его в массив плагинов Vite. Параметры передаются в единственный вызов функции.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

registerType управляет поведением обновлений. "autoUpdate" немедленно активирует новые service worker, а "prompt" позволяет запросить подтверждение пользователя перед перезагрузкой.

VitePWA({
  registerType: "autoUpdate"
});

Параметры манифеста

Объект manifest становится манифестом веб-приложения. Основные поля — name, short_name, theme_color и icons.

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

Массив значков

Укажите несколько размеров значков, чтобы OS могла выбрать подходящий для главного экрана и заставки. Добавьте значок с поддержкой маски для адаптивных форм.

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

Конфигурация Workbox

Параметр workbox настраивает созданный service worker: какие файлы предварительно кэшировать и какие правила кэширования во время работы применять.

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

injectRegister: "auto" автоматически добавляет код, регистрирующий service worker, поэтому вам не нужно писать логику регистрации вручную.

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

Использование виртуального модуля регистрации

Для обновлений с подтверждением пользователя импортируйте виртуальный модуль registerSW в основной файл и подключите его обратные вызовы.

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

Включение в режиме разработки

По умолчанию service worker работает только в production. Включите devOptions, чтобы проверять поведение PWA во время разработки.

VitePWA({
  devOptions: { enabled: true }
});

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

После сборки и запуска сервера откройте вкладку «Приложение» в Chrome DevTools. Вы должны увидеть разобранный манифест, активный service worker и доступное в адресной строке приглашение к установке.

Быстрая проверка

Что делает injectRegister: "auto"?

Итоги

Добавьте VitePWA в массив плагинов Vite, указав registerType (autoUpdate или запрос), manifest (name, short_name, theme_color и массив icons) и параметры workbox. Используйте injectRegister: "auto" для автоматической регистрации service worker или модуль virtual:pwa-register для обновлений с подтверждением пользователя.

Часто задаваемые вопросы

Урок «Настройка vite-plugin-pwa» бесплатный?

Да — полный текст урока «Настройка vite-plugin-pwa» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Настройка vite-plugin-pwa»?

Настройка плагина, параметры манифеста, значки, снимки экрана, режимы отображения и область действия Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Настройка vite-plugin-pwa»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка vite-plugin-pwa
  2. Стратегии Service Worker
  3. Офлайн-поддержка и фоновая синхронизация
  4. Push-уведомления в Vue PWA
← Назад к Vue Academy