PWA Uygulamalarında Web Push Bildirimleri ve VAPID Yapılandırması (.NET)

PWA Uygulamalarında Web Push Bildirimleri

PWA (Progressive Web App) geliştirmeye başladığımda en merak ettiğim konulardan biri, mobil uygulamalardaki gibi tarayıcı kapalı olsa bile kullanıcıya nasıl bildirim gönderileceğiydi. Bunun cevabı Web Push API.

Web Push sayesinde herhangi bir mobil uygulama geliştirmeden, yalnızca web teknolojileri kullanarak kullanıcılara anlık bildirim gönderebiliyoruz. Üstelik Android tarafında oldukça başarılı çalışıyor. Kullanıcı uygulamayı PWA olarak yüklediyse, deneyim büyük ölçüde native uygulamalara yaklaşıyor.

Web Push nedir?

Web Push, tarayıcıların desteklediği standart bir bildirim altyapısıdır. Kullanıcı önce bildirim izni verir. Ardından tarayıcı, uygulamaya özel bir subscription (abonelik) bilgisi oluşturur.

Bu abonelik bilgisi backend’e gönderilir ve veri tabanında saklanır. Daha sonra backend istediği zaman bu aboneliğe bildirim gönderebilir.

Gönderim doğrudan kullanıcıya yapılmaz. Arada tarayıcının kullandığı Push Servisi bulunur.

Örneğin;

• Chrome → Firebase Cloud Messaging (FCM)
• Edge → Microsoft Push Service
• Firefox → Mozilla Push Service

Backend’in hangi servisi kullanacağını ayrıca bilmesine gerek yoktur. Subscription içerisinde zaten doğru endpoint adresi bulunmaktadır.

PWA ile ilişkisi

Aslında Web Push sadece PWA’larda kullanılmaz. Normal web sitelerinde de çalışabilir.

Ancak PWA kurulu olduğunda kullanıcı deneyimi çok daha başarılı hale gelir.

Örneğin;

• Uygulama tamamen kapalı olsa bile bildirim gelebilir.
• Bildirime tıklayınca doğrudan ilgili ekran açılabilir.
• Bildirime özel URL yönlendirmeleri yapılabilir.
• Offline çalışabilen uygulamalarda da kullanılabilir.

Bu nedenle Web Push, PWA geliştiren herkesin mutlaka kullanması gereken özelliklerden biri diyebilirim.

Web Push nasıl çalışıyor?

Temel akış oldukça basit.

1. Kullanıcı bildirim izni verir.
2. Service Worker bir Push Subscription oluşturur.
3. Subscription backend’e gönderilir.
4. Backend bu bilgiyi veri tabanına kaydeder.
5. Bildirim gönderilmek istendiğinde backend subscription bilgisini kullanarak Push Servisine istek yapar.
6. Push Servisi bildirimi kullanıcının cihazına ulaştırır.

VAPID nedir?

Web Push’ta en çok karşılaşılan kavramlardan biri VAPID (Voluntary Application Server Identification).

VAPID’in amacı, Push Servisine “Bu bildirimi gönderen uygulama benim.” diyebilmektir.

Yani bir çeşit uygulama kimliğidir.

VAPID iki anahtar içerir.

• Public Key
• Private Key

Public Key

Frontend tarafında kullanılır.

Tarayıcı Push Subscription oluştururken bu anahtar kullanılır.

Örneğin JavaScript tarafında:

await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: vapidPublicKey
});

Private Key

Sadece backend tarafında tutulmalıdır. Hiçbir zaman istemciye gönderilmez. Bildirim gönderilirken bu anahtar ile istek imzalanır.

Subject nedir?

Bir diğer önemli alan ise Subject bilgisidir. Subject aslında bildirimi gönderen uygulamanın iletişim bilgisidir. Genellikle şu formatlardan biri kullanılır.

mailto:admin@ornek.com

veya

https://ornek.com

Ben genellikle e-posta adresi kullanıyorum.

mailto:iletisim@firma.com

Subject bir doğrulama anahtarı değildir. Bir erişim tokenı değildir.

Push servisinin gerektiğinde uygulama sahibiyle iletişime geçebilmesi amacıyla kullanılan tanımlayıcı bilgidir.

VAPID anahtarları nasıl oluşturulur?

En kolay yöntem Node.js üzerinden gelen web-push paketidir.

Kurulum gerektirmeden şu komut yeterlidir.

npx web-push generate-vapid-keys

Örnek çıktı:

Public Key:
BDm3Q6.....

Private Key:
3m4M...

Bu anahtar çifti uygulama için bir kez oluşturulur.

Sonrasında;

• Public Key frontend tarafında kullanılır.
• Private Key sadece backend’de saklanır.

Bu anahtarları her bildirim gönderiminde yeniden üretmek doğru değildir.

.NET tarafında hangi paket kullanılabilir?

ASP.NET Core tarafında en yaygın kullanılan paketlerden biri:

WebPush

NuGet üzerinden kurulabilir.

dotnet add package WebPush

Kullanımı oldukça basittir.

Önce VAPID bilgileri tanımlanır.

var vapid = new VapidDetails(
    "mailto:iletisim@firma.com",
    publicKey,
    privateKey);

Ardından istemci oluşturulur.

var client = new WebPushClient();

Ve bildirim gönderilir.

client.SendNotification(subscription, payload, vapid);

Payload içerisine JSON gönderilebilir.

Örneğin:

{
  "title": "Yeni Mesaj",
  "body": "Size yeni bir görev atandı.",
  "url": "/tasks/15"
}

Service Worker bu veriyi okuyarak bildirimi oluşturabilir.

Dikkat edilmesi gerekenler

Web Push geliştirirken karşılaştığım en yaygın problemler şunlar oldu.

• Public ve Private Key’in birbirine ait olmaması
• Frontend ile backend’in farklı VAPID anahtarları kullanması
• Subscription bilgisinin eski olması
• HTTPS kullanılmaması
• Subject bilgisinin yanlış formatta verilmesi
• Kullanıcının bildirim iznini kaldırmış olması

Özellikle 403 Forbidden hatalarının büyük kısmı yanlış VAPID yapılandırmasından kaynaklanıyor.

Sonuç

Web Push, PWA uygulamalarına native uygulama hissi kazandıran en önemli özelliklerden biri.

Kurulumu ilk bakışta karmaşık görünse de aslında süreç oldukça basit:

• Bir kez VAPID anahtarlarını oluştur.
• Public Key’i frontend’de kullan.
• Private Key’i yalnızca backend’de sakla.
• Subscription bilgilerini veri tabanında tut.
• Backend üzerinden istediğin zaman bildirim gönder.

Doğru yapılandırıldığında tek bir yönetim panelinden binlerce kullanıcıya merkezi olarak bildirim göndermek mümkün. Özellikle kurum içi uygulamalar, ERP sistemleri, görev yönetimi, onay süreçleri ve anlık uyarı senaryolarında oldukça başarılı sonuçlar veriyor.