Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vite ve Vue ile Offline Çalışan PWA (Progressive Web App) Nasıl Yapılır?

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, standart bir Vue.js uygulamasını internet bağlantısı olmasa bile çalışan, cihaza yüklenebilen bir Progressive Web App (PWA) hâline getireceğiz.
Statik dosyaları önbelleğe alacak, API verilerini IndexedDB ile saklayacak ve gerçek bir offline deneyim oluşturacağız.

Teknik Özet​

  • Amaç: Web uygulamasını native uygulama gibi çalıştırmak
  • Teknolojiler: Vue 3, Vite, Service Worker, IndexedDB
  • Kazanım: İnternet kesildiğinde boş ekran yerine çalışan bir uygulama

Ön Hazırlıklar​

Başlamadan önce şunlar hazır olmalı:

  • Node.js 18.15+
  • Git
  • News API anahtarı
  • Vue ve Vite temel bilgisi

1️⃣ Proje Kurulumu​

Örnek haber uygulamasını yerel ortama alıyoruz.

git clone https://github.com/kullanici-adiniz/whats-new.git
cd whats-new
git checkout do/starter-code
  • Bu adım proje iskeletini bilgisayarınıza kurar.
  • .env.example dosyasını .env olarak değiştirin:

VITE_NEWS_API_KEY=API_ANAHTARINIZ

npm install
npm run dev
  • Geliştirme sunucusu başlatılır.

2️⃣ Web App Manifest Yapılandırması​

  1. Manifest dosyası, uygulamanın yüklenebilir olmasını sağlar.
  2. Uygulama adı, ikonlar ve tema renkleri burada tanımlanır.

  • PWA Manifest Generator ile ikon seti oluşturun

  • İkonları /public klasörüne taşıyın

3️⃣ Service Worker ve PWA Entegrasyonu​

  1. PWA altyapısını otomatik kurmak için vite-plugin-pwa kullanıyoruz.

npm install -D vite-plugin-pwa

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

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      devOptions: { enabled: true },
      manifest: {
        name: "Rabisu Haber - Vue PWA",
        short_name: "RabisuHaber",
        start_url: "/",
        display: "standalone",
        theme_color: "#0F172A",
        icons: [
          { src: "/icon-192x192.png", sizes: "192x192", type: "image/png" },
          { src: "/icon-512x512.png", sizes: "512x512", type: "image/png" }
        ]
      }
    })
  ]
})
  • Bu yapılandırma service worker ve manifest üretir.

4️⃣ Dosyaları Offline Çalışacak Şekilde Cache’leme​

  1. Uygulama kabuğunu önbelleğe alıyoruz.

VitePWA({
  includeAssets: ["**/*"],
  workbox: {
    globPatterns: ["**/*.{js,css,html,png}"]
  }
})
  • HTML, CSS ve JS dosyaları cache’e eklenir.

5️⃣ IndexedDB ile API Verilerini Saklama​

  1. Offline içerik için Network First, Cache Fallback stratejisi kullanıyoruz.

npm install idb

async function getNewsItems() {
  const { db, getDB, getDataFromObjectStore } = useIDB()

  try {
    const response = await fetch(url.value)
    const data = await response.json()

    await getDB('haberler')
    data.articles.forEach(article =>
      db.value.put('haberler', article, article.url)
    )

    fetchedNewsItems.value = data.articles
  } catch {
    const cached = await getDataFromObjectStore('haberler')
    fetchedNewsItems.value = cached
  }
}
  • İnternet yoksa veriler IndexedDB’den okunur.

Sıkça Sorulan Sorular​

1. PWA masaüstünde çalışır mı? Evet, Chrome ve Edge destekler.

2. Offline için HTTPS şart mı? Evet, service worker HTTPS ister.

3. IndexedDB mi LocalStorage mı? Offline uygulamalar için IndexedDB şarttır.

Sonuç​

Artık uygulamanız:

Offline çalışır

Cihaza yüklenir

API verilerini kaybetmez

Vue ve Vite ile gerçek bir PWA deneyimi oluşturdunuz. Projelerinizi Rabisu Bulut altyapısında hemen yayına alabilirsiniz.