वेब ब्राउजर को पुश नोटिफिकेशन कैसे भेजें?

Question

मैं पुश अधिसूचना एपीआई और वेब अधिसूचना एपीआई के बारे में पिछले कुछ घंटों से पढ़ रहा हूं । मैंने यह भी पता लगाया कि Google और Apple क्रमशः GCM और APNS के माध्यम से मुफ्त में पुश सूचना सेवा प्रदान करते हैं।

मैं यह समझने की कोशिश कर रहा हूं कि क्या हम डेस्कटॉप अधिसूचना का उपयोग करके ब्राउज़रों को धक्का अधिसूचना लागू कर सकते हैं, जो मुझे लगता है कि वेब अधिसूचना एपीआई क्या करती है। मैंने एक Google प्रलेखन देखा कि यह कैसे यहां और यहां क्रोम के लिए किया जा सकता है ।

अब जो नहीं समझ पा रहा है वह है:

1. क्या हम Firefox और Safari सहित सभी वेब ब्राउज़रों को पुश सूचना भेजने के लिए GCM / APNS का उपयोग कर सकते हैं?
2. यदि GCM के माध्यम से नहीं तो क्या हम अपना स्वयं का बैक-एंड कर सकते हैं?

मेरा मानना ​​है कि इन सभी का जवाब एक ही जवाब में बहुत से लोगों को मिल सकता है जो समान भ्रम पाल रहे हैं।

Comments

यकीन है, आप अपने स्वयं के बैकएंड को चला सकते हैं, लेकिन यह जटिल है।

— 3

यह ज्यादा जटिल नहीं है। ब्राउज़र-पुश तृतीय पक्ष सेवा के बिना ब्राउज़र को पुश सूचनाएं भेजने के तरीके पर एक पूर्ण उदाहरण ट्यूटोरियल है। lahiiru.github.io/browser-push

— TRiNE

Answer 1

इसलिए यहां मैं अपने ही सवाल का जवाब दे रहा हूं। मुझे उन सभी प्रश्नों के उत्तर मिल गए हैं, जिन्होंने अतीत में पुश अधिसूचना सेवाओं का निर्माण किया है।

अपडेट (मई 2018): यहां Google से वेब पुश अधिसूचना पर एक व्यापक और एक बहुत अच्छी तरह से लिखा गया दस्तावेज़ है।

3 साल पहले पूछे गए मूल सवालों के जवाब:

1. क्या हम Firefox और Safari सहित सभी वेब ब्राउज़रों को पुश सूचना भेजने के लिए GCM / APNS का उपयोग कर सकते हैं?

उत्तर: Google ने अप्रैल 2018 तक GCM को हटा दिया है। अब आप Firebase Cloud Messaging (FCM) का उपयोग कर सकते हैं । यह वेब ब्राउज़र सहित सभी प्लेटफार्मों का समर्थन करता है।

2. यदि GCM के माध्यम से नहीं तो क्या हम अपना स्वयं का बैक-एंड कर सकते हैं?

उत्तर: हां, पुश नोटिफिकेशन हमारे अपने बैक-एंड से भेजा जा सकता है। उसी के लिए समर्थन सभी प्रमुख ब्राउज़रों के लिए आया है।

कार्यान्वयन को बेहतर ढंग से समझने के लिए Google से इस कोडलैब की जाँच करें ।

कुछ ट्यूटोरियल:

• Django यहाँ में धक्का अधिसूचना लागू करना ।
• यहाँ और यहाँ पुश अधिसूचना भेजने के लिए फ्लास्क का उपयोग करना ।
• Nodejs यहाँ से धक्का नोटिफ़िटोन भेजना
• यहां और यहां php का उपयोग करके पुश सूचना भेजना
• Wordpress से पुश अधिसूचना भेजना। यहाँ और यहाँ
• Drupal से पुश सूचना भेजना। यहाँ

विभिन्न प्रोग्रामिंग भाषाओं में अपने स्वयं के बैकएंड को लागू करना ।:

• NodeJS।
• पीएचपी
• रेल
• अजगर
• जाओ लैंग - यह और यह

आगे की रीडिंग: - - फ़ायरफ़ॉक्स वेबसाइट से प्रलेखन यहाँ पढ़ा जा सकता है । - Google द्वारा वेब पुश का बहुत अच्छा अवलोकन यहां पाया जा सकता है। - सबसे सामान्य भ्रमों और सवालों के जवाब देने वाले अक्सर पूछे जाने वाले प्रश्न।

क्या ऐसा करने के लिए कोई मुफ्त सेवाएं हैं? कुछ कंपनियां हैं जो फ्री, फ्रीमियम और पेड मॉडल में समान समाधान प्रदान करती हैं। नीचे कुछ सूचीबद्ध हैं:

1. https://onesignal.com/ (नि: शुल्क | सभी प्लेटफार्मों का समर्थन करें)
2. https://firebase.google.com/products/cloud-messaging/ (फ्री)
3. https://clevertap.com/ (मुफ्त योजना है)
4. https://goroost.com/

नोट: जब नि : शुल्क सेवा चुनते हैं तो टीओएस पढ़ना याद रखें। नि: शुल्क सेवाएं अक्सर एनालिटिक्स सहित विभिन्न उद्देश्यों के लिए उपयोगकर्ता डेटा एकत्र करके काम करती हैं।

इसके अलावा, पुश सूचनाएँ भेजने के लिए आपके पास HTTPS होना आवश्यक है। हालाँकि, आप https आज़मा सकते हैं letencrypt.org के माध्यम से

Comments

आपको केवल पुश एपीआई के लिए HTTPS की जरूरत है, सफारी के लिए नहीं

— कोलिमार्को

onesignal, अच्छी जानकारी: 3

— कोकिज़ू

आप 3 पार्टी पुस्तकालयों का भुगतान करने की इच्छा नहीं रखते हैं, यहां यह खुद को लिखने का एक डेवलपर गाइड है। cronj.com/blog/browser-push-notifications-using-javascript । यह भी उल्लेख करता है कि जब आप अपनी मुख्य साइट को एचटीटीपी में स्थानांतरित नहीं करना चाहते हैं तो कैसे संभालें। (Node.js और जावास्क्रिप्ट)।

— आकाश बुधिया

यहाँ मेरा पूरा गाइड और सोर्स कोड है। lahiiru.github.io/browser-push

— TRIENE

Onesignal मुफ़्त है, लेकिन ध्यान दें कि यह आपके उपयोगकर्ताओं से कितना डेटा कैप्चर करता है। कृपया उपयोग करने से पहले टीओएस पढ़ें: onesignal.com/tos

— Lemmings19

Answer 2

जेवियर ने अधिसूचनाएं और वर्तमान सीमाएं कवर कीं।

मेरा सुझाव: window.postMessageजबकि हम विकलांग ब्राउज़र को पकड़ने के लिए प्रतीक्षा करते हैं, अन्यथा Worker.postMessage()अभी भी वेब वर्कर्स के साथ काम कर रहे हैं।

जब एक अधिसूचना सुविधा परीक्षण विफल हो जाता है या अनुमति से वंचित किया जाता है, तो संवाद बॉक्स संदेश प्रदर्शन हैंडलर के साथ ये फ़ॉलबैक विकल्प हो सकता है।

अधिसूचना में सुविधा और अस्वीकृत-अनुमति चेक है:

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

Answer 3

आप सर्वर से ब्राउज़र तक सर्वर साइड इवेंट के माध्यम से डेटा को पुश कर सकते हैं । यह अनिवार्य रूप से एक यूनिडायरेक्शनल स्ट्रीम है जो एक क्लाइंट एक ब्राउज़र से "सदस्यता" ले सकता है। यहाँ से, आप NotificationSSEs ब्राउज़र में स्ट्रीम के रूप में नई वस्तुएँ बना सकते हैं :

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

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

थोड़ा पुराना, लेकिन एरिक बिडेलमैन का यह लेख एसएसई की मूल बातें बताता है और कुछ सर्वर कोड उदाहरण भी प्रदान करता है।

Answer 4

GCM / APNS क्रमशः क्रोम और सफारी के लिए ही है।

मुझे लगता है कि आप देख सकते हैं Notification:

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

यह क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी में काम करता है ।

Answer 5

मुझे लगता है कि आप वास्तविक पुश सूचनाओं के बारे में बात कर रहे हैं जो तब भी वितरित की जा सकती हैं जब उपयोगकर्ता आपकी वेबसाइट पर सर्फिंग नहीं कर रहा है (अन्यथा वेबसॉकेट्स या लंबी मतदान जैसी विरासत विधियों की जांच करें)।

क्या हम Firefox और Safari सहित सभी वेब ब्राउज़रों को पुश सूचना भेजने के लिए GCM / APNS का उपयोग कर सकते हैं?

GCM केवल Chrome के लिए है और APN केवल सफारी के लिए है। प्रत्येक ब्राउज़र निर्माता अपनी स्वयं की सेवा प्रदान करता है।

यदि GCM के माध्यम से नहीं तो क्या हम अपना स्वयं का बैक-एंड कर सकते हैं?

पुश एपीआई को दो बैकएंड की आवश्यकता है ! एक ब्राउज़र निर्माता द्वारा की पेशकश की है और डिवाइस के लिए सूचना देने के लिए जिम्मेदार है। दूसरा आपका होना चाहिए (या आप पुष्पाद की तरह एक तृतीय पक्ष सेवा का उपयोग कर सकते हैं ) और अधिसूचना को ट्रिगर करने और ब्राउज़र निर्माता की सेवा (यानी GCM, APN, मोज़िला पुश सर्वर ) से संपर्क करने के लिए जिम्मेदार है ।

प्रकटीकरण: मैं पुष्पाद संस्थापक हूं

Comments

पुशपैड के साथ अपने संबंधों का खुलासा करने के लिए धन्यवाद! यह सराहनीय है।

— रॉबर्ट कोलंबिया

Answer 6

यह सभी ब्राउज़र https://pushjs.org के लिए पुश नोटिफिकेशन करने का सरल तरीका है

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

Comments

बुनियादी जरूरतों के लिए लागू करना आसान है। अच्छा लगा।

— vibs2006

Answer 7

क्या मैं आपको नीचे दिए गए प्रश्न को फिर से परिभाषित कर सकता हूं

क्या क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी को पुश नोटिफिकेशन भेजने के लिए हमारा अपना बैक-एंड हो सकता है?

हाँ। आज (2017/05) तक , आप क्रोम, फ़ायरफ़ॉक्स और ओपेरा (कोई सफारी) को संभालने के लिए एक ही क्लाइंट और सर्वर साइड कार्यान्वयन का उपयोग कर सकते हैं। क्योंकि उन्होंने वेब पुश सूचनाओं को एक ही तरह से लागू किया है। यह W3C द्वारा पुश एपीआई प्रोटोकॉल है। लेकिन सफारी की अपनी पुरानी वास्तुकला है। इसलिए हमें सफारी को अलग से बनाए रखना होगा।

अपने स्वयं के बैक-एंड के साथ अपने वेब-ऐप के लिए वेब पुश अधिसूचना को लागू करने के लिए गाइड लाइनों के लिए ब्राउज़र-पुश रेपो को देखें । यह उदाहरणों के साथ बताता है कि आप बिना किसी तीसरे पक्ष की सेवाओं के अपने वेब एप्लिकेशन के लिए वेब पुश अधिसूचना समर्थन कैसे जोड़ सकते हैं।

Answer 8

अब तक GCM केवल क्रोम और एंड्रॉइड के लिए काम करता है। इसी तरह फ़ायरफ़ॉक्स और अन्य ब्राउज़रों की अपनी एपी है।

अब सवाल आ रहा है कि पुश नोटिफिकेशन को कैसे लागू किया जाए ताकि यह सभी कॉमन ब्राउजर्स के लिए खुद के बैक एंड के साथ काम करे।

1. आपको क्लाइंट साइड स्क्रिप्ट कोड यानी सेवा कार्यकर्ता, संदर्भ ( Google पुश अधिसूचना ) की आवश्यकता है। यद्यपि यह अन्य ब्राउज़रों के लिए समान है।

2. अजाक्स का उपयोग करके समापन बिंदु प्राप्त करने के बाद इसे ब्राउज़र नाम के साथ सहेजें।

3. आपको बैक एंड बनाने की आवश्यकता है जिसमें आपकी आवश्यकताओं के अनुसार शीर्षक, संदेश, आइकन, क्लिक URL के लिए फ़ील्ड हैं। अब सेंड नोटिफिकेशन पर क्लिक करने के बाद, function को 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 ...

Answer 9

मैं पबनब का उपयोग करने का सुझाव देता हूं। मैंने हालांकि ब्राउज़र से ServiceWorkers और PushNotification का उपयोग करने की कोशिश की, लेकिन जब मैंने कोशिश की कि वेब साक्षात्कार ने इसका समर्थन नहीं किया।

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