<h1>Web Bilgilendirme Test Sayfası</h1>
<button onclick="bilgilendirBeni()">Bilgilendirme gönder</button>
@import "nib"

button
  padding 10px 20px
  font-size 14px
  font-weight bold
  border-radius 2px
  
View Compiled
function bilgilendirBeni () {
  // İlk kontrol tarayıcının bu özelliği destekleyip desteklemediğini sorgulamak
  if (!("Notification" in window)) {
    alert("Bu tarayıcı web bilgilendirme özelliğini desteklemiyor.");
  } 

  // Daha önce kullanıcı izin verdi ise
  else if (Notification.permission === "granted") {
    // Bilgilendirme popup'ını çıkaralım.
    var notification = new Notification('Merhaba dünya', {
      body: 'Bu ilk bilgilendirme mesajım olsun', 
      icon: 'http://fatihhayrioglu.com/favicon.png',
      tag: 'demo',
      dir: 'auto',
      lang: ''
    });
  }
  
  // Eğer onay yoksa
  else if (Notification.permission !== 'denied') {
    // Kullanıcıdan onay ise
    Notification.requestPermission(function (permission) {
      // Kullanıcı onaylamadı ise tekrar soralım
      if (permission === "granted") {
        // onaylarsa bilgilendirme popup'ı aç
        var notification = new Notification('Merhaba dünya', {
          body: 'Bu ilk bilgilendirme mesajım olsun', 
          icon: 'http://fatihhayrioglu.com/favicon.png',
          tag: 'demo',
          dir: 'auto',
          lang: ''
        });
       }
    });
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.