Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys

Kayce Baskçalar

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

Bu codelab'de push bildirimi istemcisinin nasıl oluşturulacağını adım adım gösterilmektedir. Codelab'in sonunda şu işlemleri yapan bir müşteriniz olacak:

• Kullanıcının push bildirimleri için abone olmasını sağlar.
• Push mesajlarını alır ve bildirim olarak görüntüler.
• Kullanıcının push bildirimleri aboneliğini iptal eder.

Bu codelab, yaparak öğrenmenize yardımcı olmaya odaklanmıştır ve kavramlardan pek fazla bahsetmez. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimlerinin işleyiş şekli nasıldır? başlıklı makaleye göz atın.

Bu codelab'in sunucu kodu zaten tamamlanmış. İstemciyi yalnızca bu codelab'de uygulayacaksınız. Push bildirim sunucusunun nasıl uygulanacağını öğrenmek için Codelab: Push bildirimi sunucusu oluşturma sayfasına göz atın.

Kodun tamamını görmek için push-notifications-client-codelab-complete (kaynak) bölümüne göz atın.

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 codelab'in aşağıdaki işletim sistemleriyle (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışamadığı bilinmektedir:

• macOS: Brave, Edge, Safari
• iOS

Kurulum

Kodun düzenlenebilir bir kopyasını alma

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

1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

Chrome gizli penceresinde veya misafir penceresindeyseniz codelab'i tamamlama konusunda sorun yaşayabilirsiniz. Bunun yerine, oturum açılmış bir profil kullanabilirsiniz.

Kimlik doğrulamayı ayarlayın

Push bildirimlerini çalıştırabilmek için önce sunucunuzu ve istemcinizi kimlik doğrulama anahtarlarıyla kurmanız gerekir. Nedenini öğrenmek için Web push protokolü isteklerinizi imzalama bölümüne bakın.

1. Glitch Terminal'i açmak için Glitch kullanıcı arayüzünde Araçlar'ı ve Terminal'i tıklayı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 uygulamasını açıp VAPID_PUBLIC_KEY ve 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 şuna benzer olacaktır:

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

1. Arıza Terminali'ni kapatın.

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

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

Hizmet çalışanı kaydetme

İstemcinizin zamanla bildirim alması ve görüntülemesi için bir Service Worker'a ihtiyacı olacaktır. Service Worker'ı mümkün olduğunca erken kaydetmeniz önerilir. Daha fazla bilgi için Aktarılan mesajları bildirim olarak alma ve görüntüleme başlıklı makaleye bakın.

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öster'e, ardından Tam Ekran'a basın.

Anahtar terim: Bu codelab'de yeni açtığınız sekme uygulama sekmesi olarak adlandırılacaktır.

1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Konsol sekmesini tıklayın. Console'a Service worker was registered. iletisinin kaydedildiğini göreceksiniz.

Not: Önceki talimatta, Google Chrome ve Chrome Geliştirici Araçları'nı kullandığınız varsayılır.

Push bildirimi izni iste

Sayfa yüklendiğinde push bildirimleri göndermek için asla izin istememelisiniz. Bunun yerine, kullanıcı arayüzünüz kullanıcıya push bildirimleri almak isteyip istemediğini sormalıdır. Kullanıcılar açıkça onayladıktan sonra (örneğin, bir düğmenin tıklanmasıyla) tarayıcıdan push bildirimi izni almak için resmi süreci başlatabilirsiniz.

1. Kodunuza dönmek için Glitch kullanıcı arayüzünde Kaynağı Görüntüle'yi tıklayın.
2. public/index.js yerel ayarında subscribeButtonHandler() içindeki // TODO yorumunu şu 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 için abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz büyük olasılıkla, web sitesinin size push bildirimleri göndermesine izin vermek isteyip istemediğinizi soracaktır. İzin ver'i (veya tarayıcınızın/OS'nizin kullandığı eşdeğer ifadeyi) tıklayın. Console'da isteğin kabul edildiğini veya reddedildiğini belirten bir mesaj görürsünüz.

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

Push bildirimlerine abone ol

Abonelik işlemi, push hizmeti adı verilen tarayıcı satıcısı tarafından kontrol edilen bir web hizmetiyle etkileşim kurmayı içerir. Push bildirimi abonelik bilgilerini aldıktan sonra bunları bir sunucuya göndermeniz ve sunucunun bir veritabanında uzun süre boyunca depolamasını sağlamanız gerekir. Abonelik süreci hakkında daha fazla bilgi için İstemcinin push bildirimlerine abone olma bölümüne bakın.

1. Şu vurgulanan kodu subscribeButtonHandler() hesabı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. Bir gün, kullanıcının görebildiği bildirimler (sessiz pushlar) olmadan mesaj göndermek mümkün olabilir ancak tarayıcılar gizlilik endişeleri nedeniyle şu anda bu özelliğe izin vermemektedir.

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

Push bildirimleri aboneliğinden çıkma

Kullanıcı push bildirimlerine abone olduktan sonra, kullanıcının fikrini değiştirip artık push bildirimleri almak istememesi halinde kullanıcının e-posta listesinden çıkması için bir yöntem sunmalıdır.

1. unsubscribeButtonHandler() etiketindeki // 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 belirtildiği gibi, sunucunuzdan istemciye aktarılan mesajların alınması ve görüntülenmesi için bir hizmet çalışanına ihtiyacınız vardır. Daha fazla ayrıntı için Aktarılan iletileri bildirim olarak alma ve görüntüleme başlıklı makaleye bakın.

1. public/service-worker.js uygulamasını açın ve hizmet çalışanının push etkinlik 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. Push bildirimi alırsınız.
3. Diğer tarayıcılarda (ve hatta başka cihazlarda) uygulama sekmenizin URL'sini açmayı, abonelik iş akışını takip etmeyi ve ardından Tümünü bildir'i tıklamayı deneyin. Abone olduğunuz tüm tarayıcılarda aynı push bildirimini alırsınız. Çalışıp çalışmadığı bilinen tarayıcı/işletim sistemi kombinasyonlarının listesini görmek için Tarayıcı uyumluluğu'na tekrar bakın.

Bildirimi pek çok şekilde özelleştirebilirsiniz. Daha fazla bilgi edinmek için ServiceWorkerRegistration.showNotification() parametrelerine göz atın.

Hizmet çalışanınızın install işleyicisindeki self.skipWaiting() çağrısını anlamak önemlidir. Açıklama için Bekleme aşamasını atlama konusuna bakın. Aksi halde, Service Worker'ı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 veya kullanmak istemeyebilirsiniz ancak her iki durumda da etkisini anlamak önemlidir.

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

Gerçek dünyada, bildirimi muhtemelen kullanıcınızla yeniden etkileşim kurmanın ve sitenizi ziyaret etmeye teşvik etmenin bir yolu olarak 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 hizmetini yüklemelidir.

Sonraki adımlar

• Bildirimleri özelleştirmenin tüm farklı yollarını keşfetmek için ServiceWorkerRegistration.showNotification() sayfasına göz atın.
• Push bildirimlerinin işleyişiyle ilgili daha ayrıntılı ve kavramsal bir anlayış için Push bildirimlerine genel bakış bölümünü okuyun.
• Abonelikleri yöneten ve web push protokolü istekleri gönderen bir sunucu oluşturmayı öğrenmek için Codelab: Push bildirimi sunucusu oluşturma bölümüne göz atın.
• Bildirimleri özelleştirebileceğiniz tüm yöntemleri test etmek için Bildirim Oluşturucu'yu deneyin.