ওয়েব ব্রাউজারে পুশ বিজ্ঞপ্তি কীভাবে প্রেরণ করবেন?


185

আমি পুশ নোটিফিকেশন এপিআই এবং ওয়েব বিজ্ঞপ্তি এপিআই সম্পর্কে গত কয়েক ঘন্টা ধরে পড়ছি । আমি আরও আবিষ্কার করেছি যে গুগল এবং অ্যাপল যথাক্রমে জিসিএম এবং এপিএনএসের মাধ্যমে বিনামূল্যে পুশ বিজ্ঞপ্তি পরিষেবা দেয়।

আমি ডেস্কটপ বিজ্ঞপ্তি ব্যবহার করে ব্রাউজারগুলিতে পুশ বিজ্ঞপ্তি প্রয়োগ করতে পারি কিনা তা আমি বুঝতে চেষ্টা করছি, যা আমার বিশ্বাস ওয়েব বিজ্ঞপ্তি এপিআই যা করে। আমি এখানে এবং এখানে ক্রোমের জন্য কীভাবে এটি করা যেতে পারে তার একটি গুগল ডকুমেন্টেশন দেখেছি ।

এখন যা বুঝতে পারছি না তা হ'ল:

  1. ফায়ারফক্স এবং সাফারি সহ সমস্ত ওয়েব ব্রাউজারগুলিতে পুশ বিজ্ঞপ্তি প্রেরণের জন্য আমরা কী জিসিএম / এপিএনএস ব্যবহার করতে পারি?
  2. যদি জিসিএমের মাধ্যমে না হয় তবে আমরা কি আমাদের নিজস্ব ব্যাক-এন্ড করতে পারি?

আমি বিশ্বাস করি এই উত্তরগুলির উত্তর দেওয়া সমস্ত লোককে একই রকম বিভ্রান্তিতে পড়তে সহায়তা করতে পারে।


অবশ্যই, আপনি নিজের ব্যাকএন্ড চালাতে পারেন তবে এটি জটিল।
ডান্ডাভিস

3
এটি খুব জটিল নয়। ব্রাউজার-পুশ তৃতীয় পক্ষের পরিষেবা ছাড়াই ব্রাউজারগুলিতে কীভাবে পুশ বিজ্ঞপ্তি প্রেরণ করা যায় তার একটি সম্পূর্ণ উদাহরণ টিউটোরিয়াল। lahiiru.github.io/browser-push
ট্রাই করুন

উত্তর:


171

সুতরাং এখানে আমি আমার নিজের প্রশ্নের উত্তর দিচ্ছি। অতীতে যারা পুশ বিজ্ঞপ্তি পরিষেবা তৈরি করেছে তাদের কাছ থেকে আমি আমার সমস্ত প্রশ্নের উত্তর পেয়েছি।

আপডেট (মে 2018): গুগল থেকে ওয়েব পুশ বিজ্ঞপ্তি সম্পর্কে এখানে একটি বিস্তৃত এবং খুব ভাল লিখিত ডক।

3 বছর আগে জিজ্ঞাসিত মূল প্রশ্নের উত্তর:

  1. ফায়ারফক্স এবং সাফারি সহ সমস্ত ওয়েব ব্রাউজারগুলিতে পুশ বিজ্ঞপ্তি প্রেরণের জন্য আমরা কী জিসিএম / এপিএনএস ব্যবহার করতে পারি?

উত্তর: গুগল এপ্রিল 2018 পর্যন্ত জিসিএমকে অবমূল্যায়ন করেছে You আপনি এখন ফায়ারবেস ক্লাউড মেসেজিং (এফসিএম) ব্যবহার করতে পারেন । এটি ওয়েব ব্রাউজারগুলি সহ সমস্ত প্ল্যাটফর্ম সমর্থন করে।

  1. যদি জিসিএমের মাধ্যমে না হয় তবে আমরা কি আমাদের নিজস্ব ব্যাক-এন্ড করতে পারি?

উত্তর: হ্যাঁ, পুশ বিজ্ঞপ্তিটি আমাদের নিজস্ব ব্যাক-এন্ড থেকে পাঠানো যেতে পারে। এটির জন্য সমর্থন সমস্ত বড় ব্রাউজারে এসেছে।

বাস্তবায়নটি আরও ভালভাবে বুঝতে গুগল থেকে এই কোডল্যাবটি দেখুন ।

কিছু টিউটোরিয়াল:

  • জাজানো এখানে পুশ বিজ্ঞপ্তি প্রয়োগ করছে ।
  • এখানে এবং এখানে পুশ বিজ্ঞপ্তি প্রেরণের জন্য ফ্লাস্ক ব্যবহার করা ।
  • নডেজ থেকে এখানে পুশ নোটিফকেইটন পাঠানো হচ্ছে
  • এখানে এবং এখানে পিএইচপি ব্যবহার করে পুশ বিজ্ঞপ্তি প্রেরণ করা হচ্ছে
  • ওয়ার্ডপ্রেস থেকে পুশ বিজ্ঞপ্তি পাঠানো হচ্ছে। এখানে এবং এখানে
  • দ্রুপাল থেকে পুশ বিজ্ঞপ্তি পাঠানো হচ্ছে। এখানে

বিভিন্ন প্রোগ্রামিং ভাষায় নিজস্ব ব্যাকএন্ড বাস্তবায়ন করা হচ্ছে:

আরও পড়ুন: - - ফায়ারফক্স ওয়েবসাইট থেকে ডকুমেন্টেশন এখানে পড়তে পারেন । - গুগল দ্বারা ওয়েব পুশের একটি খুব ভাল ওভারভিউ এখানে পাওয়া যাবে। - বেশিরভাগ সাধারণ বিভ্রান্তি এবং প্রশ্নের উত্তর দেওয়া একটি FAQ

একই কাজ করার জন্য কি কোনও নিখরচায় পরিষেবা রয়েছে? কিছু সংস্থা রয়েছে যা ফ্রি, ফ্রিমিয়াম এবং অর্থ প্রদানের মডেলগুলিতে একই ধরণের সমাধান সরবরাহ করে। নীচে কয়েক তালিকাবদ্ধ করছি:

  1. https://onesignal.com/ (বিনামূল্যে | সমস্ত প্ল্যাটফর্ম সমর্থন করুন)
  2. https://firebase.google.com / প্রোডাক্টস / ক্লাউড- মেসেজিং / (বিনামূল্যে)
  3. https://clevertap.com/ (বিনামূল্যে পরিকল্পনা আছে)
  4. https://goroost.com/

দ্রষ্টব্য: একটি নিখরচায় পরিষেবা চয়ন করার সময় মনে রাখবেন টিওএস পড়ুন। বিনামূল্যে পরিষেবাগুলি প্রায়শই বিশ্লেষণ সহ বিভিন্ন উদ্দেশ্যে ব্যবহারকারীর ডেটা সংগ্রহ করে কাজ করে।

তা ছাড়া, পুশ বিজ্ঞপ্তিগুলি প্রেরণের জন্য আপনার কাছে HTTPS থাকা দরকার। তবে আপনি লেটসেনক্রিপ.ওর.র মাধ্যমে নিখরচায় https পেতে পারেন


2
আপনার কেবলমাত্র পুশ এপিআইয়ের জন্য এইচটিটিপিএস দরকার, সাফারি নয়
কলিমার্কো

5
onesignal, সুন্দর তথ্য: 3
কোকিজু

3
আপনি যদি তৃতীয় পক্ষের গ্রন্থাগারগুলি প্রদান করতে চান না, তবে এটি নিজে লেখার বিকাশকারী গাইড এখানে's cronj.com/blog/browser-push-notifications- using- জাভাস্ক্রিপ্ট । আপনি যখন নিজের মূল সাইটটি এইচটিটিপিগুলিতে সরাতে চান না তখন কীভাবে পরিচালনা করবেন তাও এতে উল্লেখ করা হয়েছে। (নোড.জেএস এবং জাভাস্ক্রিপ্ট)।
আকাশ বুধিয়া

2
এখানে আমার সম্পূর্ণ গাইড এবং উত্স কোড is lahiiru.github.io/browser-push
TRINE

4
অনিজাইনাল নিখরচায়, তবে এটি আপনার ব্যবহারকারীদের কাছ থেকে কতটা ডেটা ক্যাপচার করে তা নোট করুন। : দয়া করে ব্যবহার করার আগে শর্তাদি -এ পড়া onesignal.com/tos
Lemmings19

24

জাভিয়ার বিজ্ঞপ্তি এবং বর্তমান সীমাবদ্ধতা কভার।

আমার পরামর্শ: window.postMessageআমরা প্রতিবন্ধী ব্রাউজারটি অপেক্ষা করার জন্য অপেক্ষা করি, অন্যথায় Worker.postMessage()এখনও ওয়েব ওয়ার্কার্সের সাথে অপারেটিং করা থাকবে।

ডায়লগ বাক্স বার্তা প্রদর্শন হ্যান্ডলার সহ এগুলি ফ্যালব্যাক বিকল্প হতে পারে, যখন কোনও বিজ্ঞপ্তি বৈশিষ্ট্য পরীক্ষাটি ব্যর্থ হয় বা অনুমতি অস্বীকৃত হয়।

বিজ্ঞপ্তিটির বৈশিষ্ট্য রয়েছে এবং অস্বীকৃত-অনুমতি চেক রয়েছে:

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

13

আপনি সার্ভার সাইড ইভেন্টস এর মাধ্যমে সার্ভার থেকে ব্রাউজারে ডেটা ঠেলাতে পারেন । এটি মূলত একটি দিকনির্দেশক স্ট্রিম যা কোনও ক্লায়েন্ট একটি ব্রাউজার থেকে "সাবস্ক্রাইব" করতে পারে। এখান থেকে, আপনি Notificationব্রাউজারে এসএসই স্ট্রিম হিসাবে কেবল নতুন অবজেক্ট তৈরি করতে পারেন :

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

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

কিছুটা পুরানো, তবে এরিক বিডেলম্যানের এই নিবন্ধটি এসএসইয়ের মূল বিষয়গুলি ব্যাখ্যা করে এবং কিছু সার্ভার কোড উদাহরণও সরবরাহ করে।


10

জিসিএম / এপিএনএস যথাক্রমে কেবল ক্রোম এবং সাফারির জন্য।

আমি মনে করি আপনি খুঁজছেন হতে পারে Notification:

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

এটি ক্রোম, ফায়ারফক্স, অপেরা এবং সাফারিতে কাজ করে


9

আমি ধরে নিয়েছি আপনি আসল পুশ বিজ্ঞপ্তিগুলির বিষয়ে কথা বলছেন যা ব্যবহারকারী যখন আপনার ওয়েবসাইটটি সার্ফিং না করে থাকে তখনও সরবরাহ করা যেতে পারে (অন্যথায় ওয়েবসকেটগুলি বা দীর্ঘ ভোটদানের মতো উত্তরাধিকারের পদ্ধতিগুলি দেখুন)।

ফায়ারফক্স এবং সাফারি সহ সমস্ত ওয়েব ব্রাউজারগুলিতে পুশ বিজ্ঞপ্তি প্রেরণের জন্য আমরা কী জিসিএম / এপিএনএস ব্যবহার করতে পারি?

জিসিএম কেবলমাত্র ক্রোমের জন্য এবং এপিএন কেবলমাত্র সাফারির জন্য। প্রতিটি ব্রাউজার প্রস্তুতকারকের নিজস্ব পরিষেবা দেয়।

যদি জিসিএমের মাধ্যমে না হয় তবে আমরা কি আমাদের নিজস্ব ব্যাক-এন্ড করতে পারি?

পুশ এপিআইতে দুটি ব্যাকেন্ড দরকার ! একটি ব্রাউজার প্রস্তুতকারকের দ্বারা অফার করা হয় এবং ডিভাইসে বিজ্ঞপ্তি দেওয়ার জন্য দায়বদ্ধ। অন্যটি আপনার হতে হবে (বা আপনি পুশপাদের মতো তৃতীয় পক্ষের পরিষেবাটি ব্যবহার করতে পারেন ) এবং বিজ্ঞপ্তিটি ট্রিগার করতে এবং ব্রাউজার প্রস্তুতকারকের পরিষেবার (যেমন জিসিএম, এপিএন, মোজিলা পুশ সার্ভার ) যোগাযোগ করার জন্য দায়ী ।

প্রকাশ: আমি পুষ্পদ প্রতিষ্ঠাতা


1
পুশপ্যাডের সাথে আপনার সম্পর্কটি প্রকাশ করার জন্য আপনাকে ধন্যবাদ! এটি প্রশংসা করা হয়।
রবার্ট কলম্বিয়া

8

সমস্ত ব্রাউজার https: //pushjs.org- এর জন্য পুশ নোটিফিকেশন করার সহজ উপায়

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

মৌলিক প্রয়োজনের জন্য কার্যকর করা সহজ। খুশী হলাম।
vis2006

7

নীচে হিসাবে আমি আপনাকে প্রশ্ন পুনরায় সংজ্ঞায়িত করতে পারি

ক্রম, ফায়ারফক্স, অপেরা এবং সাফারিতে পুশ বিজ্ঞপ্তি প্রেরণের জন্য কি আমাদের নিজস্ব ব্যাক-এন্ড থাকতে পারে?

হ্যাঁ. আজ (2017/05) এর মধ্যে আপনি ক্রোম, ফায়ারফক্স এবং অপেরা (কোনও সাফারি নেই) হ্যান্ডেল করতে একই ক্লায়েন্ট এবং সার্ভার সাইড প্রয়োগ ব্যবহার করতে পারেন। কারণ তারা ওয়েব পুশ বিজ্ঞপ্তিগুলি একইভাবে প্রয়োগ করেছে implemented এটি ডাব্লু 3 সি দ্বারা পুশ এপিআই প্রোটোকল। তবে সাফারির নিজস্ব পুরানো স্থাপত্য রয়েছে। সুতরাং আমাদের আলাদাভাবে সাফারি বজায় রাখতে হবে।

পড়ুন ব্রাউজার-ধাক্কা নির্দেশিকা লাইন জন্য রেপো আপনার নিজের ব্যাক এন্ড সঙ্গে আপনার ওয়েব-অ্যাপের জন্য ওয়েব ধাক্কা বিজ্ঞপ্তি বাস্তবায়ন করতে। এটি কোনও তৃতীয় পক্ষের পরিষেবা ছাড়াই আপনি কীভাবে আপনার ওয়েব অ্যাপ্লিকেশনটির জন্য ওয়েব পুশ বিজ্ঞপ্তি সহায়তা যুক্ত করতে পারেন তার উদাহরণগুলির সাথে ব্যাখ্যা করে।


5

এখন পর্যন্ত জিসিএম কেবল ক্রোম এবং অ্যান্ড্রয়েডের জন্য কাজ করে। একইভাবে ফায়ারফক্স এবং অন্যান্য ব্রাউজারগুলির নিজস্ব এপিআই রয়েছে।

এখন কীভাবে পুশ বিজ্ঞপ্তিটি প্রয়োগ করা যায় সে প্রশ্নে আসছেন যাতে এটি সমস্ত সাধারণ ব্রাউজারগুলির জন্য নিজস্ব ব্যাক এন্ড দিয়ে কাজ করবে।

  1. আপনার ক্লায়েন্ট সাইড স্ক্রিপ্ট কোড অর্থাৎ পরিষেবা কর্মী প্রয়োজন, উল্লেখ করুন ( গুগল পুশ বিজ্ঞপ্তি )। যদিও এটি অন্যান্য ব্রাউজারগুলির জন্য একই থাকে।

২.এজ্যাক্স ব্যবহার করে শেষ পয়েন্ট পাওয়ার পরে এটি ব্রাউজারের নামের সাথে সংরক্ষণ করুন।

৩. আপনাকে আপনার প্রয়োজনীয়তা অনুসারে শিরোনাম, বার্তা, আইকন, ইউআরএল ক্লিক করার জন্য ক্ষেত্র রয়েছে এমন ব্যাক এন্ড তৈরি করতে হবে। প্রেরণ বিজ্ঞপ্তি ক্লিক করার পরে, একটি ফাংশন কল করুন সেন্ড_পশ () বলুন। উদাহরণস্বরূপ বিভিন্ন ব্রাউজারের জন্য এই রাইট কোডে

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

অন্যান্য ব্রাউজারগুলির জন্য দয়া করে গুগল ...


1

আমি পাবনাব ব্যবহার করার পরামর্শ দিচ্ছি। আমি ব্রাউজার থেকে সার্ভিস ওয়ার্কার্স এবং পুশনোটিকেশন ব্যবহার করার চেষ্টা করেছি, তবে আমি যখন চেষ্টা করেছি তখন ওয়েবভিউগুলি এটি সমর্থন করে না।

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.