पुश इवेंट

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

द पुश इवेंट

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

पुश इवेंट लिसनर को सेट अप करने का कोड, 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 में डिफ़ॉल्ट सूचना की इमेज

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() की जांच करें.

अगले सेक्शन में, हम जानेंगे कि हम सूचनाओं को स्टाइल में बदलने के लिए क्या कर सकते हैं और किस तरह का कॉन्टेंट दिखाया जा सकता है.

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

कोड लैब