Web uygulamalarına push bildirimleri ekleme

1. Genel Bakış

Push mesajlaşma, kullanıcılarınızla yeniden etkileşim kurmanın basit ve etkili bir yolunu sunar. Bu codelab'de, web uygulamanıza anlık bildirimleri nasıl ekleyeceğinizi öğreneceksiniz.

Neler öğreneceksiniz?

• Kullanıcıları push mesajlaşma için abone etme ve abonelikten çıkarma
• Gelen push mesajlarını işleme
• Bildirim gösterme
• Bildirim tıklamalarına yanıt verme

Gerekenler

• Chrome 52 veya sonraki sürümler
• Web Server for Chrome veya kendi seçtiğiniz web sunucusu
• Metin düzenleyici
• HTML, CSS, JavaScript ve Chrome Geliştirici Araçları hakkında temel bilgi
• Örnek kod (Kurulum bölümüne bakın.)

2. Hazırlanın

Örnek kodu indirme

Bu codelab'in örnek kodunu iki şekilde alabilirsiniz:

• 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 dosyayı açtığınızda bir kök klasör push-notifications-master elde edersiniz.

Web sunucusunu yükleme ve doğrulama

Kendi web sunucunuzu kullanmakta serbest olsanız da bu codelab, Chrome için Web Sunucusu uygulamasıyla iyi çalışacak şekilde tasarlanmıştır. Bu uygulama henüz yüklü değilse Chrome Web Mağazası'ndan edinebilirsiniz:

Web Server for Chrome'u yükleme

Web Server for Chrome uygulamasını yükledikten sonra yer işaretleri çubuğundaki Uygulamalar kısayolunu tıklayın:

Uygulamalar penceresinde Web Sunucusu simgesini tıklayın:

Ardından, yerel web sunucunuzu yapılandırmanıza olanak tanıyan bu iletişim kutusunu görürsünüz:

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

Seçenekler bölümünde, aşağıdaki resimde gösterildiği gibi index.html dosyasını otomatik olarak göster seçeneğinin yanındaki kutuyu işaretleyin:

Ardından Web Server: STARTED (Web Sunucusu: BAŞLATILDI) açma/kapatma düğmesini sola, ardından tekrar sağa kaydırarak sunucuyu durdurup yeniden başlatın.

Web tarayıcınızda sitenizi ziyaret etmek için Web Sunucusu URL'sini tıklayın. Aşağıdaki gibi bir sayfa görmeniz gerekir. Ancak sürümünüzde adres olarak 127.0.0.1:8887 gösterilebilir:

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

Geliştirme sırasında, hizmet çalışanınızın her zaman güncel olduğundan ve en son değişiklikleri içerdiğinden emin olmak faydalıdır.

Bu özelliği Chrome'da ayarlamak için:

1. Push Codelab sekmesine gidin.
2. Geliştirici Araçları'nı açma: Windows ve Linux'ta Ctrl-Üst Karakter-I, macOS'te Cmd-Option-I.
3. Application (Uygulama) panelini seçin, Service Workers (Servis Çalışanları) sekmesini tıklayın ve Update on Reload (Yeniden Yüklemede Güncelle) onay kutusunu işaretleyin. Bu onay kutusu etkinleştirildiğinde, sayfa her yeniden yüklendiğinde hizmet çalışanı zorunlu olarak güncellenir.

3. Hizmet çalışanı kaydetme

Tamamlanmış kod

app dizininizde sw.js adlı boş bir dosyanın olduğunu fark edeceksiniz. Bu dosya, hizmet çalışanınız olacak. Şimdilik boş kalabilir. Daha sonra kod ekleyeceksiniz.

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

app/index.html sayfanız yüklenir scripts/main.js. Bu JavaScript dosyasında hizmet çalışanınızı kaydedersiniz.

Aşağıdaki kodu scripts/main.js dosyası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ın servis çalışanlarını ve anlık mesajlaşmayı destekleyip desteklemediğini kontrol eder. Destekleniyorsa kod, sw.js dosyanızı kaydeder.

Deneyin

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

Chrome Geliştirici Araçları'ndaki konsolda Service Worker is registered message simgesini aşağıdaki gibi kontrol edin:

Uygulama sunucusu anahtarlarını alma

Bu codelab'i kullanmak için uygulama sunucusu anahtarları oluşturmanız gerekir. Bu işlemi yardımcı sitede yapabilirsiniz: web-push-codelab.glitch.me

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

Ortak anahtarınızı scripts/main.js içine kopyalayın ve <Your Public Key> değerini değiştirin:

const applicationServerPublicKey = '<Your Public Key>';

Önemli: Özel anahtarınızı hiçbir zaman web uygulamanıza yerleştirmemelisiniz.

4. Durumu başlatma

Tamamlanmış kod

Şu anda web uygulamasının Etkinleştir düğmesi devre dışı ve tıklanamıyor. Bunun nedeni, push mesajlaşmanın tarayıcı tarafından desteklendiğini öğrendikten ve kullanıcının şu anda mesajlaşmaya abone olup olmadığını kontrol edebildikten sonra push düğmesini varsayılan olarak devre dışı bırakmanın ve etkinleştirmenin iyi bir uygulama olmasıdır.

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 olmamasına bağlı olarak metni değiştirmek için

initializeUI işlevini main.js gibi bir formüle 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 öğesini kullanır, pushManager özelliğini alır ve bu özellik üzerinde getSubscription() işlevini çağırır.

pushManager. getSubscription(), varsa mevcut abonelikle çözümlenen bir söz döndürür. Aksi takdirde null değeri döndürülür. Böylece, 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() işlevini çağırabilirsiniz.

updateBtn() işlevini main.js'e ekleyin:

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

  pushButton.disabled = false;
}

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

Yapılacak son şey, hizmet çalışanınız main.js içinde kaydedildiğinde 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. Anlık mesajlaşmayı etkinleştir düğmesinin etkinleştirildiğini (düğmeyi tıklayabilirsiniz) ve konsolda User is NOT subscribed simgesini görürsünüz.

Bu codelab'in geri kalanında ilerlerken abone olduğunuzda veya aboneliğinizi iptal ettiğinizde düğme metninin değiştiğini görmeniz gerekir.

5. Kullanıcıyı abone etme

Tamamlanmış kod

Şu anda Anlık Mesajlaşmayı Etkinleştir düğmeniz pek bir işe yaramıyor. 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 mesajlarına abone olma işlemi biraz zaman alabileceğinden kullanıcının düğmeyi ikinci kez tıklayamayacağından emin olmak için düğmeyi devre dışı bırakırsınız.

Kullanıcı şu anda abone değilse subscribeUser() işlevini çağırırsınız. Bunun için aşağıdaki kodu scripts/main.js içine yapıştırmanız gerekir:

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();
  });
}

Bu kodun ne yaptığını ve kullanıcıyı push mesajlaşmaya nasıl kaydettiğini adım adım inceleyelim.

İlk olarak, uygulama sunucusunun Base64 URL güvenli kodlu ortak anahtarını alıp UInt8Array biçimine dönüştürürsünüz. Bunun nedeni, subscribe() çağrısının beklenen girişinin bu olmasıdır. urlB64ToUint8Array() işlevi, scripts/main.js'nin en üstünde yer alır.

Değeri dönüştürdükten sonra, subscribe() yöntemini hizmet çalışanı pushManager üzerinde çağırır, uygulama sunucunuzun ortak anahtarını ve değeri userVisibleOnly: true iletirsiniz.

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

userVisibleOnly parametresi, her push mesajı gönderildiğinde bildirim göstereceğinizin garantisidir. Şu anda bu değerin girilmesi zorunludur ve doğru olmalıdır.

subscribe() yöntemini çağırdığınızda aşağıdaki adımlardan sonra çözümlenecek bir söz döndürülür:

1. Kullanıcı, bildirimlerin gösterilmesine izin vermiş olmalıdır.
2. Tarayıcı, PushSubscription oluşturmak için gereken verileri almak üzere bir anlık bildirim hizmetine ağ isteği gönderdi.

Bu adımlar başarılı olursa subscribe() sözü PushSubscription ile sonuçlanır. Kullanıcı izin vermezse veya kullanıcıyı abone etme konusunda herhangi bir sorun yaşanırsa söz, hata ile reddedilir. Bu, kod laboratuvarınızda aşağıdaki söz zincirini oluşturur:

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();
});

Bu durumda, kullanıcıyı abone olarak değerlendirip abonelik oluşturabilir veya bir hata yakalayıp bunu konsola kaydedebilirsiniz. Her iki senaryoda da düğmenin yeniden etkinleştirildiğinden ve uygun metne sahip olduğundan emin olmak için updateBtn() numaralı telefonu ararsınız.

Gerçek bir uygulamada, abonelik verilerinizi bir arka uca göndereceğiniz yer updateSubscriptionOnServer() işlevidir. Ancak bu codelab'de aboneliği kullanıcı arayüzünüzde göstermeniz yeterlidir. scripts/main.js alanına aşağıdaki işlevi 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. Aşağıdaki gibi bir izin istemi görürsünüz:

İzni verirseniz konsola User is subscribed kaydedildiğini görürsünüz. Düğmenin metni Anlık Mesajlaşmayı Devre Dışı Bırak olarak değişir ve aboneliği sayfanın alt kısmında JSON verileri olarak görüntüleyebilirsiniz.

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

Tamamlanmış kod

Henüz ele almadığınız bir konu, kullanıcının izin isteğini engellemesi durumunda ne olacağıdır. Kullanıcı izni engellerse web uygulamanız izin istemini yeniden gösteremeyeceği ve kullanıcıyı abone edemeyeceği için bu durum benzersiz bir değerlendirme gerektirir. Kullanıcının kullanılamadığını bilmesi için en azından basma düğmesini devre dışı bırakmanız gerekir.

Bu senaryoyu ele almak için en uygun yer updateBtn() işlevidir. Tek yapmanız gereken Notification.permission değerini aşağıdaki gibi kontrol etmektir:

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ız için izin verdiğinizden, URL çubuğunda daire içindeki i simgesini tıklayıp Bildirimler iznini Genel varsayılanı kullan (Sor) olarak değiştirmeniz gerekir.

Bu ayarı değiştirdikten sonra sayfayı yenileyin, Anlık 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 Anlık Mesajlaşma Engellendi metni gösterilir.

Bu değişiklikle birlikte, olası izin senaryolarını göz önünde bulundurarak kullanıcıyı abone edebilirsiniz.

7. Push etkinliğini işleme

Tamamlanmış kod

Arka uçtan nasıl push mesajı göndereceğinizi öğrenmeden önce, abone olan bir kullanıcı push mesajı aldığında gerçekte ne olacağını göz önünde bulundurmanız gerekir.

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

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));
});

Bu kodu adım adım inceleyelim. Bir etkinlik işleyici ekleyerek hizmet çalışanı içinde push etkinliklerini dinliyorsunuz:

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

(Daha önce Web Workers ile çalışmadıysanız self muhtemelen yeni bir kavramdır. Bir hizmet çalışanı dosyasında self, hizmet çalışanının kendisine referans verir.)

Bir push mesajı alındığında etkinlik dinleyicisi çağrılır ve hizmet çalışanının registration özelliğinde showNotification() çağrılarak bir bildirim oluşturulur. showNotification() için title gerekir. Ayrıca gövde mesajı, simge ve rozet ayarlamak için options nesnesi de verebilirsiniz. (Bu yazı yazıldığı sırada rozet yalnızca Android'de kullanılmaktadı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 etkinlik işleme bölümünde ele alınacak son konu event.waitUntil(). Bu yöntem, tarayıcının, iletilen söz çözülene kadar hizmet çalışanınızı etkin ve çalışır durumda tutmasını sağlayan bir söz alır.

Yukarıdaki kodu biraz daha kolay anlaşılır hale getirmek için şu şekilde yeniden yazabilirsiniz:

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

Push etkinliğini adım adım incelediğinize göre şimdi bir push etkinliğini test edelim.

Deneyin

Hizmet çalışanında push etkinliği işleme özelliği sayesinde, mesaj alındığında ne olacağını test etmek için sahte bir push etkinliği tetikleyebilirsiniz.

Web uygulamanızda anlık mesajlaşma özelliğine abone olun ve konsolda User IS subscribed simgesini gördüğünüzden emin olun. Geliştirici Araçları'ndaki Uygulama panelinde, Service Workers sekmesinin altında Push düğmesini tıklayın:

Push'u tıkladıktan sonra aşağıdaki gibi bir bildirim görürsünüz:

Not: Bu adım işe yaramazsa DevTools Application panelindeki Unregister bağlantısıyla hizmet çalışanın kaydını kaldırmayı deneyin, hizmet çalışanın durdurulmasını bekleyin ve ardından sayfayı yeniden yükleyin.

8. Bildirim tıklaması

Tamamlanmış kod

Bu bildirimlerden birini tıkladığınızda hiçbir şey olmaz. Hizmet çalışanınızda notificationclick etkinliklerini dinleyerek bildirim tıklamalarını işleyebilirsiniz.

notificationclick dinleyici ekleyerek başlayın sw.js:

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, önce tıklanan bildirimi kapatır:

event.notification.close();

Ardından, https://developers.google.com/web URL'sinin yüklendiği yeni bir pencere veya sekme açılır. Bu ayarı 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 bir push mesajı tetiklemeyi deneyin ve bildirimi tıklayın. Bildirimin kapandığını ve yeni bir sekmenin açıldığını görürsünüz.

9. Push mesajları gönderme

Geliştirici Araçları'nı kullanarak web uygulamanızın bildirim gösterebildiğini gördünüz ve bildirimi tıklayarak nasıl kapatacağınızı öğrendiniz. Bir sonraki adım, gerçek bir anlık bildirim göndermektir.

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

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

Ardından, bunu yardımcı sitedeki Subscription to Send To (Gönderilecekler Listesine Abonelik) metin alanına yapıştırın:

Gönderilecek Metin bölümünde, push mesajıyla göndermek istediğiniz dizeyi ekleyin.

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

Ardından bir push mesajı alırsınız. Kullandığınız metin konsola kaydedilir.

Bu sayede, veri gönderme ve alma işlemlerini test etme ve sonuç olarak bildirimleri değiştirme fırsatı elde edersiniz.

Yardımcı uygulama, mesaj göndermek için web-push kitaplığını kullanan bir düğüm sunucusudur. Push mesajları göndermek için hangi kitaplıkların kullanılabildiğini görmek üzere GitHub'daki web-push-libs org'u incelemenizi öneririz. Bu, push mesajlarını tetiklemek için birçok ayrıntıyı ele alır.

Arkadaş sitesinin kodunun tamamını burada görebilirsiniz.

10. Kullanıcının e-posta listesinden çıkmasını sağlama

Tamamlanmış kod

Eksik olan tek şey, kullanıcıların push bildirimleri aboneliğinden çıkma özelliğidir. Bunun için PushSubscription üzerinden unsubscribe() numarasını aramanız gerekir.

scripts/main.js dosyanıza geri dönün ve initializeUI() içindeki pushButton tıklama işleyicisini aşağıdaki gibi değiştirin:

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

Şimdi yeni bir işlev unsubscribeUser() çağıracağınıza dikkat edin. Bu işlevde, geçerli aboneliği alıp üzerinde unsubscribe() işlevini çağırırsınız. Aşağıdaki kodu scripts/main.js dosyası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 işlevi adım adım inceleyelim.

Öncelikle getSubscription() numaralı telefonu arayarak mevcut aboneliği satın alın:

swRegistration.pushManager.getSubscription()

Bu işlev, varsa PushSubscription ile çözümlenen bir söz döndürür; aksi takdirde null döndürür. Abonelik varsa unsubscribe() çağrısı yaparsınız. Bu durumda 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() işlevini çağırmak, tamamlanması biraz zaman alabileceğinden bir söz döndürür. Bu sözü döndürdüğünüzde zincirdeki sonraki then(), unsubscribe()'nin bitmesini bekler. Ayrıca, unsubscribe() çağrısı hata verirse bir catch işleyici de eklersiniz. 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 Anlık Mesajlaşmayı Etkinleştir veya Anlık Mesajlaşmayı Devre Dışı Bırak'ı tıklayabilmeniz gerekir. Günlüklerde, kullanıcının abone olduğu ve abonelikten çıktığı gösterilir.

11. Tamamlandı

Tebrikler! Bu codelab'i tamamladınız.

Bu codelab'de, web uygulamanıza push bildirimleri ekleme konusunda nasıl çalışmaya başlayacağınız gösterildi. Web bildirimlerinin neler yapabileceği hakkında daha fazla bilgi edinmek istiyorsanız bu belgelere göz atın.

Sitenizde push bildirimleri dağıtmak istiyorsanız GCM 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'in temelleriyle ilgili dokümanlar.
• Web push kitaplıkları: Node.js, PHP, Java, Python, C ve C# dahil olmak üzere web push kitaplıkları.

İlgili blog yayınları

• Web push yükü şifreleme
• Uygulama sunucusu anahtarları ve web push
• Bildirim işlemleri
• Simgeler, etkinlikleri kapatma, yeniden bildirim tercihleri ve zaman damgaları