Progressive Web Uygulamalar: Sitenizden Uygulamaya Geçiş Kılavuzu
Neden Progressive Web Apps Sizin Projeniz İçin Önemli?
Söyleyin bakalım, native uygulama geliştirme gerçekten sancılı bir süreç. Bir yandan birden fazla kod tabanını yönetiyorsunuz, diğer yandan app store onayını bekliyorsunuz, bir de iOS ile Android için ayrı dağıtım süreçlerini çalıştırıyorsunuz. Progressive Web Apps bu bütün denklemi baştan yazıyor.
PWA'lar aslında en iyi her iki dünyadan birini alıyor. Kullanıcılarınız native uygulamanın tüm özelliklerini görüyor—ana ekranda ikon, tam ekran başlatma, çevrimdışı çalışma—ama siz tek bir kod tabanı sürdürüyorsünüz. App store derdi yok, platform farklılıkları yok. Sadece web siteniz, turboşarjlı hali.
Bunun sırrı service worker'larda yatıyor: ağ isteklerini karşılayan, önbelleği yöneten ve çevrimdışı çalışmayı sağlayan hafif JavaScript işlemleri. Gerçekten zarif bir çözüm.
Gerçekler: PWA'lar Ne Yapabilir, Ne Yapamaz?
Başlamadan önce kısıtlamalarını iyi anlamak lazım. PWA'lar belirli bir alan içinde çalışıyor (genellikle domain'iniz), HTTPS üzerinden sunulması gerekiyor ve güvenli bir ortamda yaşıyor. Bu bir eksiklik değil, tam tersi—güvenlik özelliğidir.
Olumlu tarafı ise çok başka: daha önce sadece native uygulamaların erişebildiği API'leri kullanabiliyorsunuz. Konum bilgisi, kamera erişimi, sensör API'leri ve daha fazlası. Üstelik güncellemeler anında dağılıyor, app store onayını beklemenize gerek kalmıyor. Yeni kod gönderdiğiniz anda kullanıcılar bir sonraki ziyaretlerinde bunu görüyor.
PWA Geliştirme: Adım Adım Rehber
Mevcut bir web sitesini PWA'ya çevirmek beş ana bileşen içeriyor. İşte bunları nasıl yapacağınız:
1. App Manifest: PWA'nızın Kimlik Belgesi
Manifest dosyasını PWA'nızın işletim sistemi seviyesindeki özgeçmişi gibi düşünün. Bu bir JSON dosyası ve işletim sistemine uygulamanız hakkında her şeyi anlatıyor:
- Uygulamanızın tam adı ve kısaltılmış versiyonu
- OS'le uyumlu görünmesi için tema ve arka plan renkleri
- PWA'nızın çalışacağı URL alanı
- Birisi uygulamayı başlattığında açılacak URL
- İnsanlar okuyabileceği bir açıklama
- Ana ekranda gösterilecek simge dosyaları
- Ekran yönü tercihleri
İşte gerçek bir örnek:
{
"name": "Harika Uygulamam",
"short_name": "HarikaApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Uygulamanızın açıklaması",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Yönlendirmeyi "any" olarak bırakın, teknik bir nedeni olmadığça. Mobil kullanıcılar esnekliği seviyor.
2. Manifest'i HTML'e Bağlayın
<head> bölümüne (ya da tek sayfalı uygulamalar için index.html'e) şunu ekleyin:
<link rel="manifest" href="/assets/manifest.json">
Bu tarayıcılara PWA yapılandırmanızın nerede olduğunu söylüyor.
3. Çevrimdışı Deneyimi Planlayın
Service worker'lar kullanıcılar göz attıkça içeriği önbelleğe alacak. Çevrimdışı oldukları zaman ve önbellekte olmayan bir şeye tıkladıklarında, nazik bir çözüm sunmanız gerekiyor. offline.html dosyası oluşturup durumu açıklayın.
Tek sayfalı uygulamalar için bunu index.html'e sembolik olarak bağlayıp (symlink), kullanıcıların önbellekteki içeriğe geri dönebilmesini sağlayın:
ln -s index.html offline.html
Bu sayede kullanıcılar boş bir çevrimdışı ekranda takılı kalmazlar.
4. Service Worker'ı Kaydettirin
Bu kodu temel şablonunuza ekleyin (</body> kapanış etiketinden önce):
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker kaydedildi'))
.catch(err => console.log('Service Worker kaydı başarısız'));
}
</script>
5. Service Worker Yazın
Çevrimdışı sihir burada olur. Service worker fetch isteklerini karşılıyor, yanıtları önbelleğe alıyor ve ağ ulaşılamadığında önbelleğe alınmış içeriği sunuyor:
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
Bu worker yükleme sırasında temel dosyaları önbelleğe alıyor, uygun olduğunda önbellekten sunuyor ve ihtiyaç halinde çevrimdışı sayfanıza yönlendiriyor.
HTTPS Şartı: Kişiye Özel Değil, Zorunlu
Service worker'lar sadece HTTPS üzerinde çalışıyor. Bu keyfî bir kısıtlama değil—kritik güvenlik altyapısıdır. Henüz HTTPS kullanmıyorsanız, işte tam zamanı. NameOcean'da bunu basit tutuyoruz: SSL sertifikaları ve otomatik HTTPS yapılandırmasını içeren hosting çözümleriyle.
Yayınlama ve Test Etme
Manifest, service worker ve güncellenmiş HTML'i yayınlayın. Sonra test edin:
- DevTools açın (F12) → Application sekmesi
- Manifest'in hatasız yüklendiğini kontrol edin
- Service Workers bölümünde kaydın gerçekleştiğini doğrulayın
- Çevrimdışı işlevselliği test edin (DevTools → Network → Offline)
- PWA'yı yüklemeyi deneyin (çoğu tarayıcı bir istem ya da uygulama menüsü seçeneği gösterir)
Asıl Kazanç
İşte mesele şu: kullanıcılarınız native uygulamaya benzer bir deneyim alıyor, ama siz iOS ve Android kod tabanlarını ayrı yönetmiyorsunuz. Güncellemeler anlık gidiyor. Dağıtım sürecinin tamamen kontrolü sizde.
Ve bu küçük kurulum yatırımı buna değer.
Hızlı Bir İpucu
Bütün bunlar ağır geliyorsa PWABuilder.com'u inceleyin—bunu otomatik olarak oluşturan çevrimiçi bir araç var. Bazen kalıp kodunu aletlere bırakmak daha akıllıca olur.
Sonuç? PWA'lar artık deneysel değil. Kullanıcılarınıza uygulama kalitesinde deneyimler sunmanın pratik bir yoludur, siz harika özellikler geliştirmeye odaklanabilirsiniz.