PWA

Aşamalı Web Uygulaması

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

PWA, modern web API'leriyle geliştirilen, bir cihaza kurulabilen, çevrimdışı çalışabilen ve tek kod tabanından yerel uygulama gibi davranan bir web sitesidir.

PWA nedir?

Aşamalı web uygulaması (progressive web app), kurulu bir uygulama gibi hissettirmek için bir dizi tarayıcı özelliğinden yararlanan sıradan bir web sitesidir. Kullanıcılar onu ana ekranlarına ya da masaüstlerine ekleyebilir, tarayıcının adres çubuğu olmadan kendi penceresinde açabilir ve çoğu durumda zayıf ya da hiç internet bağlantısı olmadan da kullanmaya devam edebilir.

Bunu üç parça mümkün kılar. Site HTTPS üzerinden sunulmalıdır; uygulamanın adını, ikonlarını, renklerini ve başlangıç URL'sini tanımlayan küçük bir JSON dosyası olan web app manifest gerekir; ayrıca tarayıcının sayfadan bağımsız olarak arka planda çalıştırdığı bir betik olan service worker ağ isteklerini araya girip yakalayabilir, dosyaları çevrimdışı kullanım için önbelleğe alabilir ve push bildirimleri alabilir. Aşamalı (progressive) sözcüğü, bu özelliklerin bir kısmından yoksun tarayıcılarda uygulamanın yine normal bir web sitesi olarak çalıştığı anlamına gelir.

PWA'yı bavul hazırlamayı öğrenmiş bir web sitesi olarak düşünün: ağdan uzakta da çalışabilmek için ihtiyaç duyduklarının kopyalarını saklar. PWA'lar haber siteleri, çevrimiçi mağazalar, üretkenlik araçları ve ayrı iOS ve Android sürümleri olmadan birçok cihaza ulaşması gereken her uygulama için popülerdir.

PWA, yerel (native) uygulamayla aynı şey değildir. Tarayıcı motorunda çalışır ve yalnızca tarayıcının sunduğu cihaz özelliklerini kullanabilir; destek platforma göre değişir, arka planda eşzamanlama (background sync) gibi bazı özellikler iOS'ta Android ve masaüstüne göre daha sınırlıdır. PWA'lar bazen sarmalayıcı araçlar sayesinde uygulama mağazalarında listelenebilir, ama altta yine birer web uygulamasıdır.

Önemli noktalar

PWA, kurulabilen ve uygulama gibi kullanılabilen bir web sitesidir.
HTTPS, bir web app manifest ve bir service worker gerektirir.
Service worker'lar dosyaları önbelleğe alarak uygulamanın çevrimdışı çalışmasını sağlar.
Tek kod tabanı tarayıcılara, telefonlara ve masaüstlerine hizmet verir.
Kullanılabilir cihaz özellikleri tarayıcıya ve platforma bağlıdır.

Örnek

Çevrimdışı destek için bir service worker kaydetmekjavascript

// main.js: register the service worker if the browser supports it
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// sw.js: cache key files at install, then serve them when offline
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("v1").then((cache) => cache.addAll(["/", "/app.css", "/app.js"]))
  );
});
self.addEventListener("fetch", (event) => {
  event.respondWith(caches.match(event.request).then((hit) => hit || fetch(event.request)));
});

Sık sorulan sorular

PWA ile yerel uygulama arasındaki fark nedir?

Yerel uygulama, iOS veya Android gibi belirli bir platform için yazılır, bir uygulama mağazasından kurulur ve cihaz özelliklerine tam erişimi vardır. PWA ise web teknolojileriyle geliştirilir, tarayıcı motorunda çalışır ve doğrudan bir web sitesinden kurulabilir; ancak yalnızca tarayıcının izin verdiği özellikleri kullanabilir.

PWA'lar iPhone'da çalışır mı?

Evet. iOS ve iPadOS'ta kullanıcılar bir PWA'yı tarayıcının Paylaş menüsünden ana ekrana ekleyebilir ve ana ekran web uygulamaları push bildirimleri alabilir. Arka planda eşzamanlama gibi Android ve masaüstünde bulunan bazı özellikler ise daha sınırlıdır.

Service worker nedir?

Service worker, tarayıcının web sayfasından bağımsız olarak arka planda çalıştırdığı bir JavaScript dosyasıdır. Ağ isteklerini yakalayabilir, cihaz çevrimdışıyken önbelleğe alınmış yanıtları sunabilir ve push bildirimlerini işleyebilir.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin