Vue PWA'de Push Bildirimleri
Push API, Notification API, VAPID anahtarları, kullanıcıları abone etme ve sunucudan gönderme.
Vue PWA'de Push Bildirimleri, CoddyKit'te ücretsiz bir Vue 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
PWA'da Anlık Bildirimler
Web Push, uygulama kapalıyken bile sunucunuzun kullanıcıya bildirim göndermesini sağlar. Kullanıcının açık iznine dayanan bu yapı; Notification API'sini, Push API'sini ve bir hizmet çalışanını bir araya getirir.
İzin İsteme
Abone olmadan önce izin istemelisiniz. Notification.requestPermission(), "granted", "denied" veya "default" değerlerinden birine çözümlenen bir promise döndürür.
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Kullanıcı Hareketiyle Tetikleme
Tarayıcılar, izin isteminin düğme tıklaması gibi bir kullanıcı eyleminin ardından gerçekleşmesini gerektirir. Sayfa yüklenirken asla izin istemeyin; bu istek yok sayılabilir veya kullanıcıları rahatsız edebilir.
<button @click="enableNotifications">
Enable notifications
</button>Hizmet Çalışanı Kaydını Alma
Push abonelikleri etkin hizmet çalışanı kaydında tutulur. Kaydı almak için navigator.serviceWorker.ready değerini bekleyin.
const registration = await navigator.serviceWorker.ready;applicationServerKey
Push, VAPID anahtarlarını kullanır. Sunucu özel anahtarı tutar; istemci ise Uint8Array'e dönüştürülmüş ortak anahtarla abone olur.
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
Aboneliği kayıt nesnesinin pushManager özelliği üzerinden oluşturun. userVisibleOnly: true değerini ayarlayın ve dönüştürülmüş applicationServerKey değerini iletin.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});userVisibleOnly Neden Kullanılır
userVisibleOnly: true, her push işleminin görünür bir bildirim göstereceğini garanti eder. Tarayıcılar, sessiz arka plan takibini önlemek için bunu gerektirir.
Aboneliği Sunucunuza Gönderme
Abonelik nesnesi, sunucunun ihtiyaç duyduğu uç noktayı ve anahtarları içerir. Daha sonra gönderimlerde kullanmak üzere depolanması için bu nesneyi arka ucunuza POST ile gönderin.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Sunucu Anlık Bildirim Gönderir
Arka ucunuz, depolanan uç noktaya bir yük göndermek için Web Push kitaplığını ve VAPID özel anahtarını kullanır.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Hizmet Çalışanında Anlık Bildirim Alma
Hizmet çalışanı push olayını işler ve bildirimi görüntülemek için showNotification çağrısını yapar.
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});Bildirim Tıklamalarını İşleme
Uygulamayı doğru sayfaya odaklamak veya açmak için tıklamalara notificationclick olayıyla yanıt verin.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Hızlı Kontrol
Push aboneliği oluştururken userVisibleOnly: true neden gereklidir?
Özet
Web Push, bir kullanıcı hareketiyle çağrılan Notification.requestPermission() ile başlar; ardından userVisibleOnly: true ve bir applicationServerKey kullanılarak registration.pushManager.subscribe çağrılır. Aboneliği, yükleri hizmet çalışanının push olayında aldığı ve showNotification ile görüntülediği sunucunuza gönderin.
Sıkça Sorulan Sorular
“Vue PWA'de Push Bildirimleri” dersi ücretsiz mi?
Evet — “Vue PWA'de Push Bildirimleri” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Vue PWA'de Push Bildirimleri” dersinde ne öğreneceğim?
Push API, Notification API, VAPID anahtarları, kullanıcıları abone etme ve sunucudan gönderme. Vue 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.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue 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.
“Vue PWA'de Push Bildirimleri” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue 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
- vite-plugin-pwa Kurulumu
- Service Worker Stratejileri
- Çevrimdışı Destek ve Arka Plan Senkronizasyonu
- Vue PWA'de Push Bildirimleri