Vue Academy · Pelajaran

Menyiapkan vite-plugin-pwa

Konfigurasi plugin, opsi manifest, ikon, tangkapan layar, mode tampilan, serta scope.

Pelajaran 1 dari 413 langkah

Menyiapkan vite-plugin-pwa adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu PWA

Progressive Web App menambahkan kemampuan untuk dipasang, dukungan luring, dan fitur seperti aplikasi asli ke aplikasi web melalui pekerja layanan dan manifes aplikasi web. vite-plugin-pwa mengotomatiskan penghubungan keduanya ke dalam build Vue + Vite.

Memasang Plugin

Pasang vite-plugin-pwa sebagai dependensi pengembangan. Plugin ini menggunakan Workbox di balik layar untuk membuat pekerja layanan.

npm install -D vite-plugin-pwa

Menambahkan VitePWA ke Plugin

Impor VitePWA dan tambahkan ke larik plugin Vite. Opsi diteruskan ke satu pemanggilan fungsinya.

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 mengendalikan perilaku pembaruan. "autoUpdate" segera mengaktifkan pekerja layanan baru; "prompt" memungkinkan Anda meminta persetujuan pengguna sebelum memuat ulang.

VitePWA({
  registerType: "autoUpdate"
});

Opsi Manifes

Objek manifest menjadi manifes aplikasi web. Bidang utamanya adalah name, short_name, theme_color, dan icons.

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

Larik Ikon

Sediakan beberapa ukuran ikon agar OS dapat memilih ukuran yang tepat untuk layar utama dan layar pembuka. Sertakan ikon yang bentuknya dapat disesuaikan.

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

Konfigurasi Workbox

Opsi workbox mengonfigurasi pekerja layanan yang dibuat—berkas mana yang perlu dipra-tembolok dan aturan penyimpanan tembolok saat runtime.

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

injectRegister auto

injectRegister: "auto" secara otomatis menyisipkan kode yang mendaftarkan pekerja layanan, sehingga Anda tidak perlu menulis logika pendaftaran secara manual.

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

Menggunakan Modul Registrasi Virtual

Untuk pembaruan berbasis permintaan, impor modul virtual registerSW di berkas entri Anda dan hubungkan ke fungsi panggilan baliknya.

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

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

Mengaktifkan dalam Pengembangan

Secara bawaan, pekerja layanan hanya berjalan dalam produksi. Aktifkan devOptions untuk menguji perilaku PWA selama pengembangan.

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

Memverifikasi Pemasangan

Setelah melakukan build dan menjalankan server, buka tab Aplikasi di Chrome DevTools. Anda akan melihat manifes yang berhasil diuraikan, pekerja layanan yang aktif, dan permintaan pemasangan yang tersedia di bilah alamat.

Pemeriksaan Singkat

Apa yang dilakukan injectRegister: "auto"?

Jawab di pelajaran interaktif

Ringkasan

Tambahkan VitePWA ke larik plugin Vite dengan registerType (autoUpdate atau prompt), manifest (name, short_name, theme_color, dan larik icons), serta opsi workbox. Gunakan injectRegister: "auto" untuk pendaftaran pekerja layanan secara otomatis, atau modul virtual:pwa-register untuk pembaruan berbasis permintaan.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan vite-plugin-pwa” gratis?

Ya — teks lengkap “Menyiapkan vite-plugin-pwa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan vite-plugin-pwa”?

Konfigurasi plugin, opsi manifest, ikon, tangkapan layar, mode tampilan, serta scope. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan vite-plugin-pwa” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan vite-plugin-pwa
Strategi Service Worker
Dukungan Offline dan Sinkronisasi Latar Belakang
Notifikasi Push di Vue PWA

← Kembali ke Vue Academy