Web tarayıcısına push bildirimi nasıl gönderilir?

Son birkaç saattir Push Notification API ve Web Notification API hakkında okuyorum . Ayrıca Google ve Apple'ın sırasıyla GCM ve APNS üzerinden ücretsiz push bildirim hizmeti verdiğini keşfettim.

Web Bildirimi API'sinin ne yaptığına inandığım Masaüstü Bildirimi'ni kullanarak tarayıcılara push bildirimi uygulayıp uygulayamayacağımızı anlamaya çalışıyorum. Bunun burada ve burada Chrome için nasıl yapılabileceğine dair bir Google dokümanını gördüm .

Şimdi hala anlayamadığım şey:

1. Firefox ve Safari dahil tüm Web Tarayıcılarına push bildirimi göndermek için GCM / APNS kullanabilir miyiz?
2. GCM aracılığıyla değilse, aynı şeyi yapmak için kendi arka ucumuza sahip olabilir miyiz?

Tüm cevapların tek bir cevapta benzer kafa karışıklığı olan birçok insana yardımcı olabileceğine inanıyorum.

İşte burada kendi sorumu cevaplıyorum. Geçmişte push bildirimi hizmeti veren kişilerden gelen tüm sorularıma yanıtlar aldım.

Güncelleme (Mayıs 2018): İşte Google'dan web push bildirimi hakkında kapsamlı ve çok iyi yazılmış bir doküman.

3 yıl önce sorulan orijinal soruların cevabı:

1. Firefox ve Safari dahil tüm Web Tarayıcılarına push bildirimi göndermek için GCM / APNS kullanabilir miyiz?

Yanıt: Google, Nisan 2018 itibarıyla GCM'yi kullanımdan kaldırmıştır. Artık Firebase Cloud Messaging'i (FCM) kullanabilirsiniz. Bu, web tarayıcıları dahil tüm platformları destekler.

2. GCM aracılığıyla değilse, aynı şeyi yapmak için kendi arka ucumuza sahip olabilir miyiz?

Cevap: Evet, itme bildirimi kendi arka ucumuzdan gönderilebilir. Aynı destek tüm büyük tarayıcılara geldi.

Uygulamayı daha iyi anlamak için bu kod etiketini Google'dan kontrol edin .

Bazı Eğiticiler:

• Django Burada push bildirimi uygulamak .
• Burada ve Burada push bildirimi göndermek için şişesi kullanma .
• Nodejs Buradan push notifcaiton gönderme
• Php Here & Here kullanarak push bildirimi gönderme
• Wordpress'ten push bildirimi gönderme. Burada ve Burada
• Drupal'dan push bildirimi gönderme. Buraya

Çeşitli programlama dillerinde kendi arka uçlarını uygulamak:

• NodeJs.
• PHP
• Raylar
• piton
• Git Lang - bu ve bu

İlave Okumalar: - - Firefox web sitesinden gelen dokümanlar buradan okunabilir . - Google'dan Web Push'a çok iyi bir genel bakış burada bulunabilir. - En yaygın karışıklıkları ve soruları yanıtlayan bir SSS .

Aynı şeyi yapmak için ücretsiz hizmetler var mı? Ücretsiz, freemium ve ücretli modellerde benzer bir çözüm sunan bazı şirketler var. Aşağıda birkaçını listeliyorum:

1. https://onesignal.com/ (Ücretsiz | Tüm platformları destekle)
2. https://firebase.google.com/products/cloud-messaging/ (Ücretsiz)
3. https://clevertap.com/ (Ücretsiz planı var)
4. https://goroost.com/

Not: Ücretsiz bir hizmet seçerken Hizmet Şartlarını okumayı unutmayın. Ücretsiz hizmetler, genellikle, analiz de dahil olmak üzere çeşitli amaçlar için kullanıcı verileri toplayarak çalışır.

Bunun dışında, push bildirimleri göndermek için HTTPS'ye sahip olmanız gerekir. Ancak, https'yi letsencrypt.org üzerinden özgürce alabilirsiniz

Javier Bildirimler ve mevcut sınırlamaları ele aldı.

Benim önerim: window.postMessageözürlü tarayıcının yetişmesini beklerken, Worker.postMessage()yine de Web Çalışanları ile çalışıyor olmak.

Bunlar, Bildirim özelliği testi başarısız olduğunda veya izin reddedildiğinde iletişim kutusu mesaj görüntüleme işleyicisiyle yedek seçenek olabilir.

Bildirim özelliği ve izin verilmedi

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

Sunucu Tarafı Olayları aracılığıyla sunucudan tarayıcıya veri aktarabilirsiniz . Bu temelde bir istemcinin tarayıcıdan "abone olabileceği" tek yönlü bir akıştır. Buradan, NotificationSSE'ler tarayıcıya akarken yeni nesneler oluşturabilirsiniz :

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
}); 

Biraz eski, ancak Eric Bidelman'ın bu makalesi SSE'nin temellerini açıklıyor ve bazı sunucu kodu örnekleri de sunuyor.

GCM / APNS sırasıyla yalnızca Chrome ve Safari içindir.

Bence sen arıyor olabilir Notification:

https://developer.mozilla.org/en-US/docs/Web/API/notification

Chrome, Firefox, Opera ve Safari'de çalışır .

Kullanıcı web sitenizde sörf yapmadığında bile iletilebilecek gerçek push bildirimleri hakkında konuştuğunuzu varsayıyorum (aksi takdirde WebSockets veya uzun oylama gibi eski yöntemlere göz atın).

Firefox ve Safari dahil tüm Web Tarayıcılarına push bildirimi göndermek için GCM / APNS kullanabilir miyiz?

GCM yalnızca Chrome içindir ve APN'ler yalnızca Safari içindir. Her tarayıcı üreticisi kendi hizmetini sunar.

GCM aracılığıyla değilse, aynı şeyi yapmak için kendi arka ucumuza sahip olabilir miyiz?

Push API iki arka uç gerektirir ! Bunlardan biri tarayıcı üreticisi tarafından sunulur ve bildirimin cihaza iletilmesinden sorumludur. Diğeri sizin olmalıdır (veya Pushpad gibi bir üçüncü taraf hizmeti kullanabilirsiniz ) ve bildirimi tetiklemekten ve tarayıcı üreticisinin hizmetiyle (GCM, APN'ler, Mozilla push sunucuları ) iletişim kurmaktan sorumludur .

Açıklama: Ben Pushpad kurucusuyum

bu, tüm tarayıcı için push bildirimi yapmanın basit bir yoludur https://pushjs.org

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});

Sorunuzu aşağıdaki gibi yeniden tanımlayabilir miyim

Chrome, Firefox, Opera ve Safari'ye push bildirimi göndermek için kendi arka ucumuza sahip olabilir miyiz?

Evet. Bugüne kadar (2017/05) , Chrome, Firefox ve Opera'yı (Safari yok) işlemek için aynı istemci ve sunucu tarafı uygulamasını kullanabilirsiniz. Çünkü aynı şekilde web push bildirimleri uyguladılar. Bu W3C tarafından Push API protokolü. Ancak Safari'nin kendi eski mimarisi var. Bu yüzden Safari'yi ayrı olarak sürdürmeliyiz.

Web uygulamanız için kendi arka ucunuzla web push bildirimi uygulamak üzere kılavuz satırlar için tarayıcı push reposuna bakın . Herhangi bir üçüncü taraf hizmeti olmadan web uygulamanız için web push bildirim desteğini nasıl ekleyebileceğinizi örneklerle açıklar.

Şu andan itibaren GCM yalnızca krom ve android için çalışıyor. benzer şekilde firefox ve diğer tarayıcıların kendi API'ları vardır.

Şimdi, kendi arka uçlu tüm yaygın tarayıcılar için çalışacak şekilde push bildiriminin nasıl uygulanacağı sorusuna geliyor.

1. İstemci tarafı komut dosyası koduna ihtiyacınız vardır, örneğin hizmet çalışanı, bakın ( Google push bildirimi ). Bu diğer tarayıcılar için aynı kalsa da.

2. Ajax kullanarak uç nokta aldıktan sonra tarayıcı adıyla birlikte kaydedin.

3.İhtiyaçlarınıza göre başlık, mesaj, simge, tıklama URL'si alanlarına sahip arka uç oluşturmanız gerekir. şimdi bildirim gönder'i tıkladıktan sonra, send_push () işlevini çağırın. Örneğin, farklı tarayıcılar için bu yazma kodunda

3.1. krom için

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($msg));

      $result = curl_exec($ch);

3.2. mozilla için

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);


      $result = curl_exec($ch);

diğer tarayıcılar için lütfen google ...

Pubnub kullanmanızı öneririm. Ancak tarayıcıdan ServiceWorkers ve PushNotification kullanmayı denedim, ancak denediğimde webviews bunu desteklemedi.

https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk