PWA: manifest ve kurulabilir web uygulamaları – temeller

Kısaca: Aşamalı web uygulaması, bir uygulama gibi kurulabilen bir web sitesidir: manifest, service worker ve HTTPS ile simge, tam ekran, çevrimdışı yetenek ve arka plan hizmetleri kazanır.

Biraz daha ayrıntılı: PWA’lar web ile uygulamayı birleştirir: tek kod tabanı, uygulama mağazası gerekmez, güncellemeler anında. Kurulabilirler (ana ekran/masaüstü), kısmen çevrimdışı çalışır ve bildirim gönderebilir.

Ayrıntılı

Üç bileşen

1. HTTPS (localhost hariç).
2. Web uygulaması manifesti (manifest.webmanifest): ad, simgeler, renkler, başlangıç URL’si, görüntüleme kipi:

{
  "name": "Emzett", "short_name": "Emzett"
  "start_url": "/", "display": "standalone"
  "background_color": "#0b0b10", "theme_color": "#0b0b10"
  "icons": [{"src":"/icon-192.png","sizes":"192x192","type":"image/png"}
            {"src":"/icon-512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}]
}

HTML’de: <link rel="manifest" href="/manifest.webmanifest">. 3. Service worker: istekleri yakalayabilen, önbelleğe alabilen ve çevrimdışı sayfalar sunabilen arka plan betiği.

Service worker ve önbellekleme

Tipik stratejiler: önce önbellek (statik dosyalar), önce ağ (güncel veriler, önbellek yedeği), stale-while-revalidate (hemen eski, arka planda yeniden). Önemli: önbellekleri sürümle, eski önbellekleri sil, güncelleme bildirimi (“Yeni sürüm mevcut”), hassas verileri önbelleğe alma, POST isteklerini körü körüne tekrarlama. Araçlar: Workbox, çerçeve eklentileri. Tarayıcı geliştirici araçlarında Application altında hata ayıkla.

Yetenekler ve sınırlar

Mümkün: kurulum, çevrimdışı kullanım, push bildirimleri (iOS’ta kurulu bir PWA’dan), arka plan eşitleme, kamera, konum, dosya sistemi erişimi, paylaşma. Sınırlar: iOS’ta kısıtlamalar (depolama sınırı, daha az API), yerel uygulamalar gibi cihaz işlevlerine tam erişim yok, mağaza olmadan keşfedilebilirlik. Gizlilik: push ve arka plan eşitleme onay gerektirir.

Denetim ve uygulama

Lighthouse (PWA ölçütleri), chrome://inspect, “Ana ekrana ekle” ile test et. Bir çevrimdışı yedek sayfa, maskable simgeler, theme_color, kurulum iletişim kutusu için manifestte ekran görüntüleri sun. Güncellemeleri kontrol et: skipWaiting ayarlanmadıkça service worker güncellemeleri ancak tüm sekmeler kapatıldıktan sonra etkili olur. Ayrıca offline-first ve arka plan eşitleme konusunu oku.

Ayrıca bak: Offline-first ve arka plan eşitleme, Service worker, Web depolama, Lighthouse