पुश इवेंट

Matt Gaunt

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

द पुश इवेंट

कोई मैसेज मिलने पर, आपके सर्विस वर्कर में एक पुश इवेंट भेजा जाएगा.

पुश इवेंट लिसनर सेट अप करने का कोड किसी भी दूसरे इवेंट से काफ़ी मिलता-जुलता होना चाहिए श्रोता का नाम जिसे आप JavaScript में लिखते हैं:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

सर्विस वर्कर के लिए नए, ज़्यादातर डेवलपर के लिए इस कोड का सबसे अजीब बिट self है वैरिएबल. self का इस्तेमाल आम तौर पर वेब वर्कर में किया जाता है, जो कि सर्विस वर्कर होता है. self इसका मतलब है ग्लोबल स्कोप, जैसा कि एक वेब पेज में window शामिल होता है. वहीं, वेब वर्कर और सर्विस वर्कर के लिए self, वर्कर के बारे में है.

ऊपर दिए गए उदाहरण में, self.addEventListener() को इवेंट लिसनर जोड़ने के तौर पर माना जा सकता है और खुद सर्विस वर्कर का ऐक्सेस वापस ले लेता है.

पुश इवेंट के उदाहरण में, हम देखते हैं कि कोई डेटा मौजूद है या नहीं. इसके बाद, हम कंसोल पर कुछ प्रिंट करते हैं.

पुश इवेंट से डेटा पार्स करने के अन्य तरीके भी हैं:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

ज़्यादातर लोग json() या text() का इस्तेमाल, अपने आवेदन से मिलने वाली उम्मीद के हिसाब से करते हैं.

इस उदाहरण में पुश इवेंट लिसनर जोड़ने और डेटा ऐक्सेस करने का तरीका बताया गया है, लेकिन यह में दो सबसे ज़रूरी सुविधाएं मौजूद नहीं हैं. यह कोई सूचना नहीं दिखा रही है और यह event.waitUntil() का इस्तेमाल नहीं कर रहा है.

इंतज़ार करें

सर्विस वर्कर के बारे में जानने के लिए एक बात यह है कि सर्विस वर्कर कोड चलने लगेगा. ब्राउज़र तय करता है कि उसे कब सक्रिय करना है और कब सक्रिय करना है उसे खत्म कर सकता है. आप ब्राउज़र को सिर्फ़ एक ही तरीका बता सकते हैं, "नमस्ते, मैं अहम कामों में बहुत व्यस्त हूँ प्रॉडक्ट", का मतलब है कि event.waitUntil() तरीके में प्रॉमिस पास करना है. इससे, ब्राउज़र सर्विस वर्कर को तब तक चलाएं, जब तक कि आपका पूरा वादा पूरा न हो जाए.

पुश इवेंट के साथ, इस सुविधा का इस्तेमाल करने से पहले आपको एक सूचना दिखानी होगी आपका जो वादा पूरा हुआ वह पूरा हो गया.

यहां सूचना दिखाने का एक बुनियादी उदाहरण दिया गया है:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

self.registration.showNotification() को कॉल करने का तरीका, उपयोगकर्ता को ऐसा प्रॉमिस मिलेगा जो सूचना दिखाए जाने के बाद रिज़ॉल्व हो जाएगा.

इस उदाहरण को जितना हो सके उतना साफ़ रखने के लिए, मैंने इस वादे को promiseChain नाम वाला वैरिएबल. इसके बाद, इसे event.waitUntil() में पास कर दिया जाता है. मुझे पता है कि यह है बहुत ज़्यादा शब्दों में होती है, लेकिन मैंने ऐसी कई समस्याएं देखी हैं जो यह समझने में ग़लतफ़हमी हो रही है कि waitUntil() में क्या भेजा जाना चाहिए या वादों के पूरा न हो पाने की वजह से ऐसा क्या होना चाहिए चेन.

डेटा के लिए नेटवर्क के अनुरोध और पुश इवेंट को ट्रैक करने के मामले में, यह ज़्यादा मुश्किल उदाहरण है Analytics ऐसा दिख सकता है:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

यहां हम ऐसे फ़ंक्शन को कॉल कर रहे हैं जो प्रॉमिस pushReceivedTracking() दिखाता है, हालांकि, उदाहरण के लिए, हम नेटवर्क का अनुरोध करने का दिखावा कर सकते हैं को अपडेट किया है. हम एक नेटवर्क अनुरोध भी कर रहे हैं, जिससे हमें जवाब दिया गया हो और टाइटल के लिए जवाबों के डेटा का इस्तेमाल करके सूचना दिखाई गई हो और सूचना का मैसेज.

जब तक ये दोनों काम एक-दूसरे के साथ Promise.all() के साथ ये वादे किए गए. इससे होने वाले प्रॉमिस को event.waitUntil() में पास किया जाता है इसका मतलब है कि सूचना देखने से पहले ब्राउज़र तब तक इंतज़ार करेगा, जब तक दोनों वादे पूरे नहीं हो जाते को दिखाया गया है और सर्विस वर्कर को खत्म किया जा रहा है.

ध्यान दें: अगर आपको लगता है कि आपके प्रॉमिस चेन को समझने में परेशानी हो रही है या कुछ पेचीदा है, तो मुझे लगता है कि चीज़ों को अलग-अलग फ़ंक्शन में बांटने से, काम को आसान करने में मदद मिलती है. मेरा सुझाव है कि चिप वॉल्टन का यह ब्लॉग पोस्ट, लंबे समय तक चलने वाले प्रॉमिस चेन पर आधारित हो. ध्यान रखने वाली बात यह है कि आपको इस बात पर प्रयोग करना चाहिए कि वादों को कैसे लिखा जा सकता है और एक ऐसा तरीका ढूंढने के लिए जो आपके लिए काम करे, उन्हें जोड़ने का तरीका आज़माएं.

हमें waitUntil() को लेकर चिंता होनी चाहिए. साथ ही, इसे इस्तेमाल करने के तरीके को समझने के लिए, ऐसी सामान्य समस्याएं जिनका सामना डेवलपर करते हैं, वे यह है कि जब प्रॉमिस चेन गलत होती है या पूरी तरह से काम नहीं करती है, तो Chrome इसे "डिफ़ॉल्ट" दिखाओ सूचना:

Chrome सिर्फ़ "इस साइट को बैकग्राउंड में अपडेट किया गया है" दिखाएगा. सूचना मिलने पर जब पुश मैसेज मिला है और सर्विस वर्कर में पुश इवेंट कोई टैग नहीं event.waitUntil() को पास किए गए प्रॉमिस पूरे होने के बाद सूचना.

डेवलपर के इस पकड़ में आने की मुख्य वजह यह होती है कि उनका कोड अक्सर self.registration.showNotification() को कॉल करते हैं, लेकिन वे ऐसा नहीं कर रहे कुछ भी हासिल नहीं कर सकते. इससे थोड़ी-थोड़ी देर में डिफ़ॉल्ट सूचना मिलेगी दिखाया जा रहा है. उदाहरण के लिए, हम ऊपर दिए गए उदाहरण में self.registration.showNotification() है और हम इसे देखने का जोखिम उठाते हैं सूचना पर टैप करें.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

आप आसानी से जान सकते हैं कि कोई चीज़ कितनी आसानी से छूट गई है.

बस याद रखें - अगर आपको वह सूचना दिखती है, तो प्रॉमिस चेन और event.waitUntil() देखें.

अगले सेक्शन में, हम यह देखेंगे कि स्टाइल से जुड़ी सूचनाएं पाने के लिए हम क्या कर सकते हैं और हम किस तरह का कॉन्टेंट दिखा सकते हैं.

आगे कहां जाना है

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

कोड लैब

• पुश नोटिफ़िकेशन क्लाइंट बनाना
• पुश नोटिफ़िकेशन सर्वर बनाना