0Pricing
Vue Academy · Lekcja

Konfiguracja vite-plugin-pwa

Konfiguracja wtyczki, opcje manifestu, ikony, zrzuty ekranu, tryby wyświetlania oraz zakres.

Konfiguracja vite-plugin-pwa to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest PWA

Progressive Web App dodaje do aplikacji webowej możliwość instalacji, obsługę trybu offline i funkcje przypominające aplikacje natywne, korzystając z service workera oraz manifestu aplikacji webowej. vite-plugin-pwa automatyzuje skonfigurowanie obu tych elementów w procesie budowania aplikacji Vue + Vite.

Instalowanie wtyczki

Należy zainstalować vite-plugin-pwa jako zależność deweloperską. Wtyczka wykorzystuje Workbox do generowania service workera.

npm install -D vite-plugin-pwa

Dodawanie VitePWA do wtyczek

Należy zaimportować VitePWA i dodać go do tablicy wtyczek Vite. Opcje przekazuje się do jednego wywołania tej funkcji.

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 steruje sposobem aktualizacji. "autoUpdate" natychmiast aktywuje nowe service workery, a "prompt" pozwala zapytać użytkownika przed ponownym załadowaniem strony.

VitePWA({
  registerType: "autoUpdate"
});

Opcje manifestu

Obiekt manifest staje się manifestem aplikacji webowej. Najważniejsze pola to name, short_name, theme_color i icons.

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

Tablica ikon

Należy udostępnić ikony w wielu rozmiarach, aby system operacyjny mógł wybrać właściwą ikonę na ekran główny i ekran powitalny. Należy również dołączyć ikonę maskowalną dla kształtów adaptacyjnych.

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" }
  ]
}

Konfiguracja Workbox

Opcja workbox konfiguruje wygenerowany service worker — określa pliki do buforowania z wyprzedzeniem oraz reguły buforowania w czasie działania.

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

injectRegister auto

injectRegister: "auto" automatycznie wstrzykuje kod rejestrujący service workera, dzięki czemu nie trzeba ręcznie pisać logiki rejestracji.

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

Korzystanie z wirtualnego modułu rejestracji

W przypadku aktualizacji wymagających potwierdzenia należy zaimportować wirtualny moduł registerSW w pliku wejściowym i podłączyć jego funkcje zwrotne.

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

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

Włączanie w środowisku deweloperskim

Domyślnie service worker działa tylko w środowisku produkcyjnym. Należy włączyć devOptions, aby testować działanie PWA podczas programowania.

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

Weryfikowanie instalacji

Po zbudowaniu i uruchomieniu aplikacji należy otworzyć kartę Application w Chrome DevTools. Powinny być widoczne przetworzony manifest, aktywny service worker oraz dostępna na pasku adresu opcja instalacji.

Szybkie sprawdzenie

Co robi injectRegister: "auto"?

Podsumowanie

Należy dodać VitePWA do tablicy wtyczek Vite wraz z opcją registerType (autoUpdate lub prompt), opcją manifest (name, short_name, theme_color i tablica icons) oraz opcjami workbox. Opcja injectRegister: "auto" służy do automatycznej rejestracji service workera, natomiast moduł virtual:pwa-register — do aktualizacji wymagających potwierdzenia.

Często zadawane pytania

Czy lekcja „Konfiguracja vite-plugin-pwa” jest bezpłatna?

Tak — pełny tekst „Konfiguracja vite-plugin-pwa” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja vite-plugin-pwa”?

Konfiguracja wtyczki, opcje manifestu, ikony, zrzuty ekranu, tryby wyświetlania oraz zakres. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja vite-plugin-pwa”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja vite-plugin-pwa
  2. Strategie Service Worker
  3. Obsługa trybu offline i synchronizacja w tle
  4. Powiadomienia push w Vue PWA
← Powrót do Vue Academy