Bagaimana cara mengirim pemberitahuan push ke browser web?

Saya telah membaca selama beberapa jam terakhir tentang Push Notification API dan Web Notification API . Saya juga menemukan bahwa Google & Apple memberikan layanan pemberitahuan push secara gratis melalui GCM dan APNS.

Saya mencoba memahami jika kita dapat menerapkan push notification ke browser menggunakan Desktop Notification, yang saya percaya adalah apa yang dilakukan Web Notification API. Saya melihat dokumentasi google tentang bagaimana hal ini dapat dilakukan untuk Chrome di sini & di sini .

Sekarang yang masih belum bisa saya pahami adalah:

1. Bisakah kita menggunakan GCM / APNS untuk mengirim pemberitahuan push ke semua Browser Web termasuk Firefox & Safari?
2. Jika tidak melalui GCM, bisakah kita memiliki back-end kita sendiri untuk melakukan hal yang sama?

Saya percaya semua jawaban ini dalam satu jawaban dapat membantu banyak orang yang memiliki kebingungan yang sama.

Jadi di sini saya menjawab pertanyaan saya sendiri. Saya sudah mendapat jawaban untuk semua pertanyaan saya dari orang-orang yang telah membangun layanan push notification di masa lalu.

Pembaruan (Mei 2018): Berikut ini adalah dokumen yang komprehensif dan ditulis dengan sangat baik pada pemberitahuan push web dari Google.

Menjawab pertanyaan asli yang diajukan 3 tahun lalu:

1. Bisakah kita menggunakan GCM / APNS untuk mengirim pemberitahuan push ke semua Browser Web termasuk Firefox & Safari?

Jawaban: Google telah mencabut GCM pada April 2018. Sekarang Anda dapat menggunakan Firebase Cloud Messaging (FCM). Ini mendukung semua platform termasuk browser web.

2. Jika tidak melalui GCM, bisakah kita memiliki back-end kita sendiri untuk melakukan hal yang sama?

Jawab: Ya, pemberitahuan push dapat dikirim dari back-end kami sendiri. Dukungan untuk hal yang sama telah datang ke semua browser utama.

Periksa codelab ini dari Google untuk lebih memahami implementasinya.

Beberapa Tutorial:

• Menerapkan pemberitahuan push di Django Di Sini .
• Menggunakan labu untuk mengirim pemberitahuan push di sini & Di Sini .
• Mengirim pemberitahuan push dari Nodejs Here
• Mengirim pemberitahuan push menggunakan php Di Sini & Di Sini
• Mengirim pemberitahuan push dari Wordpress. Di Sini & Di Sini
• Mengirim pemberitahuan push dari Drupal. Sini

Menerapkan backend sendiri dalam berbagai bahasa pemrograman .:

• NodeJs
• PHP
• Rel
• Python
• Go Lang - ini dan ini

Bacaan lebih lanjut: - - Dokumentasi dari situs web Firefox dapat dibaca di sini . - Tinjauan web Push yang sangat baik oleh Google dapat ditemukan di sini. - FAQ yang menjawab kebingungan dan pertanyaan paling umum.

Apakah ada layanan gratis untuk melakukan hal yang sama? Ada beberapa perusahaan yang memberikan solusi serupa dalam model gratis, freemium, dan berbayar. Daftar beberapa di bawah ini:

1. https://onesignal.com/ (Gratis | Mendukung semua platform)
2. https://firebase.google.com/products/cloud-messaging/ (Gratis)
3. https://clevertap.com/ (Memiliki paket gratis)
4. https://goroost.com/

Catatan: Saat memilih layanan gratis, ingat untuk membaca TOS. Layanan gratis sering kali bekerja dengan mengumpulkan data pengguna untuk berbagai keperluan termasuk analitik.

Selain itu, Anda harus memiliki HTTPS untuk mengirim pemberitahuan push. Namun, Anda bisa mendapatkan https secara bebas melalui letsencrypt.org

Javier tercakup Pemberitahuan dan batasan saat ini.

Saran saya: window.postMessagesementara kami menunggu browser yang cacat untuk mengejar ketinggalan, yang lain Worker.postMessage()masih beroperasi dengan Pekerja Web.

Ini bisa menjadi opsi mundur dengan penangan tampilan pesan kotak dialog, karena ketika tes fitur Notifikasi gagal atau izin ditolak.

Pemberitahuan memiliki fitur dan pemeriksaan izin yang ditolak:

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

Anda dapat mendorong data dari server ke browser melalui Peristiwa Sisi Server . Ini pada dasarnya adalah aliran searah yang klien dapat "berlangganan" dari browser. Dari sini, Anda bisa membuat Notificationobjek baru saat SSE mengalir ke browser:

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

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

Agak lama, tetapi artikel oleh Eric Bidelman ini menjelaskan dasar-dasar SSE dan memberikan beberapa contoh kode server juga.

GCM / APNS hanya untuk Chrome dan Safari.

Saya pikir Anda mungkin mencari Notification:

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

Ini berfungsi di Chrome, Firefox, Opera dan Safari .

Saya berasumsi Anda berbicara tentang pemberitahuan push nyata yang dapat dikirim bahkan ketika pengguna tidak menjelajahi situs web Anda (jika tidak, periksa WebSockets atau metode lama seperti polling panjang).

Bisakah kita menggunakan GCM / APNS untuk mengirim pemberitahuan push ke semua Browser Web termasuk Firefox & Safari?

GCM hanya untuk Chrome dan APN hanya untuk Safari. Setiap produsen browser menawarkan layanannya sendiri.

Jika tidak melalui GCM, bisakah kita memiliki back-end kita sendiri untuk melakukan hal yang sama?

Push API membutuhkan dua backend ! Satu ditawarkan oleh produsen browser dan bertanggung jawab untuk mengirimkan pemberitahuan ke perangkat. Yang lain harus menjadi milik Anda (atau Anda dapat menggunakan layanan pihak ketiga seperti Pushpad ) dan bertanggung jawab untuk memicu pemberitahuan dan menghubungi layanan produsen browser (yaitu GCM, APNs, server push Mozilla ).

Pengungkapan: Saya adalah pendiri Pushpad

ini adalah cara sederhana untuk melakukan pemberitahuan push untuk semua browser https://pushjs.org

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

Bolehkah saya mendefinisikan kembali pertanyaan Anda seperti di bawah ini

Bisakah kita memiliki back-end kita sendiri untuk mengirim pemberitahuan push ke Chrome, Firefox, Opera & Safari?

Iya. Hingga hari ini (2017/05) , Anda dapat menggunakan implementasi sisi klien dan server yang sama untuk menangani Chrome, Firefox dan Opera (tanpa Safari). Karena mereka telah menerapkan pemberitahuan push web dengan cara yang sama. Itu adalah protokol Push API oleh W3C. Tetapi Safari memiliki arsitektur lamanya sendiri. Jadi kita harus memelihara Safari secara terpisah.

Merujuk repo browser-push untuk garis panduan untuk menerapkan pemberitahuan push web untuk aplikasi web Anda dengan back-end Anda sendiri. Ini menjelaskan dengan contoh bagaimana Anda dapat menambahkan dukungan pemberitahuan push web untuk aplikasi web Anda tanpa layanan pihak ketiga.

Sampai sekarang GCM hanya berfungsi untuk chrome dan android. demikian pula firefox dan browser lain memiliki api sendiri.

Sekarang sampai pada pertanyaan bagaimana menerapkan pemberitahuan push sehingga akan bekerja untuk semua browser umum dengan back end sendiri.

1. Anda memerlukan kode skrip sisi klien yaitu pekerja layanan, rujuk ( pemberitahuan push Google ). Meskipun ini tetap sama untuk browser lain.

2.Setelah mendapatkan titik akhir menggunakan Ajax simpan bersama dengan nama browser.

3. Anda harus membuat back end yang memiliki bidang untuk judul, pesan, ikon, klik URL sesuai kebutuhan Anda. sekarang setelah klik kirim pemberitahuan, panggil fungsi say send_push (). Dalam kode tulis ini untuk browser yang berbeda misalnya

3.1. untuk chrome

 $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. untuk mozilla

$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);

untuk peramban lain, silakan google ...

Saya sarankan menggunakan pubnub. Saya mencoba menggunakan ServiceWorkers dan PushNotification dari browser, namun ketika saya mencobanya, tampilan web tidak mendukung ini.

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