Chrome masaüstü bildirim örneği

Modern tarayıcılarda iki tür bildirim vardır:

• Masaüstü bildirimleri - tetiklemesi kolaydır, sayfa açık olduğu sürece çalışır ve birkaç saniye sonra otomatik olarak kaybolabilir
• Hizmet Çalışanı bildirimleri](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification) - biraz daha karmaşıktır, ancak arka planda çalışabilirler (sayfa kapatıldıktan sonra bile), kalıcıdırlar ve eylem düğmelerini desteklerler

API çağrısı, MDN ve hizmet çalışanları için Google's Web Fundamentals sitesinde iyi belgelenmiş olan aynı parametreleri alır (eylemler hariç - masaüstü bildirimlerinde mevcut değildir).

Aşağıda Chrome, Firefox, Opera ve Safari için masaüstü bildirimlerinin çalışan bir örneği bulunmaktadır. Güvenlik nedeniyle, Chrome 62'den başlayarak, Bildirim API'si için izin artık çapraz kökenli bir iframe'den istenemez, bu nedenle StackOverflow'un kod parçacıklarını kullanarak bunu gösteremeyiz. Bu örneği sitenizdeki/uygulamanızdaki bir HTML dosyasına kaydetmeniz ve localhost:// veya HTTPS kullandığınızdan emin olmanız gerekir.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});

function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 Notify me!

Biz W3C Notifications API'sini kullanıyoruz. Bunu farklı olan Chrome extensions notifications API ile karıştırmayın. Chrome uzantı bildirimleri açıkça sadece Chrome uzantılarında çalışır ve kullanıcıdan herhangi bir özel izin gerektirmez.

W3C bildirimleri birçok tarayıcıda çalışır (caniuse adresindeki desteğe bakın) ve kullanıcı izni gerektirir. En iyi uygulama olarak, bu izni hemen istemeyin. Kullanıcıya önce neden bildirim isteyeceğini açıklayın ve diğer push bildirimleri modellerine bakın.

Chrome'un bu hata nedeniyle Linux'ta bildirim simgesine saygı göstermediğini unutmayın.

Son sözler

Bildirim desteği, son yıllarda çeşitli API'lerin kullanımdan kaldırılmasıyla sürekli bir değişim içinde olmuştur. Merak ediyorsanız, Chrome'da eskiden nelerin çalıştığını görmek ve zengin HTML bildirimlerinin hikayesini öğrenmek için bu yanıtın önceki düzenlemelerine göz atın.

Şimdi en son standart https://notifications.spec.whatwg.org/ adresinde.

Bir hizmet çalışanında olup olmamanıza bağlı olarak neden aynı etkiye yönelik iki farklı çağrı olduğuna ilişkin olarak Google'da çalışırken açtığım bu bilete bakın.

Bir yardımcı kütüphane için notify.js adresine de bakın.

Basit bir örnek için design ve API specification (hala taslaktır) veya (sayfa artık mevcut değil) kaynağını kontrol edin: Temel olarak window.webkitNotifications.createNotification çağrısıdır.

Daha sağlam bir örnek istiyorsanız (kendi Google Chrome uzantınızı oluşturmaya çalışıyorsanız ve izinler, yerel depolama ve benzeri konularla nasıl başa çıkacağınızı öğrenmek istiyorsanız), Gmail Notifier Extension'a göz atın: yüklemek yerine crx dosyasını indirin, açın ve kaynak kodunu okuyun.

Beğendim: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples ancak eski değişkenleri kullanıyor, bu nedenle demo artık çalışmıyor. webkitNotificationsartıkNotification` oldu.