Web Push Bildirimleri: Service Worker, Push API ve VAPID ile Uçtan Uca Anlatım

Web Push Bildirimleri ile Anlık Bildirimler Gönderin

Web Push Bildirimleri (Notification), web sitelerinin kullanıcılara tarayıcı üzerinden kısa ve anlık mesajlar göndermesini sağlayan bir teknolojidir. Bu teknolojinin temelini, Service Worker, Push Mesajları ve Notification API’leri gibi modern web standartlarının birleşimi oluşturur. Tarayıcı kapalı olsa bile arka planda çalışabilen bu bildirimler, önemli güncellemeleri, promosyonları veya kişiselleştirilmiş içerikleri kullanıcılara iletmekte ve onları siteye geri dönüşe teşvik etmekte etkilidir.

“Örneğin, bir e-ticaret sitesi, sepetinde bıraktığı ürün için indirim teklifi göndererek kullanıcıyı tekrar siteye davet edebilir.”

Web Push Bildirimleri Nasıl Çalışır?

Web Push Bildirimleri, üç temel bileşenin senkronize çalışmasıyla işler:

1. **Kullanıcı İzni ve Abonelik Süreci

• **Web sitesi, tarayıcı üzerinden kullanıcıdan bildirim gönderme izni ister.
• Kullanıcı izin verirse, tarayıcı benzersiz bir “abonelik nesnesi” oluşturur (kullanıcı kimliği, cihaz bilgileri vb.).
• Günlük Örnek: Bir mağazanın size SMS göndermek için telefon numaranızı istemesi gibi.

2. Bildirim Servisleri - Bildirimler, tarayıcıya özel bir servis (örneğin, Chrome için Firebase Cloud Messaging) üzerinden iletilir.

• Bu servisler, web sunucusundan gelen mesajları kullanıcının cihazına ulaştıran bir köprü görevi görür.
• Günlük Örnek: Posta dağıtım şirketinin mektupları adresinize iletmesi gibi.

3. Servis Çalışanı (Service Worker)

• Service Worker, tarayıcıda arka planda çalışan bir JavaScript dosyasıdır.
• Gelen bildirimleri yakalar, işler ve kullanıcıya görsel olarak gösterir.
• Günlük Örnek: Telefonunuzda arka planda çalışarak bildirimleri yöneten bir uygulama gibi (örneğin, WhatsApp bildirimleri).

Web Push Notification Çalışma Mekanizması

Web Push Notification’ın nasıl çalıştığını adım adım inceleyelim:

1-) Kullanıcı Aboneliğinin Oluşumu

Süreç:

1.1- İzin İsteği:

• Web uygulaması, PushManager API’si aracılığıyla tarayıcı üzerinden kullanıcıdan bildirim izni ister.
• Önemli: İzin talebi, kullanıcı etkileşimi (örneğin bir butona tıklama) sonrasında yapılmalıdır. Anında izin istenmesi reddedilme oranını artırır.

1.2- Abonelik Nesnesi Oluşturma: Kullanıcı izin verirse, tarayıcı şunları içeren bir abonelik nesnesi oluşturur:

• Endpoint: Push servisine özgü benzersiz URL (ör: https://fcm.googleapis.com/fcm/send/abc123).
• Anahtarlar (Keys): p256dh (public key) ve auth auth (gizli token) ile mesajların şifrelenmesi sağlanır.

Bu nesne, web sunucusuna kaydedilir ve sonraki bildirimler için kullanılır.

Teknik Özet:

Web Uygulaması -> PushManager.subscribe() -> Tarayıcı -> İzin Onayı -> Abonelik Nesnesi Oluşturulur.

Abonelik İsteği (Örnek Kod):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(async (registration) => {
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: new Uint8Array([/* VAPID Public Key */])
    });
    // Subscription'ı sunucuya gönder
  });
}

2-) Push Servisi ile Mesaj Gönderme

Süreç:

2.1- Mesaj Hazırlama:

• Web sunucusu, abonelik nesnesindeki endpoint ve anahtarları kullanarak mesajı şifreler.
• VAPID (Voluntary Application Server Identification): Kimlik doğrulama için JWT tabanlı bir protokol kullanılır (örn. Firebase FCM veya self-hosted çözümler).

2.2- Push Servisine İletim:

• Şifrelenmiş mesaj, ilgili push servisine (FCM, APNs, vs.) gönderilir.
• Push servisi, mesajı kullanıcının cihazına yönlendirir.

Teknik Özet:

Web Sunucusu -> Şifrelenmiş Mesaj + VAPID -> Push Servisi (FCM/APNs) -> Kullanıcı Cihazı.

Bildirim Gönderme (Örnek Kod):

async function sendPushNotification(subscription, payload) {
  try {
    // Abonelik nesnesi ve şifrelenmiş payload ile bildirimi gönder
    await webPush.sendNotification(subscription, JSON.stringify(payload));
    console.log('Bildirim başarıyla gönderildi.');
  } catch (error) {
    console.error('Bildirim gönderme hatası:', error);

    // Abonelik geçersizse veritabanından sil
    if (error.statusCode === 410) {
      await deleteExpiredSubscription(subscription);
    }
  }
}

// Örnek Kullanım
const subscription = {
  endpoint: 'https://fcm.googleapis.com/fcm/send/abc123',
  keys: {
    p256dh: 'BGz1xM...',
    auth: 'k9e0B...'
  }
};

const payload = {
  title: 'Yeni Mesajınız Var!',
  body: 'Özel teklifimizi kaçırmayın 🎉',
  icon: '/notification-icon.png',
  data: {
    url: 'https://siteniz.com/kampanya' // Tıklama sonrası yönlendirme
  }
};

// Bildirimi tetikle
sendPushNotification(subscription, payload);

3-) Service Worker ile Bildirim Gösterme

Süreç:

3.1- Push Event Yakalama:

• Kullanıcının cihazındaki service worker, push event’ını dinler ve gelen mesajı işler.
• Mesaj, abonelik sırasında oluşturulan özel anahtarla (private key) şifresi çözülür.

3.2- Bildirim Oluşturma:

• Service worker, showNotification() metoduyla işletim sistemi veya tarayıcı bildirim sistemini tetikler.
• Kullanıcı bildirime tıklarsa, notificationclick event’ı ile özel aksiyonlar (sayfaya yönlendirme, vs.) çalıştırılabilir.

Teknik Özet:

Push Servisi -> Servis Worker (Şifre Çözme) -> showNotification() -> OS/Tarayıcı Bildirimi.

Service Worker Bildirim Gösterme (Örnek Kod):

self.addEventListener('push', (event) => {
  const payload = event.data?.json();
  event.waitUntil(
    self.registration.showNotification(payload.title, {
      body: payload.body,
      icon: '/icon.png'
    })
  );
});

Öneriler ve Kritik Detaylar

1. HTTPS Zorunluluğu: Web Push API, sadece HTTPS üzerinden çalışır. Geliştirme ortamında localhost istisnadır.
2. Abonelik Yönetimi: Kullanıcıların abonelik durumunu takip edin (örn. tarayıcı değişikliklerinde yeniden kayıt).
3. Şifreleme ve Güvenlik: Mesaj içeriği şifrelenmelidir. Anahtarlar sunucuda güvenli saklanmalıdır.
4. Analitik Entegrasyonu: Bildirim açılma oranlarını (open rate) ölçmek için Google Analytics veya benzer araçlarla entegre edin.
5. Çapraz Tarayıcı Desteği: Firefox ve Safari’de farklı push servisleri kullanılabildiğini unutmayın (örn. Apple APNs için ek konfigürasyon gerekir).
6. Unsubscribe Senaryoları: Kullanıcı bildirimi reddederse, PushSubscription.unsubscribe() ile abonelik sonlandırılmalıdır.
7. GDPR: Web Push Notification’lar, kullanıcıların cihaz bilgilerini ve tercihlerini sakladığı için GDPR kapsamında dikkatli yönetilmelidir.

🌟 Web Push Notification Uygulaması Yapalım 🌟

Ön Gereksinimler:

• HTTPS: Web Push Notification’lar sadece HTTPS üzerinde çalışır (localhost hariç).
• Web Server: Basit bir web sunucusu (örneğin Express.js).
• VAPID Keys: Push bildirimleri için anahtar çifti.

Adım 1: VAPID Anahtarlarını Oluştur

web-push paketi ile terminalde Vapid keys oluşturabilirsiniz. Alternatif olarak https://web-push-codelab.glitch.me/ sitesinden de anahtarları üretebilirsiniz.

npm install -g web-push
web-push generate-vapid-keys

Çıktıdaki publicKey ve privateKey değerlerini kaydedin (backend’de kullanılacak).

Adım 2: Client Tarafı (Frontend)

HTML (public/index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Web Push Örneği</title>
</head>
<body>
  <button onclick="subscribeToPush()">Bildirimleri Etkinleştir</button>
  <script src="client.js"></script>
</body>
</html>

JavaScript (public/client.js):

// Service Worker'ı kaydet
async function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    try {
      const registration = await navigator.serviceWorker.register('/service-worker.js');
      return registration;
    } catch (error) {
      console.error('Service Worker kaydı başarısız:', error);
    }
  }
}

// Push bildirimlerine abone ol
async function subscribeToPush() {
  const registration = await registerServiceWorker();
  const publicKey = 'PASTE_YOUR_VAPID_PUBLIC_KEY_HERE'; // VAPID Public Key

  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicKey)
  });

  // Abonelik bilgisini backend'e gönder (örneğin fetch API ile)
  await fetch('/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });

  console.log('Abone olundu!');
}

// VAPID Public Key'i Uint8Array'e çevirme
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = atob(base64);
  return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
}

Adım 3: Service Worker:

(public/service-worker.js):

// Bildirimleri dinle
self.addEventListener('push', (event) => {
  const data = event.data.json();
  const title = data.title || 'Yeni Bildirim';
  const options = {
    body: data.body || 'Bu bir test bildirimidir.',
    icon: '/icon.png', // İsteğe bağlı
    badge: '/badge.png' // İsteğe bağlı
  };

  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

// Bildirim tıklamasını dinle
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow('https://example.com'));
});

Adım 4: Backend (Node.js)

Kurulum:

npm install express web-push cors

Kod (server.js):

const express = require('express');
const webPush = require('web-push');
const cors = require('cors');
const app = express();

// Middleware
app.use(cors());
app.use(express.json());

app.use(express.static('public')); // "public" klasöründeki dosyaları sunar

// VAPID Anahtarları
const vapidKeys = {
  publicKey: 'PASTE_YOUR_VAPID_PUBLIC_KEY_HERE',
  privateKey: 'PASTE_YOUR_VAPID_PRIVATE_KEY_HERE'
};

webPush.setVapidDetails(
  'mailto: your-email@example.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

// Abonelikleri saklamak için örnek bir dizi (gerçek projede DB kullanın)
let subscriptions = [];

// Client'tan abonelik isteği
app.post('/subscribe', (req, res) => {
  subscriptions.push(req.body);
  res.status(201).json({ message: 'Abonelik başarılı!' });
});

// Bildirim gönderme endpoint'i
app.post('/send-notification', (req, res) => {
  const notificationPayload = {
    title: req.body.title || 'Merhaba!',
    body: req.body.body || 'Bu bir test bildirimidir.'
  };

  // Tüm abonelere bildirim gönder
  subscriptions.forEach(subscription => {
    webPush.sendNotification(subscription, JSON.stringify(notificationPayload))
      .catch(error => console.error('Bildirim gönderilemedi:', error));
  });

  res.status(200).json({ message: 'Bildirimler gönderildi!' });
});

// Sunucuyu başlat
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Sunucu http://localhost:${PORT} adresinde çalışıyor.`);
});

Adım 5: Test Etme

• Sunucuyu başlat: node server.js
• Tarayıcıda [https://localhost:3000](https://localhost:3000) (HTTPS gereklidir, localhost’ta çalışır).
• “Bildirimleri Etkinleştir” butonuna tıkla.
• Postman veya curl ile bildirim gönder:

curl -X POST http://localhost:3000/send-notification -H "Content-Type: application/json" -d '{"title": "Başlık", "body": "İçerik"}'

Web Push Bildirimlerinin Avantajları

Web Push Bildirimleri, kullanıcı etkileşimini artıran etkili bir araçtır:

• Yüksek Erişilebilirlik: Site kapalıyken bile bildirim alınabilir.
• Düşük Maliyet: E-posta pazarlamasından daha ekonomik.
• Yüksek Etkileşim: E-postalara göre daha fazla açılma ve tıklanma.
• Kişiselleştirme: Kullanıcı davranışlarına göre özelleştirilebilir.
• Anında İletişim: Hızlı güncelleme ve promosyon bildirimleri.
• Trafik Artışı: Kullanıcıları siteye geri çeker.
• Çapraz Platform: Masaüstü ve mobil uyumlu.
• Kolay Entegrasyon: Mevcut web uygulamalarına hızlı entegrasyon.

Bu özellikler, Web Push Notification’ları modern web stratejilerinin önemli bir parçası yapar.

Dezavantajları ve Dikkat Edilmesi Gereken Noktalar

• Kullanıcı İzni: Açık izin gereklidir, bazı kullanıcılar reddedebilir.
• Aşırı Kullanım: Sık veya alakasız bildirimler kullanıcıları rahatsız edebilir.
• Tarayıcı Uyumluluğu: Tüm tarayıcılar desteklemeyebilir.
• Güvenlik: Spam veya phishing için kötüye kullanılabilir.
• Teknik Zorluklar: Doğru uygulama teknik bilgi gerektirir.
• İçerik Sınırlamaları: Kısa ve öz olmalıdır, detaylı mesajlar zor olabilir.
• Kullanıcı Kontrolü: Bildirimler kolayca kapatılabilir.

Stratejik ve düşünceli kullanım, bu dezavantajları en aza indirebilir.

Özet

Web Push Bildirimleri, kullanıcılar ve işletmeler arasında anlık iletişim sağlayan etkili bir araçtır.

Temel Noktalar:

• Kullanıcı Etkileşimi: Trafik artırma ve geri dönüşümleri teşvik etmede kullanışlıdır.
• Doğru Kullanım: Kişiselleştirildiğinde kullanıcı deneyimini zenginleştirir ve marka bağlılığını güçlendirir.
• Riskler: Sık veya ilgisiz bildirimler kullanıcıları rahatsız ederek olumsuz etki yaratabilir.
• Gelecek: Yapay zeka ile daha akıllı, kişiye özel ve interaktif hale gelmesi bekleniyor.

Dengeli ve stratejik kullanıldığında, hem işletmeler hem de kullanıcılar için değerli bir iletişim kanalıdır. Teknoloji ilerledikçe daha kullanıcı dostu ve hedef odaklı olacaktır.

Kaynak: https://web.dev/articles/push-notifications-overview

web push notifications service workers notification api push server subscription chrome progressive web apps