Làm thế nào để gửi thông báo đẩy đến trình duyệt web?

Tôi đã đọc trong vài giờ qua về API thông báo đẩy và API thông báo web . Tôi cũng phát hiện ra rằng Google và Apple cung cấp dịch vụ thông báo đẩy miễn phí thông qua GCM và APNS tương ứng.

Tôi đang cố gắng hiểu liệu chúng ta có thể triển khai thông báo đẩy tới các trình duyệt bằng Thông báo trên màn hình hay không, điều mà tôi tin là API thông báo web làm gì. Tôi đã thấy một tài liệu google về cách thực hiện điều này cho Chrome tại đây & tại đây .

Bây giờ điều vẫn chưa thể hiểu là:

1. Chúng tôi có thể sử dụng GCM / APNS để gửi thông báo đẩy tới tất cả các Trình duyệt web bao gồm Firefox & Safari không?
2. Nếu không thông qua GCM, chúng ta có thể có back-end của riêng mình để làm điều tương tự không?

Tôi tin rằng tất cả những câu trả lời trong một câu trả lời có thể giúp ích cho rất nhiều người đang có những nhầm lẫn tương tự.

Vì vậy, ở đây tôi đang trả lời câu hỏi của riêng tôi. Tôi đã có câu trả lời cho tất cả các truy vấn của mình từ những người đã xây dựng dịch vụ thông báo đẩy trong quá khứ.

Cập nhật (tháng 5 năm 2018): Dưới đây là một tài liệu toàn diện và được viết rất tốt về thông báo đẩy web từ Google.

Trả lời các câu hỏi ban đầu được hỏi 3 năm trước:

1. Chúng tôi có thể sử dụng GCM / APNS để gửi thông báo đẩy tới tất cả các Trình duyệt web bao gồm Firefox & Safari không?

Trả lời: Google đã không chấp nhận GCM kể từ tháng 4 năm 2018. Bây giờ bạn có thể sử dụng Firebase Cloud Messaging (FCM). Điều này hỗ trợ tất cả các nền tảng bao gồm cả trình duyệt web.

2. Nếu không thông qua GCM, chúng ta có thể có back-end của riêng mình để làm điều tương tự không?

Trả lời: Có, thông báo đẩy có thể được gửi từ back-end của chính chúng ta. Hỗ trợ cho cùng đã đến với tất cả các trình duyệt chính.

Kiểm tra codelab này từ Google để hiểu rõ hơn về việc triển khai.

Một số hướng dẫn:

• Thực hiện thông báo đẩy trong Django Tại đây .
• Sử dụng bình để gửi thông báo đẩy Tại đây & Tại đây .
• Gửi thông báo đẩy từ Nodejs tại đây
• Gửi thông báo đẩy bằng cách sử dụng php Tại đây & Tại đây
• Gửi thông báo đẩy từ Wordpress. Đây & Đây
• Gửi thông báo đẩy từ Drupal. Đây

Thực hiện phụ trợ riêng trong các ngôn ngữ lập trình khác nhau.:

• Nút Node.
• PHP
• Đường ray
• Con trăn
• Đi Lang - cái này và cái này

Bài đọc thêm: - - Tài liệu từ trang web Firefox có thể được đọc tại đây . - Một tổng quan rất tốt về Web Push của Google có thể được tìm thấy ở đây. - Câu hỏi thường gặp trả lời những nhầm lẫn và câu hỏi phổ biến nhất.

Có bất kỳ dịch vụ miễn phí để làm như vậy? Có một số công ty cung cấp một giải pháp tương tự trong các mô hình miễn phí, freemium và trả phí. Đang liệt kê một số dưới đây:

1. https://onesignal.com/ (Miễn phí | Hỗ trợ tất cả các nền tảng)
2. https://firebase.google.com/products/cloud-messaging/ (Miễn phí)
3. https://clevertap.com/ (Có gói miễn phí)
4. https://goroost.com/

Lưu ý: Khi chọn dịch vụ miễn phí, hãy nhớ đọc ĐKDV. Các dịch vụ miễn phí thường hoạt động bằng cách thu thập dữ liệu người dùng cho các mục đích khác nhau bao gồm phân tích.

Ngoài ra, bạn cần có HTTPS để gửi thông báo đẩy. Tuy nhiên, bạn có thể nhận https một cách tự do thông qua allowencrypt.org

Javier bao gồm các thông báo và những hạn chế hiện tại.

Đề xuất của tôi: window.postMessagetrong khi chúng tôi chờ trình duyệt bị lỗi bắt kịp, thì trình duyệt khác Worker.postMessage()vẫn hoạt động với Web Worker.

Đây có thể là tùy chọn dự phòng với trình xử lý hiển thị thông báo hộp thoại, khi kiểm tra tính năng Thông báo không thành công hoặc quyền bị từ chối.

Thông báo có tính năng và kiểm tra từ chối cấp phép:

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

Bạn có thể đẩy dữ liệu từ máy chủ sang trình duyệt thông qua Sự kiện phía máy chủ . Đây thực chất là một luồng đơn hướng mà khách hàng có thể "đăng ký" từ trình duyệt. Từ đây, bạn có thể tạo các Notificationđối tượng mới khi SSE phát trực tiếp vào trình duyệt:

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

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

Một chút cũ, nhưng bài viết này của Eric Bidelman giải thích những điều cơ bản của SSE và cũng cung cấp một số ví dụ về mã máy chủ.

GCM / APNS chỉ dành cho Chrome và Safari.

Tôi nghĩ rằng bạn có thể đang tìm kiếm Notification:

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

Nó hoạt động trong Chrome, Firefox, Opera và Safari .

Tôi giả sử bạn đang nói về thông báo đẩy thực sự có thể được gửi ngay cả khi người dùng không lướt trang web của bạn (nếu không hãy kiểm tra WebSockets hoặc các phương pháp cũ như bỏ phiếu dài).

Chúng tôi có thể sử dụng GCM / APNS để gửi thông báo đẩy tới tất cả các Trình duyệt web bao gồm Firefox & Safari không?

GCM chỉ dành cho Chrome và APN chỉ dành cho Safari. Mỗi nhà sản xuất trình duyệt cung cấp dịch vụ riêng của mình.

Nếu không thông qua GCM, chúng ta có thể có back-end của riêng mình để làm điều tương tự không?

API Push yêu cầu hai phụ trợ ! Một được cung cấp bởi nhà sản xuất trình duyệt và chịu trách nhiệm gửi thông báo đến thiết bị. Một cái khác phải là của bạn (hoặc bạn có thể sử dụng dịch vụ của bên thứ ba như Pushpad ) và chịu trách nhiệm kích hoạt thông báo và liên hệ với dịch vụ của nhà sản xuất trình duyệt (ví dụ: GCM, APN, máy chủ đẩy Mozilla ).

Tiết lộ: Tôi là người sáng lập Pushpad

đây là cách đơn giản để thực hiện thông báo đẩy cho tất cả trình duyệt https://pushjs.org

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

Tôi có thể xác định lại câu hỏi của bạn như dưới đây

Chúng tôi có thể có back-end của riêng mình để gửi thông báo đẩy tới Chrome, Firefox, Opera & Safari không?

Đúng. Đến ngày hôm nay (2017/05) , bạn có thể sử dụng cùng một triển khai phía máy khách và máy chủ để xử lý Chrome, Firefox và Opera (không có Safari). Bởi vì họ đã thực hiện thông báo đẩy web theo cùng một cách. Đó là giao thức Push API của W3C. Nhưng Safari có kiến ​​trúc cũ của riêng họ. Vì vậy, chúng tôi phải duy trì Safari riêng.

Tham khảo repo đẩy trình duyệt cho các dòng hướng dẫn để triển khai thông báo đẩy web cho ứng dụng web của bạn với back-end của riêng bạn. Nó giải thích với các ví dụ về cách bạn có thể thêm hỗ trợ thông báo đẩy web cho ứng dụng web của mình mà không cần bất kỳ dịch vụ bên thứ ba nào.

Cho đến bây giờ GCM chỉ hoạt động cho chrome và android. tương tự firefox và các trình duyệt khác có api riêng.

Bây giờ đến câu hỏi làm thế nào để thực hiện thông báo đẩy để nó sẽ hoạt động cho tất cả các trình duyệt phổ biến có back end riêng.

1. Bạn cần mã tập lệnh phía máy khách, tức là nhân viên dịch vụ, tham khảo ( thông báo đẩy của Google ). Mặc dù điều này vẫn giống nhau cho các trình duyệt khác.

2. sau khi nhận được điểm cuối bằng cách sử dụng Ajax, hãy lưu nó cùng với tên trình duyệt.

3.Bạn cần tạo back end có các trường cho tiêu đề, tin nhắn, biểu tượng, nhấp URL theo yêu cầu của bạn. bây giờ sau khi nhấp vào gửi thông báo, hãy gọi một hàm nói send_push (). Trong mã này viết cho các trình duyệt khác nhau chẳng hạn

3.1. cho 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. cho 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);

đối với các trình duyệt khác, vui lòng google ...

Tôi đề nghị sử dụng pubnub. Tuy nhiên, tôi đã thử sử dụng ServiceWorkers và PushNotification từ trình duyệt, tuy nhiên khi tôi dùng thử thì webview không hỗ trợ điều này.

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