Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Bu codelab'de, adım adım push bildirimi istemcisi oluşturma işlemi açıklanmaktadır. Bu codelab'in sonunda, aşağıdaki özelliklere sahip bir istemciniz olacak:

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

Bu codelab, yaparak öğrenmenize yardımcı olmaya odaklanmıştır ve kavramlardan pek 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 tamamlanmış. Bu codelab'de yalnızca istemciyi uygulayacaksınız. Push bildirimi sunucusunu nasıl uygulayacağınızı öğrenmek için Codelab: Build a push notification server (Codelab: Push bildirimi sunucusu oluşturma) başlıklı codelab'e 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ışmadığı bilinmektedir:

  • macOS: Brave, Edge, Safari
  • iOS

Kurulum

Kodun düzenlenebilir bir kopyasını alma

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek İçin Remix'i tıklayın.

Kimlik doğrulama ayarlama

Anlık bildirimlerin çalışması 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. Genellikle sırları buna benzer bir .env dosyasında saklarsınız.

VAPID_PUBLIC_KEY="BKiwTvD9HA…" VAPID_PRIVATE_KEY="4mXG9jBUaU…" VAPID_SUBJECT="mailto:[email protected]"
  • public/index.js adlı kişiyi aç.
  • VAPID_PUBLIC_KEY_VALUE_HERE yerine ortak anahtarınızın değerini girin.

Hizmet çalışanı kaydetme

Müşterinizin bildirimleri alıp görüntülemek için sonunda bir hizmet çalışanı olması gerekir. Service worker'ı olabildiğince erken kaydetmeniz önerilir. Daha fazla bilgi için Anlık iletilen mesajları bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

  • // 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);
  • Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
  • Konsol sekmesini tıklayın. Konsola Service worker was registered. mesajının kaydedildiğini görürsünüz.

Push bildirimi izni isteme

Sayfa yüklemede push bildirimi gönderme izni istememelisiniz. Bunun yerine kullanıcı arayüzünüzde, kullanıcıya push bildirimi almak isteyip istemediği sorulmalıdır. Kullanıcılar açıkça onayladıktan sonra (ör. bir düğmeyi tıklayarak) tarayıcıdan anlık bildirim izni alma sürecini başlatabilirsiniz.

  • public/index.js bölümünde, 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.'); }
  • Uygulama sekmesine geri dönün ve Anlık bildirimlere 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 sorabilir. İ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.

Push bildirimlerine abone olma

Abonelik sürecinde, tarayıcı satıcısı tarafından kontrol edilen ve push hizmeti olarak adlandırılan bir web hizmetiyle etkileşim kurulur. Anlık bildirim aboneliği bilgilerini aldıktan sonra bunları bir sunucuya göndermeniz ve sunucunun bu bilgileri uzun vadeli olarak bir veritabanında saklaması gerekir. Abonelik süreci hakkında daha fazla bilgi için İstemciyi push bildirimlerine abone etme başlıklı makaleyi inceleyin.

  • Aşağıdaki vurgulanmış 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ı tarafından görülebilen bildirimler gösterilmeden mesaj göndermek (sessiz push bildirimleri) bir gün mümkün olabilir ancak tarayıcılar şu anda gizlilik endişeleri nedeniyle bu özelliğe izin vermemektedir.

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

Push bildirimleri aboneliğinden çıkma

Bir kullanıcı anlık bildirimlere abone olduktan sonra fikrini değiştirip anlık bildirim almak istememesi durumunda kullanıcı arayüzünüzde aboneliği iptal etme seçeneği sunulmalıdır.

  • 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 iletilerin alınmasını ve görüntülenmesini sağlamak için bir hizmet çalışanı gerekir. Daha fazla bilgi için Anlık iletilen mesajları bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

  • public/service-worker.js bağlantısı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 = 'logo.png'; const options = {   body: data.options.body,   icon: image } self.registration.showNotification(   data.title,    options );
  • Uygulama sekmesine geri dönün.
  • Beni bilgilendir'i tıklayın. Push bildirimi alırsınız.
  • Uygulama sekmenizin URL'sini diğer tarayıcılarda (hatta diğer cihazlarda) açmayı, abonelik iş akışını tamamlamayı ve ardından Tümüne bildir'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 bölümüne geri dönün.

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

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

Gerçek hayatta, bildirimi kullanıcınızla yeniden etkileşim kurmak ve onu 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.

  • Service worker'ın notificationclick event işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:
// TODO event.notification.close(); event.waitUntil(self.clients.openWindow('https://web.dev'));
  • Uygulama sekmesine geri dönün, kendinize başka bir bildirim gönderin ve bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp https://web.dev adresini yüklemelidir.

Sonraki adımlar