Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys

Kayce Basques

Bu codelab'i takip etmek için ikinci bir sekmede bu Glitch'i açın.

Bu codelab'de, push bildirimi istemcisinin nasıl oluşturulacağı adım adım açıklanmaktadır. Codelab'in sonunda, aşağıdakileri yapabilen bir müşteriniz olacak:

• Kullanıcıyı push bildirimlerine abone eder.
• Push mesajlarını alır ve bildirim olarak gösterir.
• Kullanıcının push bildirimlerinin aboneliğini iptal eder.

Bu kod laboratuvarı, yaparak öğrenmenize yardımcı olmaya odaklanır ve kavramlardan çok bahsetmez. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimleri nasıl çalışır? başlıklı makaleyi inceleyin.

Bu codelab'in sunucu kodu zaten tamamlandı. Bu codelab'de yalnızca istemciyi uygulayacaksınız. Push bildirim sunucusunun nasıl uygulanacağını öğrenmek için Codelab: Push bildirim sunucusu oluşturma başlıklı makaleyi inceleyin.

Kodun tamamını görmek için push-notifications-client-codelab-complete (kaynak) dosyasını inceleyin.

Tarayıcı uyumluluğu

Bu codelab'in aşağıdaki işletim sistemi ve tarayıcı kombinasyonlarıyla çalıştığı bilinmektedir:

• Windows: Chrome, Edge
• macOS: Chrome, Firefox
• Android: Chrome, Firefox

Bu kod laboratuvarının aşağıdaki işletim sistemleriyle (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışmadığı bilinmektedir:

• macOS: Brave, Edge, Safari
• iOS

Kurulum

Kodun düzenlenebilir bir kopyasını alma

Bu talimatların sağ tarafında gördüğünüz kod düzenleyici, bu kod laboratuvarının tamamında Glitch kullanıcı arayüzü olarak adlandırılacaktır.

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

Chrome gizli modunda veya misafir penceresindeyseniz codelab'i tamamlarken sorun yaşayabilirsiniz. Bunun yerine oturum açmış bir profil kullanmayı deneyin.

Kimlik doğrulamayı ayarlama

Push bildirimlerini çalıştırabilmeniz için sunucunuzu ve istemcinizi kimlik doğrulama anahtarlarıyla ayarlamanız gerekir. Nedenini öğrenmek için Web push protokolü isteklerinizi imzalama başlıklı makaleyi inceleyin.

1. Glitch kullanıcı arayüzünde Araçlar'ı ve ardından Terminal'i tıklayarak Glitch Terminal'i açın.
2. Glitch Terminal'de npx web-push generate-vapid-keys komutunu çalıştırın. Özel anahtar ve ortak anahtar değerlerini kopyalayın.
3. Glitch kullanıcı arayüzünde .env'ü açın ve VAPID_PUBLIC_KEY ile VAPID_PRIVATE_KEY öğelerini güncelleyin. VAPID_SUBJECT değerini mailto:[e-mail] olarak ayarlayın. Bu değerlerin tümü çift tırnak içine alınmalıdır. Güncellemelerinizi yaptıktan sonra .env dosyanız şu şekilde görünmelidir:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Glitch Terminal'i kapatın.

Ortam değişkeni değerleri (.env içindeki öğeler), tek bir Glitch projesine özgüdür. Projenizi remiks olarak düzenlerseniz .env içindeki değerler kopyalanmaz.

1. public/index.js adlı kişiyi aç.
2. VAPID_PUBLIC_KEY_VALUE_HERE yerine ortak anahtarınızın değerini yazın.

Hizmet çalışanı kaydetme

Müşterinizin, bildirimleri alıp görüntülemek için bir hizmet işçisine ihtiyacı olacaktır. Hizmet işçisini mümkün olduğunca erken kaydettirmeniz önerilir. Daha fazla bilgi için İtilen iletileri bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

1. // TODO add startup logic here yorumunu aşağıdaki kodla değiştirin:

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.

Anahtar terim: Az önce açtığınız sekmeye bu kod laboratuvarının tamamında uygulama sekmesi adı verilecektir.

1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
2. Konsol sekmesini tıklayın. Service worker was registered. mesajının Konsola kaydedildiğini görürsünüz.

Not: Önceki talimatlarda Google Chrome ve Chrome Geliştirici Araçları kullandığınız varsayılmıştır.

Push bildirimi izni isteme

Sayfa yüklenirken push bildirimi göndermek için hiçbir zaman izin istememelisiniz. Bunun yerine kullanıcı arayüzünüzde kullanıcıya push bildirimi almak isteyip istemediğini sormalısınız. Kullanıcılar açıkça onayladıktan sonra (ör. bir düğmeyi tıklayarak) tarayıcıdan push bildirimi izni almayla ilgili resmi süreci başlatabilirsiniz.

1. Glitch kullanıcı arayüzünde, kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.
2. public/index.js dosyasında subscribeButtonHandler() içindeki // TODO yorumunu aşağıdaki kodla değiştirin:

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

1. Uygulama sekmesine geri dönün ve Push'e abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz, web sitesinin size push bildirimi göndermesine izin vermek isteyip istemediğinizi soracaktır. İzin ver'i (veya tarayıcınızın/işletim sisteminizin kullandığı eşdeğer ifadeyi) tıklayın. Konsolda, isteğin kabul edilip edilmediğini belirten bir mesaj görürsünüz.

Gizli veya misafir penceresindeyseniz tarayıcınız isteği otomatik olarak reddedebilir. İsteğin otomatik olarak engellendiğini belirten tarayıcı kullanıcı arayüzlerine dikkat edin.

Push bildirimlerine abone olma

Abonelik süreci, tarayıcı tedarikçisi tarafından kontrol edilen ve push hizmeti olarak adlandırılan bir web hizmetiyle etkileşimi içerir. Push bildirimi aboneliği bilgilerini aldıktan sonra bir sunucuya göndermeniz ve sunucunun bu bilgileri uzun süreli bir veritabanında depolamasını sağlamanız gerekir. Abonelik süreci hakkında daha fazla bilgi için Müşteriyi push bildirimlerine abone etme başlıklı makaleyi inceleyin.

1. Vurgulanan aşağıdaki kodu subscribeButtonHandler() dosyasına ekleyin:

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly seçeneği true olmalıdır. Kullanıcıya görünür bildirimler göstermeden mesaj yayınlamak (sessiz yayınlama) bir gün mümkün olabilir ancak tarayıcılar şu anda gizlilik endişeleri nedeniyle bu özelliğe izin vermez.

applicationServerKey değeri, bir base64 dizesini Uint8Array'a dönüştüren bir yardımcı program işlevini kullanır. Bu değer, sunucunuz ile push hizmeti arasında kimlik doğrulama için kullanılır.

Push bildirimlerinin aboneliğinden çıkma

Kullanıcı push bildirimlerine abone olduktan sonra, kullanıcının fikrini değiştirip artık push bildirimi almak istememesi ihtimaline karşı kullanıcı arayüzünüzde aboneliği iptal etme seçeneği sunulması gerekir.

1. unsubscribeButtonHandler() içindeki // TODO yorumunu aşağıdaki kodla değiştirin:

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Push mesajı alma ve bildirim olarak görüntüleme

Daha önce de belirtildiği gibi, sunucunuzdan istemciye gönderilen mesajların alınması ve gösterilmesi için bir hizmet çalışanına ihtiyacınız vardır. Daha fazla bilgi için İtilen iletileri bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

1. public/service-worker.js dosyasını açın ve hizmet çalışanının push olay işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

1. Uygulama sekmesine geri dönün.
2. Beni bilgilendir'i tıklayın. Bir push bildirimi alırsınız.
3. Uygulama sekmenizin URL'sini diğer tarayıcılarda (veya başka cihazlarda) açmayı, abonelik iş akışını tamamlamayı ve ardından Tümünü bilgilendir'i tıklamayı deneyin. Abone olduğunuz tüm tarayıcılarda aynı push bildirimini alırsınız. Çalıştığı veya çalışmadığı bilinen tarayıcı/işletim sistemi kombinasyonlarının listesini görmek için Tarayıcı uyumluluğu başlıklı makaleyi inceleyin.

Bildirimi birçok şekilde özelleştirebilirsiniz. Daha fazla bilgi edinmek için ServiceWorkerRegistration.showNotification() parametrelerine bakın.

Hizmet çalışanınızın install dinleyicisinde self.skipWaiting() çağrısının yapılması önemlidir. Açıklama için Bekleme aşamasını atlama bölümüne bakın. Aksi takdirde, hizmet çalışanınızda yaptığınız kod değişiklikleri hemen geçerli olmaz. İhtiyaçlarınıza bağlı olarak bu özelliği kendi web sitenizde kullanmak isteyebilirsiniz veya istemeyebilirsiniz. Her iki durumda da bu özelliğin etkisini anlamanız önemlidir.

Kullanıcı bir bildirimi tıkladığında bir URL'yi açma

Gerçek hayatta, bildirimi muhtemelen kullanıcınızla yeniden etkileşime geçmek ve kullanıcınızı sitenizi ziyaret etmeye teşvik etmek için kullanırsınız. Bunun için hizmet çalışanınızı biraz daha yapılandırmanız gerekir.

1. Hizmet çalışanının notificationclick etkinlik işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

1. Uygulama sekmesine geri dönün, kendinize başka bir bildirim gönderin ve ardından bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp https://web.dev dosyasını yükler.

Sonraki adımlar

• Bildirimleri özelleştirebileceğiniz tüm farklı yolları keşfetmek için ServiceWorkerRegistration.showNotification() bölümüne göz atın.
• Push bildirimlerin işleyiş şekli hakkında daha ayrıntılı bilgi edinmek için Push bildirimlerine genel bakış başlıklı makaleyi okuyun.
• Abonelikleri yöneten ve web push protokolü isteklerinin gönderilmesini sağlayan bir sunucu oluşturmayı öğrenmek için Codelab: Push bildirimi sunucusu oluşturma başlıklı makaleyi inceleyin.
• Bildirimleri özelleştirebileceğiniz tüm yolları test etmek için Bildirim Oluşturucu'yu deneyin.