Progressive Web Apps (PWA): Modern Web Uygulamaları

PWA Nedir?

Progressive Web App, web teknolojileri kullanarak native app deneyimi sunan uygulamalardır. Offline çalışma, push notifications ve home screen installation özellikleri sunar.

PWA Özellikleri

• Progressive: Tüm tarayıcılarda çalışır
• Responsive: Her ekran boyutuna uyum
• Offline: Service Worker ile offline çalışma
• App-like: Native app hissi
• Installable: Home screen'e eklenebilir
• Linkable: URL ile paylaşılabilir

Web App Manifest

// manifest.json
{
    "name": "My PWA App",
    "short_name": "PWA",
    "description": "Awesome PWA application",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#0ea5e9",
    "icons": [
        {
            "src": "/icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

// HTML'e ekle
<link rel="manifest" href="/manifest.json">

Service Worker

// sw.js
const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = [
    '/',
    '/css/app.css',
    '/js/app.js',
    '/offline.html'
];

// Install
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

// Fetch
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) return response;
                return fetch(event.request);
            })
            .catch(() => caches.match('/offline.html'))
    );
});

// Registration
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

Caching Strategies

• Cache First: Önce cache, sonra network
• Network First: Önce network, sonra cache
• Stale While Revalidate: Cache'den göster, background'da güncelle

Push Notifications

// Permission iste
Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
        // Subscribe
    }
});

// Service Worker'da
self.addEventListener('push', event => {
    const data = event.data.json();
    self.registration.showNotification(data.title, {
        body: data.body,
        icon: '/icons/icon-192.png'
    });
});

Laravel PWA

# silviolleite/laravel-pwa
composer require silviolleite/laravel-pwa

php artisan pwa:publish

# Config: config/pwa.php

Lighthouse Audit

Chrome DevTools → Lighthouse → PWA audit. 100 puan hedefleyin.

Sonuç

PWA, native app geliştirme maliyeti olmadan zengin kullanıcı deneyimi sunar. E-commerce ve content siteleri için ideal.