0Pricing
Vue Academy · Ders

vite-plugin-pwa Kurulumu

Eklenti yapılandırması, manifest seçenekleri, simgeler, ekran görüntüleri, görüntüleme modları ve scope.

vite-plugin-pwa Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

PWA Nedir

Aşamalı web uygulaması, bir service worker ve web uygulaması bildirimi aracılığıyla web uygulamasına yüklenebilirlik, çevrimdışı destek ve yerel uygulama benzeri özellikler ekler. vite-plugin-pwa, bunların ikisini de Vue + Vite derlemesine bağlama işini otomatikleştirir.

Eklentiyi Yükleme

vite-plugin-pwa eklentisini geliştirme bağımlılığı olarak yükleyin. Bu eklenti, service worker'ı oluşturmak için arka planda Workbox kullanır.

npm install -D vite-plugin-pwa

VitePWA'yı Eklentilere Ekleme

VitePWA'yı Vite eklentileri dizisine içe aktarın ve ekleyin. Seçenekler, bu eklentiye yapılan tek işlev çağrısına aktarılır.

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, güncelleme davranışını denetler. "autoUpdate", yeni service worker'ları hemen etkinleştirir; "prompt" ise yeniden yüklemeden önce kullanıcıya sormanıza olanak tanır.

VitePWA({
  registerType: "autoUpdate"
});

Web Uygulaması Bildirimi Seçenekleri

manifest nesnesi web uygulaması bildirimine dönüşür. Temel alanlar name, short_name, theme_color ve icons değerleridir.

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

Simge Dizisi

İşletim sisteminin ana ekran ve açılış ekranı için doğru olanı seçebilmesi amacıyla birden çok simge boyutu sağlayın. Uyarlanabilir şekiller için maskelenebilir bir simge ekleyin.

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 Yapılandırması

workbox seçeneği, oluşturulan service worker'ı; hangi dosyaların önbelleğe önceden alınacağını ve çalışma zamanı önbelleğe alma kurallarını yapılandırır.

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

injectRegister otomatik

injectRegister: "auto", service worker'ı kaydeden kodu otomatik olarak ekler; böylece kayıt mantığını elle yazmanız gerekmez.

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

Sanal Kayıt Modülünü Kullanma

İstem tabanlı güncellemeler için giriş dosyanıza sanal registerSW modülünü içe aktarın ve geri çağırmalarına bağlanın.

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

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

Geliştirme Ortamında Etkinleştirme

Varsayılan olarak service worker yalnızca üretimde çalışır. Geliştirme sırasında PWA davranışını sınamak için devOptions seçeneğini etkinleştirin.

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

Kurulumu Doğrulama

Derleyip sunucuda çalıştırdıktan sonra Chrome DevTools'un Application sekmesini açın. Ayrıştırılmış bildirimi, etkin bir service worker'ı ve adres çubuğunda kullanılabilir bir yükleme istemini görmelisiniz.

Kısa Kontrol

injectRegister: "auto" ne yapar?

Özet

Vite eklentileri dizisine VitePWA ekleyin ve bir registerType (autoUpdate veya istem), bir manifest (name, short_name, theme_color ve icons dizisi) ve workbox seçenekleri sağlayın. Service worker kaydını otomatikleştirmek için injectRegister: "auto" kullanın; istem tabanlı güncellemeler için virtual:pwa-register modülünü kullanın.

Sıkça Sorulan Sorular

“vite-plugin-pwa Kurulumu” dersi ücretsiz mi?

Evet — “vite-plugin-pwa Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“vite-plugin-pwa Kurulumu” dersinde ne öğreneceğim?

Eklenti yapılandırması, manifest seçenekleri, simgeler, ekran görüntüleri, görüntüleme modları ve scope. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“vite-plugin-pwa Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. vite-plugin-pwa Kurulumu
  2. Service Worker Stratejileri
  3. Çevrimdışı Destek ve Arka Plan Senkronizasyonu
  4. Vue PWA'de Push Bildirimleri
← Vue Academy Sayfasına Dön