Web uygulamalarına push bildirimleri ekleme

1. Genel Bakış

Push mesajları, kullanıcılarınızla yeniden etkileşim kurmanın basit ve etkili bir yoludur. Bu codelab'de, web uygulamanıza push bildirimlerini nasıl ekleyeceğinizi öğreneceksiniz.

Neler öğreneceksiniz?

• Bir kullanıcının push mesajlaşmaya abone olma ve abonelikten çıkma
• Gelen push mesajları nasıl işlenir?
• Bildirim nasıl görüntülenir?
• Bildirim tıklamalarına nasıl yanıt verilir?

Gerekenler

• Chrome 52 veya sonraki sürümler
• Chrome için Web Sunucusu veya kendi web sunucunuz
• Metin düzenleyici
• Temel HTML, CSS, JavaScript ve Chrome Geliştirici Araçları bilgisi
• Örnek kod (Kurulumu yapma bölümüne bakın.)

2. Hazırlanın

Örnek kodu indirin

Bu codelab için örnek kodu almanın iki yolu vardır:

• Git deposunu klonlayın:

git clone https://github.com/GoogleChrome/push-notifications.git

• ZIP dosyasını indirin:

Kaynak kodu indir

Kaynağı ZIP dosyası olarak indirirseniz paketten çıkardığınızda push-notifications-master kök klasörüne sahip olursunuz.

Web sunucusunu yükleme ve doğrulama

Kendi web sunucunuzu serbestçe kullanabilirsiniz ancak bu codelab, Chrome için Web Sunucusu uygulamasıyla uyumlu şekilde çalışacak şekilde tasarlanmıştır. Söz konusu uygulama henüz yüklü değilse, Chrome Web Mağazası'ndan indirebilirsiniz:

Chrome için Web Sunucusu'nu yükleyin

Chrome için Web Sunucusu uygulamasını yükledikten sonra yer işareti çubuğundaki Uygulamalar kısayolunu tıklayın:

Apps penceresinde Web Server simgesini tıklayın:

Sonrasında, yerel web sunucunuzu yapılandırmanıza olanak tanıyan aşağıdaki iletişim kutusunu görürsünüz:

Klasör seç düğmesini tıklayın ve indirdiğiniz push-notifications klasöründen app klasörünü seçin. Bu, iletişim kutusunun Web Sunucusu URL'leri bölümünde gösterilen URL aracılığıyla devam eden çalışmanızı sunmanızı sağlar.

Seçenekler altında, aşağıda gösterildiği gibi index.html'yi otomatik olarak göster seçeneğinin yanındaki kutuyu işaretleyin:

Ardından, Web Sunucusu: BAŞLADI düğmesini sola ve ardından tekrar sağa kaydırarak sunucuyu durdurun ve yeniden başlatın.

Sitenizi web tarayıcınızda ziyaret etmek için Web Sunucusu URL'sini tıklayın. Aşağıdaki gibi bir sayfa görürsünüz ancak sahip olduğunuz sürüm adres olarak 127.0.0.1:8887'yi gösterebilir:

Hizmet çalışanını her zaman güncelleme

Geliştirme sürecinde Service Worker'ınızın her zaman güncel kalmasını ve en son değişiklikleri takip etmesini sağlamanız faydalı olur.

Chrome'da bunu ayarlamak için:

1. Push Codelab sekmesine gidin.
2. Geliştirici Araçları'nı açın: Windows ve Linux'ta Ctrl-Üst Karakter-I, macOS'te Cmd-Option-I.
3. Uygulama panelini seçin, Hizmet Çalışanları sekmesini tıklayın ve Yeniden Yüklediğinde Güncelle onay kutusunu işaretleyin. Bu onay kutusu etkinleştirildiğinde, sayfa her yeniden yüklendiğinde Service Worker zorla güncellenir.

3. Hizmet çalışanı kaydedin

Tamamlanan kod

app dizininizde sw.js adlı boş bir dosyanız olduğuna dikkat edin. Bu dosya, hizmet çalışanınız olur. Şimdilik boş kalabilir. Kodu daha sonra ekleyeceksiniz.

Öncelikle bu dosyayı hizmet çalışanınız olarak kaydetmeniz gerekir.

app/index.html sayfanız scripts/main.js yükleniyor. Hizmet çalışanınızı bu JavaScript dosyasına kaydedersiniz.

Şu kodu scripts/main.js alanına ekleyin:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

Bu kod, tarayıcınız tarafından Service Worker'ların ve push mesajlarının desteklenip desteklenmediğini kontrol eder. Bunlar destekleniyorsa kod, sw.js dosyanızı kaydeder.

Deneyin

Tarayıcıdaki Push Codelab sekmesini yenileyerek değişikliklerinizi kontrol edin.

Chrome Geliştirici Araçları'nda konsolda Service Worker is registered message olup olmadığını kontrol edin. Örneğin:

Uygulama sunucusu anahtarlarını alma

Bu codelab'de çalışmak için uygulama sunucusu anahtarları oluşturmanız gerekir. Bunu tamamlayıcı sitede yapabilirsiniz: web-push-codelab.glitch.me

Burada ortak ve özel anahtar çifti oluşturabilirsiniz.

<Your Public Key> değerini değiştirerek ortak anahtarınızı scripts/main.js hedefine kopyalayın:

const applicationServerPublicKey = '<Your Public Key>';

Önemli: Özel anahtarınızı hiçbir zaman web uygulamanıza koymamalısınız.

4. Başlatma durumu

Tamamlanan kod

Şu anda web uygulamasının Etkinleştir düğmesi devre dışı ve tıklanamıyor. Bunun nedeni, push düğmesini varsayılan olarak devre dışı bırakmak ve push mesajının tarayıcı tarafından desteklendiğini öğrendikten sonra bunu etkinleştirmek için kullanıcının mevcut durumda mesajlaşmaya abone olup olmadığını kontrol edebilmenizdir.

scripts/main.js içinde iki işlev oluşturmanız gerekir:

• initializeUI, kullanıcının şu anda abone olup olmadığını kontrol etmek için
• updateBtn, düğmenizi etkinleştirmek ve kullanıcının abone olup olmadığına bağlı olarak metni değiştirmek için

main.js işlevine şu şekilde bir initializeUI işlevi ekleyin:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Yeni yönteminiz, önceki adımdaki swRegistration yöntemini kullanır, bundan pushManager özelliğini alır ve bununla birlikte getSubscription() özelliğini çağırır.

pushManager getSubscription(), varsa mevcut abonelikle çözümlenen bir taahhüt döndürür. Aksi takdirde null değerini döndürür. Bu sayede kullanıcının zaten abone olup olmadığını kontrol edebilir, isSubscribed değerini ayarlayabilir ve ardından düğmeyi güncellemek için updateBtn() çağrısı yapabilirsiniz.

updateBtn() işlevini main.js öğesine ekleyin:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Bu işlev düğmeyi etkinleştirir ve kullanıcının abone olup olmadığına bağlı olarak düğme metnini değiştirir.

Yapılacak son işlem, hizmet çalışanınız main.js hizmetine kayıtlı olduğunda initializeUI() işlevini çağırmaktır:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

Deneyin

Push Codelab sekmesini yenileyin. Push Mesajlaşmayı Etkinleştir düğmesinin etkin olduğunu (bu düğmeyi tıklayabilirsiniz) ve konsolda User is NOT subscribed simgesini görürsünüz.

Bu codelab'in geri kalanında ilerledikçe abone olduğunuzda veya e-posta listesinden çıktığınızda düğme metninin değiştiğini göreceksiniz.

5. Kullanıcıya abone olma

Tamamlanan kod

Şu anda Push Mesajlaşmayı Etkinleştir düğmeniz pek işe yaramaz. Gelin bu sorunu çözelim.

initializeUI() işlevinde, düğmeniz için bir tıklama işleyici ekleyin:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Kullanıcı düğmeyi tıkladığında, push mesajlaşmaya abone olmak biraz zaman alabileceğinden kullanıcının düğmeyi ikinci kez tıklamasını engellemek için düğmeyi devre dışı bırakırsınız.

Kullanıcı şu anda abone değilse subscribeUser() numaralı telefonu ararsınız. Bunun için aşağıdaki kodu scripts/main.js hedefine yapıştırmanız gerekiyor:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

Şimdi bu kodun ne yaptığını ve kullanıcının push mesajları için nasıl abone olduğunu inceleyelim.

Öncelikle, uygulama sunucusunun Base64 URL için güvenli kodlanmış ortak anahtarını alıp UInt8Array öğesine dönüştürürsünüz, çünkü bu, subscribe() çağrısında beklenen giriştir. urlB64ToUint8Array() işlevi scripts/main.js öğesinin üst kısmındadır.

Değeri dönüştürdükten sonra hizmet çalışanınızın pushManager öğesinde subscribe() yöntemini çağırarak uygulama sunucunuzun ortak anahtarını ve userVisibleOnly: true değerini aktarırsınız.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

userVisibleOnly parametresi, her push mesajı gönderildiğinde bildirim göstereceğinizi garanti eder. Şu anda bu değer gereklidir ve doğru olmalıdır.

subscribe() çağrısı yapıldığında, aşağıdaki adımlardan sonra çözüme ulaştırılacak bir söz verilir:

1. Kullanıcı, bildirimleri görüntüleme izni verdi.
2. Tarayıcı, PushSubscription oluşturmak için gereken verileri almak amacıyla push hizmetine ağ isteği gönderdi.

Bu adımlar başarılı olursa subscribe() taahhüdü, PushSubscription ile çözümlenir. Kullanıcı izin vermezse veya kullanıcının abone olmasıyla ilgili bir sorun olursa taahhüt bir hata ile reddedilir. Bu sayede codelab'inizde aşağıdaki vaat zincirini elde edersiniz:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

Bununla, bir abonelik alıp kullanıcıyı abone olarak kabul edersiniz veya bir hata yakalayıp konsola kaydedersiniz. Her iki senaryoda da, düğmenin yeniden etkinleştirildiğinden ve uygun metne sahip olduğundan emin olmak için updateBtn() yöntemini çağırın.

Gerçek bir uygulamada updateSubscriptionOnServer() işlevi, abonelik verilerinizi arka uca göndereceğiniz yerdir ancak codelab için aboneliği kullanıcı arayüzünde göstermeniz yeterlidir. Şu işlevi scripts/main.js hedefine ekleyin:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

Deneyin

Push Codelab sekmesine gidin, sayfayı yenileyin ve düğmeyi tıklayın. Şuna benzer bir izin istemi görürsünüz:

İzni verirseniz User is subscribed konsola giriş yapılmış olmalıdır. Düğmenin metni Push Mesajlaşmayı Devre Dışı Bırak olarak değişir ve sayfanın en altında aboneliği JSON verileri olarak görebilirsiniz.

6. Herkese açık kullanıcı adı izni reddedildi

Tamamlanan kod

Henüz yapmadığınız bir şey de kullanıcı izin isteğini engellerse ne olacağıdır. Kullanıcı izni engellerse web uygulamanız izin istemini yeniden gösteremez ve kullanıcıya abone olamaz. Kullanıcının, düğmenin kullanılamayacağını bilmesi için en azından düğmeyi devre dışı bırakmanız gerekir.

Bu senaryoyu yönetebileceğiniz en açık yer updateBtn() işlevidir. Tek yapmanız gereken Notification.permission değerini kontrol etmektir. Örneğin:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

İznin denied olması durumunda kullanıcının abone olamayacağını ve yapabileceğiniz başka bir şey olmadığını biliyorsunuz. Bu nedenle düğmeyi kalıcı olarak devre dışı bırakmak en iyi yaklaşımdır.

Deneyin

Önceki adımda web uygulamanıza izin verdiğinizden, URL çubuğundaki bir daire içinde i'yi tıklayıp Bildirimler iznini Genel varsayılanı kullan (Sor) olarak değiştirmeniz gerekir.

Bu ayarı değiştirdikten sonra sayfayı yenileyip Push Mesajlaşmayı Etkinleştir düğmesini tıklayın ve izin iletişim kutusunda Engelle'yi seçin. Düğme devre dışı bırakılır ve Push Mesajlaşma Engellendi metnini gösterir.

Bu değişiklik sayesinde artık olası izin senaryolarını göz önünde bulundurarak kullanıcıyı abone yapabilirsiniz.

7. Push etkinliğini işleme

Tamamlanan kod

Arka ucunuzdan nasıl push mesajı göndereceğinizi öğrenmeden önce, abone olan bir kullanıcı push mesajı aldığında gerçekte ne olacağını düşünmeniz gerekir.

Bir push mesajı tetiklediğinizde tarayıcı push mesajını alır, aktarmanın hangi hizmet çalışanı için olduğunu belirler, bu hizmet çalışanını uyandırır ve bir push etkinliği gönderir. Bu etkinliği dinlemeniz ve sonucunda bir bildirim göstermeniz gerekiyor.

sw.js dosyanıza aşağıdaki kodu ekleyin:

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

Şimdi bu kodu adım adım inceleyelim. Bir etkinlik işleyici ekleyerek hizmet çalışanınızda push etkinliklerini dinliyorsunuz:

self.addEventListener('push', ... );

(Web İşçileri ile daha önce oynamadıysanız self muhtemelen yenidir. Bir hizmet çalışanı dosyasında self, hizmet çalışanının kendisine referans verir.)

Push mesajı alındığında etkinlik işleyici çağrılır ve Service Worker'ın registration özelliğinde showNotification() yöntemini çağırarak bildirim oluşturursunuz. showNotification() için title gerekir; Gövde mesajı, simge ve rozet ayarlamak için ona bir options nesnesi de verebilirsiniz. (Rozet, yazıldığı sırada yalnızca Android'de kullanılır.)

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

push etkinliği işlemede ele alınacak son konu event.waitUntil(). Bu yöntem, tarayıcının taahhüt edilene kadar hizmet çalışanınızı aktif ve çalışır durumda tutmasını sağlar.

Yukarıdaki kodu daha kolay anlaşılır hale getirmek için, aşağıdaki şekilde yeniden yazabilirsiniz:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

Push etkinliğini tamamladığınıza göre şimdi bir push etkinliğini test edelim.

Deneyin

Service Worker'da push etkinliği işlemeyle, bir mesaj alındığında ne olduğunu test etmek için sahte bir push etkinliği tetikleyebilirsiniz.

Web uygulamanızda, push mesajlaşmaya abone olun ve konsolda User IS subscribed ifadesini gördüğünüzden emin olun. Geliştirici Araçları'ndaki Uygulama panelinde, Hizmet Çalışanları sekmesinin altındaki Aktar düğmesini tıklayın:

Push'u tıkladıktan sonra şuna benzer bir bildirim görürsünüz:

Not: Bu adım işe yaramazsa Geliştirici Araçları Uygulama panelindeki Kaydı sil bağlantısını kullanarak hizmet çalışanınızın kaydını iptal etmeyi deneyin, hizmet çalışanının durdurulmasını bekleyin ve ardından sayfayı yeniden yükleyin.

8. Bildirim tıklaması

Tamamlanan kod

Bu bildirimlerden birini tıklarsanız hiçbir şey olmadığını görürsünüz. Hizmet çalışanınızdaki notificationclick etkinliklerini dinleyerek bildirim tıklamalarını işleyebilirsiniz.

sw.js için bir notificationclick işleyici ekleyerek başlayın:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

Kullanıcı bildirimi tıkladığında notificationclick etkinlik işleyicisi çağrılır.

Kod ilk olarak, tıklanan bildirimi kapatır:

event.notification.close();

Daha sonra, https://developers.google.com/web URL'si yükleniyor yeni bir pencere veya sekme açılır. Bunu değiştirebilirsiniz.

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil(), yeni pencere veya sekme görüntülenmeden önce tarayıcının hizmet çalışanını sonlandırmamasını sağlar.

Deneyin

Geliştirici Araçları'nda tekrar push mesajı tetiklemeyi deneyin ve bildirimi tıklayın. Şimdi bildirimin kapandığını ve yeni bir sekmenin açıldığını görürsünüz.

9. Push mesajı gönderme

Web uygulamanızın, Geliştirici Araçları'nı kullanarak bildirim gösterebildiğini gördünüz ve bildirimi tek tıklamayla nasıl kapatabileceğinizi gördünüz. Bir sonraki adım gerçek bir push mesajı göndermektir.

Normalde bu işlem, bir web sayfasından arka uca abonelik gönderilmesini gerektirir. Arka uç, abonelikteki uç noktaya API çağrısı yaparak bir push mesajı tetikler.

Bu, bu codelab'in kapsamı dışındadır ancak gerçek bir push mesajını tetiklemek için tamamlayıcı siteyi ( web-push-codelab.glitch.me) kullanabilirsiniz. Aboneliği sayfanızın en altına yapıştırın:

Ardından, bunu Abonelik İçin Gönder metin alanındaki tamamlayıcı siteye yapıştırın:

Gönderilecek Metin'in altına, push mesajıyla birlikte göndermek istediğiniz herhangi bir dizeyi ekleyin.

Push mesajı gönder düğmesini tıklayın.

Bunun üzerine bir push mesajı alırsınız. Kullandığınız metin konsolda kaydedilecek.

Bu sayede veri gönderip almayı test edebilir ve sonuç olarak bildirimleri değiştirebilirsiniz.

Tamamlayıcı uygulama, mesaj göndermek için webpush kitaplığını kullanan bir düğüm sunucusudur. Push mesajlarını gönderebileceğiniz kitaplıklara göz atmak için GitHub'daki web-push-libs kuruluşunu incelemeniz önerilir. Bu, push mesajlarını tetiklemek için birçok ayrıntıyı işler.

Tamamlayıcı site kodunun tamamını burada görebilirsiniz.

10. Kullanıcının e-posta listesinden çıkın

Tamamlanan kod

Eksik olan tek şey, kullanıcının push aboneliğinden çıkma olanağıdır. Bunu yapmak için PushSubscription numaralı telefondan unsubscribe() adlı kuruluşu aramanız gerekir.

scripts/main.js dosyanızda, initializeUI() içindeki pushButton tıklama işleyiciyi aşağıdaki şekilde değiştirin:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

Şimdi yeni bir unsubscribeUser() işlevini çağıracağınıza dikkat edin. Bu işlevde geçerli aboneliği alır ve unsubscribe() öğesini çağırırsınız. Şu kodu scripts/main.js alanına ekleyin:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

Bu fonksiyonu adım adım inceleyelim.

Öncelikle, getSubscription() numaralı telefonu arayarak geçerli aboneliği alırsınız:

swRegistration.pushManager.getSubscription()

Bu komut, varsa PushSubscription ile çözülecek bir söz döndürür. aksi takdirde null değerini döndürür. Abonelik varsa abonelikte unsubscribe() adını çağırdığınız için PushSubscription geçersiz olur.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

unsubscribe() çağrısının tamamlanması biraz zaman alabildiğinden kullanıcıya bir söz vermiş olursunuz. Sözünüzü iade edersiniz. Böylece zincirdeki bir sonraki then(), unsubscribe() işleminin tamamlanmasını bekler. unsubscribe() komutunun çağrılmasının hata ile sonuçlanması ihtimaline karşı bir yakalama işleyici de eklersiniz. Bunun ardından kullanıcı arayüzünüzü güncelleyebilirsiniz.

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

Deneyin

Web uygulamanızda Push Mesajlaşmasını Etkinleştir veya Push Mesajlaşmasını Devre Dışı Bırak'a basabilmeniz gerekir. Günlüklerde kullanıcının abone olduğu ve aboneliği iptal edildiği gösterilir.

11. Tamamlandı

Tebrikler, bu codelab'i tamamladınız.

Bu codelab'de, web uygulamanıza push bildirimlerini eklemeyi nasıl kullanmaya başlayacağınız gösterilmiştir. Web bildirimlerinin neler yapabileceği hakkında daha fazla bilgi edinmek istiyorsanız bu dokümanlara göz atın.

Sitenizde push bildirimlerini dağıtmak istiyorsanız, GCM'yi kullanan eski tarayıcılar veya standartlara uygun olmayan tarayıcılar için destek eklemek isteyebilirsiniz. Daha fazla bilgi edinin.

Daha fazla bilgi

• Web push bildirimi: Web'le ilgili temel bilgiler hakkında dokümanlar.
• Web aktarma kitaplıkları: Node.js, PHP, Java, Python, C ve C# dahil olmak üzere web push kitaplıkları.

Alakalı blog yayınları

• Web aktarma yükü şifrelemesi
• Uygulama sunucusu anahtarları ve web push
• Bildirim işlemleri
• Simgeler, kapanış etkinlikleri, tercihleri ve zaman damgalarını yeniden bildirme