Chrome डेस्कटॉप सूचना उदाहरण [बंद]

Question

Chrome डेस्कटॉप सूचनाओं का उपयोग कैसे करता है ? मैं अपने खुद के कोड में उस का उपयोग करना चाहते हैं।

अपडेट : यहां एक ब्लॉग पोस्ट है जो उदाहरण के साथ वेबकिट सूचनाओं की व्याख्या करता है।

Comments

HTML सूचनाओं के अपदस्थ हो जाने के बाद, मैंने नवंबर 2012 तक अपडेट के नीचे एक उत्तर छोड़ दिया है । इसका एक वास्तविक उदाहरण है, जैसा आप देख रहे थे।

— दान डैस्कलेस्कु

नमूना और लेख (2013): - smartjava.org/examples/notifications - smartjava.org/content/chrome-and-firefox-desktop-notifications पुराना लेख (2010): - html5rocks.com/hi/stutorials/notifications/quick

— क्रिस्टोफ़ रूसो

अपडेट : २०१५ तक वेबसाइटें वास्तविक पुश सूचनाएं भी भेज सकती हैं, जो तब भी वितरित की जाती हैं जब उपयोगकर्ता वेबसाइट पर सर्फिंग नहीं कर रहा हो। की जाँच करें इस उत्तर

— collimarco

इसे बंद के रूप में चिह्नित करने के लिए ये सभी मतदाता IE / सफारी प्रेमी होना चाहिए। यह ब्राउज़र अधिसूचना और विशेष रूप से क्रोम के लिए विशिष्ट है। यदि यह इतना ही विषय है तो क्यों इतने सारे लोग इसे पसंद कर रहे हैं और इसे पहले स्थान पर अभिनीत कर रहे हैं?

— ३

विषय बंद क्यों?

— SmartManoj

Answer 1

आधुनिक ब्राउज़रों में, दो प्रकार की सूचनाएं हैं:

• डेस्कटॉप सूचनाएं - ट्रिगर करने में सरल, जब तक पृष्ठ खुला है, तब तक काम करें और कुछ सेकंड के बाद अपने आप गायब हो सकते हैं
• सेवा कार्यकर्ता सूचनाएं - थोड़ी अधिक जटिल हैं, लेकिन वे पृष्ठभूमि में काम कर सकते हैं (पृष्ठ बंद होने के बाद भी), लगातार हैं, और कार्रवाई बटन का समर्थन करते हैं

एपीआई कॉल समान पैरामीटर (कार्यों के अलावा - डेस्कटॉप सूचनाओं पर उपलब्ध नहीं) को लेती है, जो Google के वेब फंडामेंटल साइट पर एमडीएन और सेवा श्रमिकों के लिए अच्छी तरह से प्रलेखित हैं ।

---

नीचे क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी के लिए डेस्कटॉप सूचनाओं का एक कार्यशील उदाहरण है । ध्यान दें कि सुरक्षा कारणों से, Chrome 62 से शुरू होकर, Notification API के लिए अनुमति अब क्रॉस-ऑरिजनल iframe से नहीं मांगी जा सकती है , इसलिए हम StackOverflow के कोड स्निपेट्स का उपयोग करके इसे प्रदर्शित नहीं कर सकते। आपको अपनी साइट / एप्लिकेशन पर HTML फ़ाइल में इस उदाहरण को सहेजना होगा, और localhost://HTTPS का उपयोग या उपयोग करना सुनिश्चित करना होगा ।

// 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>

हम W3C अधिसूचना एपीआई का उपयोग कर रहे हैं । क्रोम एक्सटेंशन नोटिफिकेशन एपीआई के साथ इसे भ्रमित न करें , जो कि अलग है। क्रोम एक्सटेंशन सूचनाएं जाहिर तौर पर केवल क्रोम एक्सटेंशन में काम करती हैं, और इसके लिए उपयोगकर्ता से किसी विशेष अनुमति की आवश्यकता नहीं होती है।

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

ध्यान दें कि Chrome इस बग के कारण लिनक्स पर अधिसूचना आइकन का सम्मान नहीं करता है ।

अंतिम शब्द

अधिसूचना समर्थन निरंतर प्रवाह में रहा है, जिसमें विभिन्न एपीआई पिछले वर्षों में हटाए गए हैं। यदि आप उत्सुक हैं, तो क्रोम में काम करने के लिए और समृद्ध HTML सूचनाओं की कहानी जानने के लिए इस उत्तर के पिछले संपादन देखें।

अब नवीनतम मानक https://notifications.spec.whatwg.org/ पर है ।

जैसे कि एक ही प्रभाव में दो अलग-अलग कॉल क्यों हैं, यह इस बात पर निर्भर करता है कि आप किसी सेवा कार्यकर्ता में हैं या नहीं - इस टिकट को मैंने अपने द्वारा Google में काम करने के दौरान दाखिल किया देखें ।

यह भी देखें notify.js एक सहायक पुस्तकालय के लिए।

Comments

@mghaoui - लोकप्रिय! = सच (आवश्यक)। मैंने इसे सही उत्तर के रूप में चिह्नित किया है।

— श्रीधर रत्नाकुमार

window.webkitNotifications.checkPermission () गैर-क्रोम ब्राउज़र में एक अपवाद फेंक देगा

— JT टेलर

बंद करना कोई विधि नहीं है। मुझे लगता है कि आप सूचना चाहते हैं ।.celel ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> इसके अलावा यह अपने आप बंद हो जाता है।

— KingOfHypocrites

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

— अवजीत

में काम नहीं कर क्रोम संस्करण 47.0.2526.80 देव-मीटर Windows 8 पर मोज़िला आग लोमड़ी पर काम किया है, जबकि

— Sarz

Answer 2

डिजाइन और एपीआई विनिर्देश की जांच करें (यह अभी भी एक मसौदा है) या एक साधारण उदाहरण के लिए (पृष्ठ अब उपलब्ध नहीं) से स्रोत की जांच करें: यह मुख्य रूप से एक कॉल है window.webkitNotifications.createNotification।

यदि आप अधिक मजबूत उदाहरण चाहते हैं (आप अपना स्वयं का Google Chrome एक्सटेंशन बनाने का प्रयास कर रहे हैं, और यह जानना चाहते हैं कि अनुमतियों, स्थानीय संग्रहण और इस तरह से कैसे निपटें), Gmail Notifier Extension देखें : इंस्टॉल करने के बजाय crx फ़ाइल डाउनलोड करें इसे अनज़िप करें और इसका सोर्स कोड पढ़ें।

Comments

क्या ऐसा कुछ नहीं है जो सभी ब्राउज़रों के लिए काम करता है?

— रॉय नमिर

@ रोई, एक फ़ायरफ़ॉक्स एक्सटेंशन है , साथ ही एक देशी फ़ायरफ़ॉक्स कार्यान्वयन भी है जो जल्द या बाद में आ रहा है । इंटरनेट एक्सप्लोरर के मामले में, एक संभावित समाधान आपकी साइट के उपयोगकर्ताओं को क्रोम फ़्रेम डाउनलोड करने के लिए कहना होगा, क्योंकि यह सूचनाओं को काम करने के लिए एक व्यवहार्य समाधान होगा। नहीं है कुछ अन्य माइक्रोसॉफ्ट समाधान ।

— ब्रायन फील्ड

यह उत्तर अब तक पूरी तरह से अप्रचलित है, 4 साल बाद। @RoyiNamir: नोटिफिकेशन एपीआई है। मेरा उत्तर जांचें ।

— डैन डेस्केल्सस्क्यू

उदाहरण लिंक मृत है।

— विन्नी

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

@ मिरॉन कृपया पहले पैराग्राफ में हाइपरलिंक पर एक नज़र डालें। मैंने स्रोत को लिंक किया, और फिर एसओ शिष्टाचार के अनुसार कोड को मेरे उत्तर में कॉपी किया। यदि एमडीएन एक विकी नहीं था, तो मैं इस बारे में अधिक स्पष्ट हो सकता था कि लेखक कौन था, लेकिन मैं कुछ भी नहीं दिखा रहा हूं।

— एमपीएन

मैं नहीं देखता कि उसने कहाँ लिखा है?

— ब्रैंडिटो

कोडपेन काम नहीं करता है

— Stepan Yakovenko

@StepanYakovenko कोडपेन लिंक को पुन: प्रयास करें। मैंने elseआपको यह बताने के लिए एक अतिरिक्त जोड़ा कि समस्या क्या है। आप शायद विश्व स्तर पर विकलांग सूचनाएं मुझे पसंद: \

— mpen

Answer 4

मुझे पसंद है: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples लेकिन यह पुराने चर का उपयोग करता है, इसलिए डेमो अब काम नहीं करता है। webkitNotificationsअब है Notification।

Comments

ट्विटर उदाहरण अब काम नहीं करता है।

— डैन डस्केल्सस्कु

आपको html5rocks.com/en/profiles बताना चाहिए। Em में से एक को Twitter =) के लिए काम करना चाहिए

— रुडी

हे। हकीम सूचित करने के लिए सबसे अच्छा आदमी था , क्योंकि मुझे लगता है कि उसने अपनी प्रस्तुति में योगदान दिया है।

— बजे डैन डस्केल्सस्कु

Answer 5

मैंने इसे सरल अधिसूचना आवरण बना दिया। यह क्रोम, सफारी और फायरफॉक्स पर काम करता है।

संभवतः ओपेरा, IE और एज पर भी लेकिन मैंने अभी तक इसका परीक्षण नहीं किया है।

बस यहां से Inform.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) {}
  });

आपको शीर्षक सेट करना है लेकिन दूसरा तर्क वैकल्पिक होने के कारण जसन ऑब्जेक्ट।

Comments

@gravmatt ने फ़ायरफ़ॉक्स के साथ एक समस्या का सामना किया है जहाँ अगर एक से अधिक ब्राउज़र विंडो खुली हैं, तो नोटिफिकेशन दिखाई नहीं देता है?

— एरान ओत्ज़ाप

@eranotzap इसे कई टैब के साथ काम करना चाहिए। मैं एक परियोजना चलाता हूं जहां यह कोई समस्या नहीं है। लेकिन मुझे कई खिड़कियों के साथ यकीन नहीं है।

— ग्रेवमट

मैं कई टैब के साथ एक ही समस्या है

— eran otzap

क्या यह फ़ायरफ़ॉक्स में कई टैब से काम करता है?

— eran otzap

@eranotzap मैंने इसे अब विंडोज़ और मैक पर परीक्षण किया। मैं स्क्रीन के किसी भी कोने में सूचना नहीं देख सकता, लेकिन मुझे सूचनाओं की आवाज़ सुनाई देती है और मैक पर मुझे साइडबार में अधिसूचना मिलती है (कई टैब खुले)। फ़ायरफ़ॉक्स नया इंटरनेट एक्सप्लोरर है।

— गुरुवत्त

Answer 6

यहाँ एपीआई पर अच्छा प्रलेखन है,

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

और, Google द्वारा आधिकारिक वीडियो स्पष्टीकरण,

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

कृपया कोड-केवल उत्तरों को पोस्ट करने से बचना चाहिए। कुछ टिप्पणियों और / या स्पष्टीकरण को जोड़ें, ताकि जब लोग भविष्य में इस पोस्ट को पढ़ें तो वे इसे समझेंगे।

— एड्रियन

इस विशेष कोड स्निपेट के लिए, यह बहुत सीधा लगता है, हालांकि। अन्य उपयोगकर्ता टिप्पणी पर एक अनुवर्ती प्रश्न भी पोस्ट कर सकते हैं, है ना?

— फ्रॉस्टशोक्स

ऊपर दिए गए कोड के साथ JSfiddle काम नहीं करती है, "अधिसूचना एपीआई के लिए अनुमति अब क्रॉस-मूल iframe से अनुरोध नहीं किया जा सकता है।" हालाँकि, जब आप डेवलपर कंसोल को खोलते हैं, और दर्ज करते हैं Notification.requestPermission();, तो var notification = new Notification('hello', { body: "Hey there!", });अधिसूचना दिखाई देती है।

— काई नोएक

मुझे क्षमा करें, लेकिन वास्तव में यह उत्तर मेरा क्या है?

— डैन डैस्कलेस्क्यू