Emre Yüz


Web Sitenizden Tarayıcı Bildirimleri Gösterin

One Signal web servisi ile web sitenizin bildirimlerine abone olan tüm kullanacılara nasıl uzaktan bildirim gönderebileceğinizi yazacağım.

Web Sitenizden Tarayıcı Bildirimleri Gösterin

By Emre YÜZ
12.02.2017 13.56



one signal web tarayıcı bildirimleri

Bu yazıda One Signal web servisi ile web sitenizin bildirimlerine abone olan tüm kullanacılara nasıl uzaktan bildirim gönderebileceğinizi yazacağım.

1. Adım

Öncelikle, One Signal web sitesine girerek kendimize bir hesap oluşturuyoruz. Bu servisi kullanmak için bize özel bir API anahtarı gerekiyor. Ücretsiz olarak bir hesap oluşturduktan sonra aşağıdaki resimki gibi Add New App seçeneğine tıklıyoruz.

2. Adım

Uygulamamıza bir isim verdikten sonra ikinci adımda aşağıdaki resimdeki gibi Web Site Push seçeneğini işaretleyerek Next diyoruz.

3. Adım

Bu adımda web sitemizi tanımlıyoruz https bağlantınız olması tercih ediliyoruz.

4.Adım

Adımları tamamladıktan sonra gelen pencerede API IP kısmındaki kodu bir kenara kopyalıyoruz.

5. Adım

Şimdi buraya tıklayarak gerekli dosyaları indirerek sitenizin ana dizinine atın. Aşağıdaki kod ile push mesajlarını entegre ettik.

<head>
  <link rel="manifest" href="/manifest.json">
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "SON ADIMDAKI APP ID BURAYA GELECEK",
      autoRegister: false,
      notifyButton: {
        enable: true /* gizlemek için false yapın */
      }
    }]);
  </script>
</head>

6. Adım

Bu adımda bildirim göndermek için kullanıcılardan abone olmalarını istiyoruz.

<body>
    <a href="#" id="subscribe-link" style="display: none;">Bildirimler İçin Adobe Olun</a>
    <script>
        function subscribe() {
            OneSignal.push(["registerForPushNotifications"]);
            event.preventDefault();
        }
        var OneSignal = OneSignal || [];
        OneSignal.push(function() {
            // If we're on an unsupported browser, do nothing
            if (!OneSignal.isPushNotificationsSupported()) {
                return;
            }
            OneSignal.isPushNotificationsEnabled(function(isEnabled) {
                if (isEnabled) {
                    // Adobe olundu
                } else {
                    document.getElementById("subscribe-link").addEventListener('click', subscribe);
                    document.getElementById("subscribe-link").style.display = '';
                }
            });
        });
    </script>
</body>

7. Adım

Tüm bildirim entegrasyonunu bitirdik şimdi de uzaktan bildirim gönderelim.

Bu şekilde tüm abonelerinize Google Chrome veya Mozilla Firefox üzerinden bildirim gönderebilirsiniz.



Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed


    Reklam