Chrome 48'de Bildirim İşlemleri

2015'in başlarında, Android ve Masaüstü için Chrome'da Push Messaging ve Bildirim'i kullanıma sunduk. Bu, web'de atılmış büyük bir adımdı. Kullanıcılar, tarayıcı kapalıyken bile web'deki deneyimlerle daha derin bir etkileşim kurmaya başlayabilirler.

Bu mesajları gönderebilmenize alışmak harika olsa da, bir sayfayla yapabileceğiniz tek şey tıklayıp bir sayfayı açmak ya da tamamen kapatmaktı.

iOS ve Android gibi mobil platformlardaki uygulamalara yerel olarak sağlanan bildirimlere bakarsanız bu bildirimlerin her biri, geliştiricinin kullanıcının çağırıp etkileşimde bulunabileceği bağlamsal işlemleri tanımlamasına olanak tanır. Chrome 48'de Masaüstü ve Android için Chrome'da Web Bildirimleri'ne benzer bir özellik ekledik.

Bildirim ekran görüntüsü

API'ye ekleme işlemi oldukça basittir. Tek yapmanız gereken bir İşlem dizisi oluşturup bunları ServiceWorker kaydından showNotification çağrısı yaptığınızda (doğrudan ServiceWorker'da veya navigator.serviceWorker.ready aracılığıyla bir sayfada) NotificationOptions nesnesine eklemeniz gerekir.

Chrome şu anda her bir bildirimde yalnızca iki işlemi desteklemektedir. Bazı platformlar daha fazlasını, bazı platformlar ise daha azını veya hiç desteklemeyebilir. Platformun neleri desteklediğini Notification.maxActions adresinden öğrenebilirsiniz. Aşağıdaki örneklerde platformun iki işlemi desteklediğini varsayıyoruz.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Bu, iki düğmeli basit bir bildirim oluşturur. İşleme doğrudan simge eklemenin (henüz) mümkün olmadığını unutmayın, ancak bildirim düğmelerinize daha fazla bağlam eklemek için Emoji ve genişletilmiş Unicode karakter kümesini kullanabilirsiniz.

Örneğin:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Artık bir bildirim oluşturup 😻 görünmesine sahip olduğunuza göre kullanıcı gelecekte bir zaman bildirimle etkileşimde bulunabilir. Şu anda (Chrome 48'den itibaren) bildirimle olan etkileşimler, hizmet çalışanınızda kayıtlı notificationclick etkinliğinden gelir ve bildirimin genel bir tıklaması veya işlem düğmelerinden birine belirli bir dokunuş olabilir. Gelecekte bu notificationcloseetkinliğine de yanıt verebileceğinizi hatırlatmak isteriz.

Kullanıcının hangi işlemi yaptığını anlamak için etkinlikte action özelliğini incelemeniz ve ardından kullanıcının bir işlemi tamamlaması için yeni bir sayfa açma veya görevi arka planda gerçekleştirme arasında seçim yapmanız gerekir.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

İşin ilginç yanı, işlemlerin yeni bir pencere açmak zorunda olmaması, genel uygulama etkileşimlerini, kullanıcı arayüzü oluşturmadan gerçekleştirebilmesidir. Örneğin, bir kullanıcı, yerel verileri üzerinde işlem gerçekleştirecek olan bir sosyal medya yayınını "Beğenebilir" veya "Silebilir" ve daha sonra, kullanıcı arayüzü açmadan bu yayını bulutla senkronize edebilir (ancak kullanıcı arayüzünün güncellenebilmesi için veri değişikliğini herhangi bir açık pencerelere iletmek iyi bir uygulamadır). Kullanıcı etkileşimi gerektiren bir işlem için, kullanıcının yanıt vermesi için bir pencere açarsınız.

Platformlar aynı sayıda işlemi desteklemeyeceği veya bazı durumlarda Bildirim İşlemi düğmelerini hiçbir şekilde destekleyemeyeceği için her zaman kullanıcının bildirimi tıkladığında yapmasını bekleyeceğiniz bir göreve makul bir yedek sağladığınızdan emin olmanız gerekir.

Bunu bugün görmek istiyorsanız Peter Beverloo'nun Bildirim Testi Harnevideosuna göz atın ve Bildirim spesifikasyonu'nu okuyun ya da güncellenirken spesifikasyonları takip edin.