Frontend Academy · Ders

Anlık Bildirimler

İzin istemeyi, Push API ile anlık bildirimlere abone olmayı, Service Worker içinde iletileri almayı ve showNotification ile bildirim görüntülemeyi öğrenin.

Anlık Bildirimler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Anlık Bildirimler Neden Kullanılır?

Anlık bildirimler, uygulama açık değilken kullanıcıların yeniden etkileşime geçmesini sağlar — mesaj uyarıları, haber güncellemeleri ve terk edilmiş sepet hatırlatıcıları gibi. Hizmet çalışanı tarafından desteklenir; bu nedenle sayfa kapalıyken bile çalışır.

Anlık Bildirim API'si + Bildirimler API'si

İki tarayıcı API'si birlikte çalışır. Anlık Bildirim API'si, anlık bildirim aboneliği aracılığıyla bir sunucudan iletilen mesajları alır. Bildirimler API'si, mesajı kullanıcıya gösterir.

İzin İsteme

Abone olmadan önce kullanıcıdan izin isteyin — bunu yalnızca açık bir kullanıcı eylemine (düğme tıklaması) yanıt olarak yapın, sayfa yüklenirken yapmayın.

async function enableNotifications() {
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    alert('Notifications denied');
    return;
  }
  // proceed to subscribe...
}

Anlık Bildirim Aboneliği

Etkin hizmet çalışanı kaydı üzerinden abone olun. Sunucunun VAPID genel anahtarı aboneliğin kimliğini doğrular.

async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.subscribe({
    userVisibleOnly: true, // required: every push must show a notification
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send sub to your server:
  await fetch('/api/save-subscription', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(sub)
  });
}

VAPID Anahtarları

VAPID (Gönüllü Uygulama Sunucusu Tanımlaması) anahtarları, sunucunuzu anlık bildirim hizmetlerine (FCM, Mozilla vb.) tanıtır. Bir kez oluşturun ve özel anahtarı sunucunuzda saklayın.

# Generate VAPID keys with web-push CLI:
npx web-push generate-vapid-keys

# Output:
# Public Key: BJ...
# Private Key: ka...

Sunucu Taraflı Anlık Bildirim

Saklanan bir aboneliğe anlık bildirim göndermek için web-push npm kütüphanesini kullanın.

import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:you@example.com',
  process.env.VAPID_PUBLIC,
  process.env.VAPID_PRIVATE
);

await webpush.sendNotification(savedSubscription, JSON.stringify({
  title: 'New message',
  body: 'Alice sent you a message',
  url: '/inbox/123'
}));

Hizmet Çalışanında Anlık Bildirimleri İşleme

SW, anlık bildirim olayını alır ve bir bildirim gösterir.

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || 'Notification', {
      body: data.body,
      icon: '/icons/192.png',
      badge: '/icons/badge.png',
      data: { url: data.url }
    })
  );
});

Bildirim Tıklama İşleyicisi

Kullanıcı bir bildirime tıkladığında uygulamayı açın veya uygulamaya odaklanın.

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const url = event.notification.data.url || '/';
  event.waitUntil(
    clients.matchAll({ type: 'window' }).then(clientList => {
      for (const client of clientList) {
        if (client.url.endsWith(url) && 'focus' in client) return client.focus();
      }
      return clients.openWindow(url);
    })
  );
});

Bildirim Seçenekleri

Özelleştirebileceğiniz seçenekler: simge, rozet (küçük bildirim alanı simgesi), görsel (büyük), eylemler (düğmeler), etiket (aynı etikete sahip eski bildirimleri yenisiyle değiştirir), requireInteraction (kapatılana kadar kalır) ve sessiz.

self.registration.showNotification('Message', {
  body: 'Alice sent you a photo',
  icon: '/icons/192.png',
  image: '/images/alice-photo.jpg',
  actions: [
    { action: 'view', title: 'View' },
    { action: 'reply', title: 'Reply' }
  ],
  tag: 'message-from-alice', // replaces earlier 'message-from-alice'
  requireInteraction: false
});

Abonelikten Çıkma

Kullanıcıların abonelikten çıkmasına izin verin — pushSubscription.unsubscribe() çağrısını yapın ve aboneliği sunucunuzdan kaldırın.

async function disablePush() {
  const reg = await navigator.serviceWorker.ready;
  const sub = await reg.pushManager.getSubscription();
  if (sub) {
    await sub.unsubscribe();
    await fetch('/api/delete-subscription', {
      method: 'POST',
      body: JSON.stringify({ endpoint: sub.endpoint })
    });
  }
}

iOS Desteği

iOS 16.4 ve sonraki sürümler Web anlık bildirimlerini destekler, ancak yalnızca Ana Ekrana kurulmuş PWA'lar için. iOS 16.4 öncesi cihazlar ve iPhone'daki Safari web sayfaları Web anlık bildirimlerini hiç desteklemez.

En İyi Uygulamalar

1) İzni yalnızca açık bir kullanıcı eyleminden sonra isteyin. 2) Anlamlı ve seyrek bildirimler gönderin. 3) Bir anlık bildirim olayı gerçekleştiğinde her zaman bir bildirim gösterin (göstermezseniz tarayıcılar izni geri alabilir). 4) Kolay bir abonelikten çıkma seçeneği sunun. 5) Üç anlık bildirim hizmetinin tümüyle (FCM, Mozilla, WindowsPush) sınama yapın.

Yaygın Tuzaklar

Anlık bildirim şu durumlarda sessizce başarısız olur: userVisibleOnly false değerindeyse (Chrome true olmasını gerektirir), VAPID anahtarları eşleşmiyorsa, aboneliğin süresi dolmuşsa (yeniden abone olun) veya anlık bildirim olayı sırasında bildirim gösterilmezse (tarayıcı aboneliği iptal eder).

Hızlı Kontrol

Her anlık bildirim mesajının görünür bir bildirimle sonuçlanması ( userVisibleOnly: true ile) neden zorunludur?

Özet: Anlık Bildirimler

İzni yalnızca kullanıcı eylemiyle isteyin. VAPID genel anahtarıyla reg.pushManager.subscribe üzerinden abone olun. Sunucu, göndermek için web-push kütüphanesini kullanır. SW anlık bildirim olayı showNotification çağrısını yapar. notificationclick uygulamanızı açar veya uygulamanıza odaklanır. Simgeyi, rozeti, görseli, eylemleri ve etiketi özelleştirin. Her zaman bir bildirim gösterin (userVisibleOnly: true gereklidir). iOS 16.4 ve sonraki sürümler destekler; yalnızca PWA olarak kurulmuş uygulamalarda kullanılabilir.

Sıkça Sorulan Sorular

“Anlık Bildirimler” dersi ücretsiz mi?

Evet — “Anlık Bildirimler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Anlık Bildirimler” dersinde ne öğreneceğim?

İzin istemeyi, Push API ile anlık bildirimlere abone olmayı, Service Worker içinde iletileri almayı ve showNotification ile bildirim görüntülemeyi öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Anlık Bildirimler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Frontend Academy Sayfasına Dön