จะส่งข้อความแจ้งเตือนแบบพุชไปยังเว็บเบราเซอร์ได้อย่างไร?

ผมได้อ่านไม่กี่ชั่วโมงที่ผ่านมาเกี่ยวกับAPI ผลักดันการแจ้งเตือนและเว็บ API การแจ้งเตือน ฉันค้นพบว่า Google & Apple ให้บริการแจ้งเตือนแบบพุชผ่าน GCM และ APNS ฟรีตามลำดับ

ฉันพยายามที่จะเข้าใจว่าเราสามารถใช้การแจ้งเตือนแบบพุชไปยังเบราว์เซอร์ที่ใช้การแจ้งเตือนเดสก์ท็อปซึ่งฉันเชื่อว่าเป็นสิ่งที่ API การแจ้งเตือนทางเว็บทำ ผมเห็นเอกสารของ Google เกี่ยวกับวิธีการนี้สามารถทำได้สำหรับ Chrome ที่นี่และที่นี่

ตอนนี้สิ่งที่ฉันยังไม่เข้าใจคือ:

1. เราสามารถใช้ GCM / APNS เพื่อส่งการแจ้งเตือนแบบพุชไปยังเว็บเบราว์เซอร์ทั้งหมดรวมถึง Firefox และ Safari ได้หรือไม่?
2. ถ้าไม่ผ่าน GCM เราสามารถมีส่วนหลังของเราเองที่จะทำเช่นเดียวกันได้หรือไม่?

ฉันเชื่อว่าคำตอบเหล่านี้ทั้งหมดในคำตอบเดียวสามารถช่วยผู้คนจำนวนมากที่มีความสับสนแบบเดียวกัน

ดังนั้นที่นี่ฉันตอบคำถามของฉันเอง ฉันได้รับคำตอบสำหรับทุกข้อสงสัยของฉันจากผู้ที่สร้างบริการแจ้งเตือนแบบพุชในอดีต

อัปเดต (พฤษภาคม 2018): ที่ นี่เป็นเอกสารที่ครอบคลุมและเป็นลายลักษณ์อักษรที่ดีมากในการแจ้งเตือนแบบพุชผ่านเว็บจาก Google

ตอบคำถามเดิมที่ถามเมื่อ 3 ปีที่แล้ว:

1. เราสามารถใช้ GCM / APNS เพื่อส่งการแจ้งเตือนแบบพุชไปยังเว็บเบราว์เซอร์ทั้งหมดรวมถึง Firefox และ Safari ได้หรือไม่?

คำตอบ: Google เลิกใช้ GCM เมื่อเดือนเมษายน 2561 คุณสามารถใช้Firebase Cloud Messaging (FCM) ได้แล้ว รองรับแพลตฟอร์มทั้งหมดรวมถึงเว็บเบราว์เซอร์

2. ถ้าไม่ผ่าน GCM เราสามารถมีส่วนหลังของเราเองที่จะทำเช่นเดียวกันได้หรือไม่?

คำตอบ:ใช่การแจ้งเตือนแบบพุชสามารถส่งจากแบ็คเอนด์ของเราเอง การสนับสนุนเดียวกันได้มากับเบราว์เซอร์ที่สำคัญทั้งหมด

ตรวจสอบcodelab นี้จาก Google เพื่อให้เข้าใจการใช้งานได้ดีขึ้น

บทเรียนบางส่วน:

• การดำเนินการแจ้งเตือนผลักดันใน Django นี่
• ใช้ขวดส่งการแจ้งเตือนผลักดันที่นี่และที่นี่
• ส่งการแจ้งเตือนแบบพุชจาก Nodejs ที่นี่
• ส่งการแจ้งเตือนแบบพุชโดยใช้ php ที่นี่และที่นี่
• ส่งการแจ้งเตือนแบบพุชจาก Wordpress ที่นี่และที่นี่
• ส่งการแจ้งเตือนแบบพุชจาก Drupal ที่นี่

การใช้แบ็กเอนด์ของตัวเองในภาษาการเขียนโปรแกรมต่างๆ:

• NodeJs
• PHP
• ทางรถไฟ
• หลาม
• ไปหรั่ง - นี่และนี่

อ่านเพิ่มเติม: - - เอกสารจากเว็บไซต์ของ Firefox สามารถอ่านได้ที่นี่ - สามารถดูภาพรวมที่ดีของ Web Push โดย Google ได้ที่นี่ - คำถามที่พบบ่อยตอบข้อสงสัยและคำถามที่พบบ่อยที่สุด

มีบริการฟรีให้ทำเช่นเดียวกันหรือไม่ มีบาง บริษัท ที่ให้บริการโซลูชั่นที่คล้ายกันในรูปแบบฟรีฟรีและแบบชำระเงิน รายการด้านล่างไม่กี่:

1. https://onesignal.com/ (ฟรี | สนับสนุนแพลตฟอร์มทั้งหมด)
2. https://firebase.google.com/products/cloud-messaging/ (ฟรี)
3. https://clevertap.com/ (มีแผนฟรี)
4. https://goroost.com/

หมายเหตุ: เมื่อเลือกบริการฟรีอย่าลืมอ่าน TOS บริการฟรีมักจะทำงานโดยรวบรวมข้อมูลผู้ใช้เพื่อจุดประสงค์ต่างๆรวมถึงการวิเคราะห์

นอกจากนั้นคุณต้องมี HTTPS เพื่อส่งการแจ้งเตือนแบบพุช อย่างไรก็ตามคุณสามารถรับ https ได้อย่างอิสระผ่านletsencrypt.org

Javier ครอบคลุมการแจ้งเตือนและข้อ จำกัด ในปัจจุบัน

คำแนะนำของฉัน: window.postMessageในขณะที่เรารอให้เบราว์เซอร์ที่มีคนพิการติดตาม แต่อย่างอื่นWorker.postMessage()ก็ยังทำงานกับ Web Workers ได้

สิ่งเหล่านี้สามารถเป็นตัวเลือกทางเลือกพร้อมกับตัวจัดการการแสดงข้อความกล่องโต้ตอบสำหรับเมื่อการทดสอบคุณสมบัติการแจ้งเตือนล้มเหลวหรือสิทธิ์ถูกปฏิเสธ

การแจ้งเตือนมีคุณสมบัติและการตรวจสอบการปฏิเสธการอนุญาต:

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

คุณสามารถผลักดันข้อมูลจากเซิร์ฟเวอร์เบราว์เซอร์ผ่านทางกิจกรรมด้าน Server นี่คือกระแสข้อมูลแบบทิศทางเดียวที่ไคลเอ็นต์สามารถ "สมัครสมาชิก" จากเบราว์เซอร์ จากที่นี่คุณสามารถสร้างNotificationวัตถุใหม่เป็นสตรีม SSE ในเบราว์เซอร์:

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

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

ค่อนข้างเก่า แต่บทความนี้โดย Eric Bidelmanอธิบายพื้นฐานของ SSE และให้ตัวอย่างโค้ดเซิร์ฟเวอร์ด้วย

GCM / APNS มีเฉพาะสำหรับ Chrome และ Safari ตามลำดับ

ฉันคิดว่าคุณอาจกำลังมองหาNotification:

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

มันทำงานได้ใน Chrome, Firefox, Opera และ Safari

ฉันคิดว่าคุณกำลังพูดถึงการแจ้งเตือนแบบพุชจริงที่สามารถส่งได้แม้ว่าผู้ใช้จะไม่ได้ท่องเว็บไซต์ของคุณ (มิฉะนั้นลองดู WebSockets หรือวิธีการดั้งเดิมเช่นการโพลแบบยาว)

เราสามารถใช้ GCM / APNS เพื่อส่งการแจ้งเตือนแบบพุชไปยังเว็บเบราว์เซอร์ทั้งหมดรวมถึง Firefox และ Safari ได้หรือไม่?

GCM สำหรับ Chrome เท่านั้นและ APN สำหรับ Safari เท่านั้น ผู้ผลิตเบราว์เซอร์แต่ละรายเสนอบริการของตนเอง

ถ้าไม่ผ่าน GCM เราสามารถมีส่วนหลังของเราเองที่จะทำเช่นเดียวกันได้หรือไม่?

Push API ต้องการสองแบ็กเอนด์ ! มีการเสนอให้โดยผู้ผลิตเบราว์เซอร์และรับผิดชอบการส่งการแจ้งเตือนไปยังอุปกรณ์ อีกหนึ่งควรเป็นของคุณ (หรือคุณสามารถใช้บริการของบุคคลที่สามเช่นPushpad ) และรับผิดชอบในการทริกเกอร์การแจ้งเตือนและติดต่อบริการของผู้ผลิตเบราว์เซอร์ (เช่น GCM, APN, เซิร์ฟเวอร์พุชของ Mozilla )

การเปิดเผยข้อมูล: ฉันเป็นผู้ก่อตั้ง Pushpad

นี่เป็นวิธีง่ายๆในการแจ้งเตือนแบบพุชสำหรับเบราว์เซอร์ทั้งหมดhttps://pushjs.org

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

ฉันขอให้คุณตั้งคำถามใหม่ได้ดังนี้

เราสามารถมี back-end ของเราเองเพื่อส่งการแจ้งเตือนแบบพุชไปยัง Chrome, Firefox, Opera และ Safari ได้หรือไม่?

ใช่. ภายในวันนี้(2017/05)คุณสามารถใช้การใช้งานฝั่งไคลเอ็นต์และเซิร์ฟเวอร์เดียวกันเพื่อจัดการ Chrome, Firefox และ Opera (ไม่ใช่ Safari) เนื่องจากพวกเขาใช้การแจ้งเตือนแบบพุชของเว็บในลักษณะเดียวกัน นั่นคือโปรโตคอลPush APIโดย W3C แต่ Safari มีสถาปัตยกรรมแบบเก่าของตัวเอง ดังนั้นเราต้องแยก Safari ออกจากกัน

อ้างอิงrepo เบราว์เซอร์ push- line สำหรับบรรทัดคำแนะนำเพื่อใช้การแจ้งเตือนแบบพุชของเว็บสำหรับแอปพลิเคชันเว็บด้วย back-end ของคุณเอง มันอธิบายด้วยตัวอย่างว่าคุณสามารถเพิ่มการสนับสนุนการแจ้งเตือนแบบพุชของเว็บสำหรับแอปพลิเคชันเว็บของคุณได้อย่างไร

ณ ตอนนี้ GCM ใช้ได้กับ Chrome และ Android เท่านั้น Firefox และเบราว์เซอร์อื่น ๆ ในทำนองเดียวกันมี API ของตนเอง

ตอนนี้มาถึงคำถามวิธีใช้การแจ้งเตือนแบบพุชเพื่อให้สามารถทำงานกับเบราว์เซอร์ทั่วไปทั้งหมดที่มีแบ็คเอนด์ของตัวเอง

1. คุณต้องใช้รหัสสคริปต์ฝั่งไคลเอ็นต์เช่นพนักงานบริการอ้างอิง ( Google การแจ้งเตือนแบบพุช ) แม้ว่ามันจะยังคงเหมือนเดิมสำหรับเบราว์เซอร์อื่น ๆ

2. รับปลายทางโดยใช้ Ajax บันทึกพร้อมกับชื่อเบราว์เซอร์

3. คุณต้องสร้างแบ็กเอนด์ที่มีฟิลด์สำหรับชื่อข้อความไอคอนคลิก URL ตามความต้องการของคุณ ตอนนี้หลังจากคลิกที่ส่งการแจ้งเตือนให้เรียกใช้ฟังก์ชันที่เรียกว่า send_push () ในการเขียนรหัสนี้สำหรับเบราว์เซอร์ที่แตกต่างกันเช่น

3.1 สำหรับโครเมี่ยม

 $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 สำหรับโมซิลล่า

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

สำหรับเบราว์เซอร์อื่นโปรด google ...

ฉันแนะนำให้ใช้ pubnub ฉันพยายามใช้ ServiceWorkers และ PushNotification จากเบราว์เซอร์อย่างไรก็ตามเมื่อฉันลองใช้ webviews ไม่สนับสนุนสิ่งนี้

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