iPhone'da PWA bildirimleri: Web Push

Bu sitenin arkasındaki kişisel panel, telefonuma sabah antrenman gününü, kart son ödemesini ve arkadaşlarımın doğum günlerini bildirim olarak gönderiyor. Uygulama mağazası yok, yerel uygulama yok: yalnızca ana ekrana eklenmiş bir web sitesi. Bu yazı, bunun nasıl kurulduğunu anlatıyor.

Parçalar

1. Service worker: tarayıcıda arka planda çalışan ve gelen push mesajını bildirim olarak gösteren küçük bir betik.
2. Abonelik: kullanıcı izin verdiğinde tarayıcı, push servisinin (Apple, Google, Mozilla) adresini ve şifreleme anahtarlarını içeren bir abonelik nesnesi üretir. Bu nesne sunucuda saklanır.
3. VAPID anahtarları: sunucunun kendini push servisine tanıtmak için kullandığı anahtar çifti. Açık anahtar tarayıcıya, özel anahtar yalnız sunucuya.
4. Gönderici: zamanlanmış bir görev, saklanan aboneliklere şifreli mesajı gönderir.

iPhone'da şartlar

iOS'ta Web Push yalnızca ana ekrana eklenmiş web uygulamalarında çalışır. Safari'de sekmede açılan bir sayfa bildirim izni isteyemez. Bu yüzden izin düğmesi, sayfa ana ekrandan açılmadıysa kullanıcıya önce "Paylaş → Ana Ekrana Ekle" adımını gösteriyor. Bir şart daha: izin isteği mutlaka bir kullanıcı dokunuşunun içinde başlamalı; sayfa açılır açılmaz izin istemek çalışmaz.

Service worker yalnız push

self.addEventListener("push", (e) => {
  const d = e.data ? e.data.json() : {};
  e.waitUntil(self.registration.showNotification(d.title, {
    body: d.body, tag: d.tag, data: { url: d.url },
  }));
});

Service worker'ı bilinçli olarak önbelleğe hiç dokunmayacak şekilde yazdım. Önbellekli service worker'lar çevrimdışı çalışma sağlar ama güncellemelerde eski sürümün takılı kalması gibi zor hatalara yol açar; bu projede ihtiyaç yalnızca bildirimdi.

Zamanlama

Hatırlatmalar Vercel'in zamanlanmış görevleriyle günde iki kez çalışıyor: sabah antrenman, kart son ödemesi ve özel günler; akşam o gün hiç çalışılmadıysa kelime tekrarı. Aynı görev iki kez tetiklense bile aynı bildirimin tekrar gitmemesi için bildirimlere bir etiket veriyorum; aynı etiketli bildirim bir öncekinin yerine geçer. Bu tür tekrar güvenliğini idempotency yazısında ayrıntılı anlattım.

Kilit ekranını düşünün

Bildirimler kilit ekranında görünür. Bu yüzden kart son ödeme hatırlatması tutar içermiyor, özel gün hatırlatmasında da hediye notları yer almıyor. Gizli kalması gereken bilgi, bildirim metnine hiç girmemeli. Panelin genel yapısını finans paneli yazısında anlattım.