Chrome ডেস্কটপ বিজ্ঞপ্তির উদাহরণ [বন্ধ]

Question

কীভাবে একজন ক্রোম ডেস্কটপ বিজ্ঞপ্তি ব্যবহার করে ? আমি এটি আমার নিজের কোডে ব্যবহার করতে চাই।

আপডেট : এখানে একটি ব্লগ পোস্ট একটি উদাহরণ সহ ওয়েবকিট বিজ্ঞপ্তিগুলি ব্যাখ্যা করে।

Comments

এইচটিএমএল বিজ্ঞপ্তিগুলি অবনমিত হওয়ার পরে আমি নভেম্বর 2012-তে আপডেট হওয়া নীচে একটি উত্তর রেখেছি । এটির মতো প্রকৃত উদাহরণ রয়েছে যা আপনি খুঁজছিলেন।

— ড্যান ড্যাসক্লেস্কু

নমুনা এবং নিবন্ধ (2013): - smartjava.org/example/notifications - smartjava.org/content/chrome-and-firefox-desktop-notifications পুরানো নিবন্ধ (2010): - html5rocks.com/en/tutorials/notifications/quick

— ক্রিস্টোফ রাউসি

আপডেট : ২০১৫ সাল পর্যন্ত ওয়েবসাইটগুলি প্রকৃত পুশ বিজ্ঞপ্তিগুলিও প্রেরণ করতে পারে, যা ব্যবহারকারী যখন ওয়েবসাইটটি সার্ফিং না করে তখনও সরবরাহ করা হয়। পরীক্ষা করে দেখুন এই উত্তর

— collimarco

এটিকে বন্ধ হিসাবে চিহ্নিত করার জন্য এই সমস্ত ভোটার অবশ্যই আইই / সাফারি প্রেমীদের হতে হবে। এটি ব্রাউজার বিজ্ঞপ্তি এবং বিশেষত ক্রোমের জন্য নির্দিষ্ট। যদি এটি এতটা বিষয় ছাড়াই থাকে তবে কেন এত লোকেরা এটি পছন্দ করছে এবং এটি প্রথম স্থানে তারকৃত হিসাবে চিহ্নিত করছে?

— প্রশস্ত

কেন বিষয় বন্ধ?

— স্মার্টমনোজ

Answer 1

আধুনিক ব্রাউজারগুলিতে, দুটি ধরণের বিজ্ঞপ্তি রয়েছে:

• ডেস্কটপ বিজ্ঞপ্তিগুলি - ট্রিগার করা সহজ, পৃষ্ঠাটি খোলা থাকবে ততক্ষণ কাজ করুন এবং কয়েক সেকেন্ড পরে স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যেতে পারে
• পরিষেবা কর্মী বিজ্ঞপ্তিগুলি - কিছুটা জটিল, তবে তারা পটভূমিতে কাজ করতে পারে (পৃষ্ঠাটি বন্ধ হওয়ার পরেও), অধ্যবসায়ী এবং ক্রিয়াকলাপ সমর্থন করে

গুগলের ওয়েব ফান্ডামেন্টাল সাইটে এমডিএন এবং পরিষেবা কর্মীদের জন্য ডকুমেন্টেড এপিআই কল একই প্যারামিটারগুলি গ্রহণ করে (ক্রিয়া ব্যতীত - ডেস্কটপ বিজ্ঞপ্তিতে পাওয়া যায় না) takes

---

নীচে ক্রোম, ফায়ারফক্স, অপেরা এবং সাফারির জন্য ডেস্কটপ বিজ্ঞপ্তির কার্যকারী উদাহরণ রয়েছে । নোট করুন যে সুরক্ষার কারণে, ক্রোম 62 দিয়ে শুরু করে, বিজ্ঞপ্তি এপিআই-র জন্য আর কোনও ক্রস-অরিজিন ইফ্রামের কাছে অনুরোধ করা যাবে না, তাই আমরা স্ট্যাকওভারফ্লো এর কোড স্নিপেট ব্যবহার করে এটি ডেমো করতে পারি না। আপনার এই উদাহরণটি আপনার সাইট / অ্যাপ্লিকেশনটিতে একটি এইচটিএমএল ফাইলে সংরক্ষণ করতে হবে এবং এটি ব্যবহার করতে localhost://বা এইচটিটিপিএস নিশ্চিত করতে হবে ।

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

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

ডাব্লু 3 সি বিজ্ঞপ্তিগুলি অনেকগুলি ব্রাউজারে কাজ করে ( ক্যানিউসে সমর্থন দেখুন ) এবং ব্যবহারকারীর অনুমতি প্রয়োজন। সেরা অনুশীলন হিসাবে, সরাসরি ব্যাট থেকে এই অনুমতি চাইবেন না। প্রথমে ব্যবহারকারীকে কেন তারা বিজ্ঞপ্তি চান এবং অন্যান্য ধাক্কা বিজ্ঞপ্তিগুলির ধরণগুলি দেখুন তা ব্যাখ্যা করুন ।

নোট করুন যে ক্রোম এই বাগের কারণে লিনাক্সে বিজ্ঞপ্তি আইকনটিকে সম্মান করে না ।

চূড়ান্ত শব্দ

বিজ্ঞপ্তি সমর্থন অব্যাহত প্রবাহে চলেছে, বিগত বছরগুলিতে বিভিন্ন এপিআই-কে অবচয় করা হয়েছে। আপনি যদি কৌতূহলী হন তবে Chrome এ কী কাজ করে এবং সমৃদ্ধ এইচটিএমএল বিজ্ঞপ্তির গল্প শিখতে এই উত্তরটির পূর্ববর্তী সম্পাদনাগুলি পরীক্ষা করে দেখুন।

এখন সর্বশেষ মানটি https://notifications.spec.whatwg.org/ এ ।

আপনি কোনও পরিষেবা কর্মী রয়েছেন কি না তার উপর নির্ভর করে কেন একই প্রভাবের জন্য দুটি পৃথক কল রয়েছে - Google এ কাজ করার সময় আমি এই টিকিটটি দায়ের করেছি দেখুন ।

সহায়ক লাইব্রেরির জন্যও notify.js দেখুন ।

Comments

@ এমঘাউই - জনপ্রিয়! = সত্য (অগত্যা)। আমি এটিকে সঠিক উত্তর হিসাবে চিহ্নিত করেছি।

— শ্রীধর রত্নাকুমার

উইন্ডো.বইবকিট নোটিকেশনস.সেকপ পারমিশন () ক্রোম-নন ব্রাউজারগুলিতে একটি ব্যতিক্রম ছুঁড়ে ফেলবে

— জেটি টেলর

ক্লোজ করা কোনও পদ্ধতি নয়। আমি মনে করি আপনি নোটিফিকেশন.ক্যান্সেল ()> decadecity.net/blog/2012/10/12/webkit-notifications-api >> এছাড়াও এটি নিজের থেকে বন্ধ হয়ে গেছে বলে মনে হয়।

— কিংঅফ হাইপোক্রিটিস

সহায়তার জন্য আপনাকে ধন্যবাদ, পুশারের সাথে এটি ব্যবহার আমাকে বিজ্ঞপ্তি সিস্টেম তৈরিতে সহায়তা করেছে।

— আজিজিত

উইন্ডোজ 8

— সার্জ

Answer 2

পরীক্ষা করে দেখুন নকশা এবং এপিআই স্পেসিফিকেশন (এটি এখনও একটি খসড়া এর) অথবা একটি সহজ উদাহরণস্বরূপ থেকে উৎস (পৃষ্ঠা আর উপলব্ধ) পরীক্ষা: এটি প্রধানত একটি কল এর window.webkitNotifications.createNotification।

আপনি যদি আরও দৃ example় উদাহরণ চান (আপনি নিজের গুগল ক্রোমের এক্সটেনশন তৈরি করার চেষ্টা করছেন এবং অনুমতি, স্থানীয় স্টোরেজ এবং এর সাথে কীভাবে ডিল করতে হয় তা জানতে চান), জিএমএল নোটিফায়ার এক্সটেনশনটি দেখুন : ইনস্টল করার পরিবর্তে সিআরএক্স ফাইলটি ডাউনলোড করুন এটি আনজিপ করুন এবং এর উত্স কোডটি পড়ুন।

Comments

সমস্ত ব্রাউজারের জন্য কাজ করে এমন কিছু নেই?

— রই নমির

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

— ব্রায়ান ফিল্ড

এই উত্তরটি 4 বছর পরে এখনই সম্পূর্ণ অপ্রচলিত। @ রয়নিমনির: বিজ্ঞপ্তি এপিআই রয়েছে। আমার উত্তর পরীক্ষা করে দেখুন ।

— ড্যান ড্যাসক্লেস্কু

উদাহরণ লিঙ্কটি মারা গেছে।

— Vinny

Answer 3

এটি window.webkitNotificationsইতিমধ্যে প্রত্যাখ্যান এবং সরানো হয়েছে বলে মনে হয় । তবে একটি নতুন এপিআই রয়েছে এবং এটি ফায়ারফক্সের সর্বশেষ সংস্করণেও কাজ করবে বলে মনে হচ্ছে।

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Comments

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

— এমপেন

সে কোথায় লিখেছিল বলে আমি দেখছি না?

— ব্র্যান্ডিটো

কোডেপেন কাজ করে না

— স্টেপান ইয়াকোভেনকো

পুনঃটুইট করুন কোডপেন লিঙ্কটি চেষ্টা করুন। elseসমস্যাটি কী তা বলার জন্য আমি শেষে একটি অতিরিক্ত যুক্ত করেছি । আপনি সম্ভবত আমার মতো বিশ্বব্যাপী বিজ্ঞপ্তিগুলি অক্ষম করেছেন:

— এমপেন

Answer 4

আমি পছন্দ করি: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc- উদাহরণ উদাহরণ তবে এটি পুরানো ভেরিয়েবল ব্যবহার করে, তাই ডেমোটি আর কাজ করে না। webkitNotificationsএখন Notification।

Comments

টুইটারের উদাহরণটি আর কাজ করে না।

— ড্যান ড্যাসক্লেস্কু

আপনি html5rocks.com/en/profiles বলতে হবে তাদের একজনকে অবশ্যই টুইটারের জন্য কাজ করা উচিত =)

— রুডি

হেহ। হাকিমকে অবহিত করার জন্য সবচেয়ে ভাল লোক , যেহেতু আমি তার উপস্থাপনের কাঠামোয় অবদান রেখেছি ।

— ড্যান ড্যাসক্লেস্কু

Answer 5

আমি এই সাধারণ বিজ্ঞপ্তি আবরণ তৈরি। এটি ক্রোম, সাফারি এবং ফায়ারফক্সে কাজ করে।

সম্ভবত অপেরা, আইই এবং এজতেও কিন্তু আমি এখনও এটি পরীক্ষা করে দেখিনি।

কেবল এখান থেকে notify.js ফাইলটি পান https://github.com/gravmatt/js-notify এবং এটি আপনার পৃষ্ঠাতে রাখুন।

এটি বোর পেতে

$ bower install js-notify

এটা এভাবে কাজ করে:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

আপনাকে শিরোনামটি সেট করতে হবে তবে দ্বিতীয় আর্গুমেন্টটি isচ্ছিক হিসাবে জসন অবজেক্ট।

Comments

@ গ্রাভমেট আপনি ফায়ারফক্সের সাথে কোন সমস্যার মুখোমুখি হয়ে গেছেন যেখানে সেখানে যদি আরও একটি ব্রাউজার উইন্ডো খোলা থাকে তবে বিজ্ঞপ্তিটি প্রদর্শিত হবে না?

— ইরান otzap

@ ইরানোটজ্যাপ এটি একাধিক ট্যাব সহ কাজ করা উচিত। আমি এমন একটি প্রকল্প পরিচালনা করি যেখানে কোনও সমস্যা নেই। তবে আমি একাধিক উইন্ডো নিয়ে নিশ্চিত নই।

— গ্রাভ্যাম্যাট

আমার একাধিক ট্যাব নিয়ে একই সমস্যা রয়েছে

— ইরান otzap

এটি ফায়ারফক্সে একাধিক ট্যাব থেকে কাজ করে?

— ইরান ওটজাপ

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

— শে

Answer 6

এখানে এপিআই-তে দুর্দান্ত ডকুমেন্টেশন রয়েছে,

https://developer.chrome.com/apps/notifications

এবং, গুগল দ্বারা সরকারী ভিডিও ব্যাখ্যা,

https://developers.google.com/live/shows/83992232-1001

Comments

সেই এপিআই কেবল ক্রোম অ্যাপ্লিকেশন এবং এক্সটেনশনে কাজ করে। এটি বিজ্ঞপ্তিগুলি API থেকে পৃথক ।

— ড্যান ড্যাসক্লেস্কু

Answer 7

Notify.js হ'ল নতুন ওয়েবকিট বিজ্ঞপ্তিগুলির চারপাশে একটি মোড়ক। এটি বেশ ভাল কাজ করে।

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

Answer 8

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>

Comments

শুধুমাত্র কোডের উত্তর পোস্ট করা থেকে বিরত থাকুন। কিছুটা মন্তব্য এবং / অথবা ব্যাখ্যা যুক্ত করুন, যাতে ভবিষ্যতে লোকেরা যখন এই পোস্টটি পড়বে তখন তারা তা বুঝতে পারবে।

— অ্যাড্রায়ান

এই নির্দিষ্ট কোড স্নিপেটের জন্য, যদিও এটি বেশ সোজা মনে হয়। অন্যান্য ব্যবহারকারীরাও মন্তব্যটিতে একটি ফলোআপ প্রশ্ন পোস্ট করতে পারেন, তাই না?

— frostshoxx

উপরের কোড সহ জেএসফিডাল কাজ করে না, "বিজ্ঞপ্তি এপিআইয়ের অনুমতি আর ক্রস- অরিজিনের আইফ্রেমে অনুরোধ করা হতে পারে না।" যাইহোক, আপনি যখন বিকাশকারী কনসোলটি খোলেন এবং প্রবেশ করবেন Notification.requestPermission();, তখন var notification = new Notification('hello', { body: "Hey there!", });বিজ্ঞপ্তিটি প্রদর্শিত হবে।

— কাই নোক

আমি দুঃখিত, তবে এই উত্তরটি আমার সাথে কী যুক্ত করে?

— ড্যান ড্যাসক্লেস্কু