OpenWeb पर पुश नोटिफ़िकेशन

अगर डेवलपर से पूछा जाए कि आपके मोबाइल डिवाइस में कौन-कौनसी सुविधाएं उपलब्ध नहीं हैं वेब पर, पुश नोटिफ़िकेशन हमेशा सूची में सबसे ऊपर होते हैं.

पुश नोटिफ़िकेशन की मदद से, आपके उपयोगकर्ता उन साइटों से समय पर अपडेट पाने के लिए ऑप्ट-इन कर सकते हैं जहां वे पसंद करते हैं. साथ ही, पसंद के मुताबिक बनाए गए और दिलचस्प कॉन्टेंट बनाकर, ऑडियंस के साथ दोबारा जुड़ने का मौका देते हैं.

Chrome के वर्शन 42 के हिसाब से, Push API और सूचना API इनके लिए उपलब्ध है डेवलपर.

Chrome में पुश एपीआई, टेक्नोलॉजी के कुछ अलग-अलग हिस्सों पर निर्भर करता है. इनमें ये शामिल हैं वेब ऐप्लिकेशन मेनिफ़ेस्ट और सर्विस वर्कर. इस पोस्ट में हम इन सभी टेक्नोलॉजी के बारे में जानेंगे. हालांकि, हम उन टेक्नोलॉजी के बारे में जानेंगे जिनके बारे में आपको बताया गया है ताकि आपको पुश मैसेज मिल सके. इनमें से कुछ चीज़ों को बेहतर तरीके से समझने के लिए मेनिफ़ेस्ट की अन्य सुविधाओं और सर्विस वर्कर की ऑफ़लाइन क्षमताओं, कृपया ऊपर दिए गए लिंक पर जाएं.

हम यह भी देखेंगे कि Chrome के आने वाले वर्शन में, एपीआई में क्या जोड़ा जाएगा, और आख़िर में, हमसे अक्सर पूछे जाने वाले सवाल पूछे जाएंगे.

Chrome के लिए पुश मैसेज सेवा लागू करना

इस सेक्शन में हर उस चरण के बारे में बताया गया है जिसे आपको पुश नोटिफ़िकेशन भेजने के लिए पूरा करना होगा मैसेज भेजने और पाने की सुविधा.

सर्विस वर्कर रजिस्टर करें

यह इस बात पर निर्भर करता है कि सर्विस वर्कर के लिए, पुश मैसेज लागू करना है या नहीं वेब पर. इसकी वजह यह है कि जब कोई पुश मैसेज मिलता है, तो ब्राउज़र किसी सर्विस वर्कर को शुरू कर सकता है, जो पेज को खोलकर इवेंट को भेजा जा सकता है, ताकि आप उसे मैनेज करने का तरीका तय कर सकें पुश मैसेज.

यहां एक उदाहरण दिया गया है, जिसमें यह बताया गया है कि वेब ऐप्लिकेशन में सर्विस वर्कर को कैसे रजिस्टर किया जाता है. टास्क कब शुरू होगा रजिस्ट्रेशन पूरा हो गया है, तो हम initialiseState() को कॉल करते हैं, जो हम जल्द ही इस बारे में बात करेंगे.

var isPushEnabled = false;

…

window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

बटन क्लिक हैंडलर, उपयोगकर्ता को मैसेज भेजने के लिए सदस्यता लेता है या उसकी सदस्यता छोड़ता है. isPushEnabled एक ग्लोबल वैरिएबल है. यह सिर्फ़ यह ट्रैक करता है कि फ़िलहाल, मैसेज सेवा की सदस्यता ली गई है या नहीं. इनका संदर्भ पूरे समाचार में दिया जाएगा कोड स्निपेट.

इसके बाद, हम service-worker.js को रजिस्टर करने से पहले यह जांच करते हैं कि सर्विस वर्कर काम कर रहे हैं या नहीं ऐसी फ़ाइल जिसमें पुश मैसेज को हैंडल करने का लॉजिक होता है. हम यहां ब्राउज़र को बस बता रहे हैं कि यह JavaScript फ़ाइल सर्विस वर्कर है हमारी साइट के लिए.

शुरुआती स्थिति सेट अप करें

सर्विस वर्कर के रजिस्टर होने के बाद, हमें अपने यूज़र इंटरफ़ेस (यूआई) की स्थिति सेट अप करनी होगी.

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

आपको इस दस्तावेज़ में UX से जुड़े कुछ दिशा-निर्देश मिल सकते हैं, इस लेख में, हम तकनीकी पहलुओं पर फ़ोकस करेंगे.

इस समय आपको लग सकता है कि हमारे पास सिर्फ़ दो राज्यों के बारे में बात करनी है, चालू या बंद किया गया हो. हालांकि, आस-पास कुछ अन्य राज्य भी हैं सकता है, जिन पर आपको ध्यान देने की ज़रूरत है.

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

इनमें से ज़्यादातर जांचों की वजह से, हमारा यूज़र इंटरफ़ेस (यूआई) बंद हो जाता है. इसलिए, आपको शुरुआती स्थिति को 'बंद है' पर सेट करें. इससे भ्रम की स्थिति भी कम हो जाती है आपके पेज की JavaScript के साथ कोई समस्या हो सकती है, उदाहरण के लिए JS फ़ाइल डाउनलोड किया गया है या उपयोगकर्ता ने JavaScript को बंद कर दिया है.

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

इस शुरुआती स्थिति का इस्तेमाल करने पर, हम ऊपर बताई गई जांचों से initialiseState() तरीका, यानी हमारे सर्विस वर्कर के रजिस्टर होने के बाद.

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

इन चरणों की खास जानकारी:

• हम जांच करते हैं कि showNotification ServiceWorkerरजिस्ट्रेशन में उपलब्ध है या नहीं प्रोटोटाइप बनाना चाहिए. इसके बिना हम अपने सर्विस वर्कर से कोई सूचना नहीं दिखा पाएंगे जब कोई पुश मैसेज मिलता है.
• हम जांच करते हैं कि मौजूदा Notification.permission क्या है, ताकि यह पक्का किया जा सके कि यह "denied". अनुमति न मिलने का मतलब है कि सूचनाएं नहीं दिखाई जा सकतीं जब तक कि उपयोगकर्ता, ब्राउज़र में अनुमति को मैन्युअल तरीके से न बदलता.
• पुश मैसेज की सुविधा काम करती है या नहीं, यह पता करने के लिए हम देखते हैं कि PushManager विंडो ऑब्जेक्ट में उपलब्ध होता है.
• आखिर में, हमने pushManager.getSubscription() का इस्तेमाल यह देखने के लिए किया कि क्या हमने पहले आपके पास सदस्यता है या नहीं. अगर हम ऐसा करते हैं, तो हम सर्वर को सही जानकारी पुश मैसेज सेवा पहले से चालू हो या नहीं. हम देखेंगे कि आपके पास जो इस लेख के अगले चरण में सदस्यता ऑब्जेक्ट में मौजूद है.

हम navigator.serviceWorker.ready की समस्या का समाधान होने तक इंतज़ार करते हैं, ताकि और पुश बटन को सक्षम करने के लिए सदस्यता लें, क्योंकि यह केवल सेवा के बाद वर्कर ऐक्टिव है, ताकि आप पुश मैसेज के लिए सदस्यता ले सकें.

अगला चरण यह मैनेज करना होता है कि उपयोगकर्ता, पुश मैसेज की सुविधा कब चालू करना चाहता है. हालांकि, ऐसा करने से पहले, हमें एक Google Developer Console प्रोजेक्ट सेट अप करना होगा और अपने मेनिफ़ेस्ट में कुछ पैरामीटर जोड़कर Firebase क्लाउड से मैसेज (FCM) का इस्तेमाल करें, इसे पहले Google क्लाउड मैसेजिंग (GCM) के नाम से जाना जाता था.

Firebase Developer Console पर कोई प्रोजेक्ट बनाना

Chrome, पुश मैसेज भेजने और डिलीवर करने का काम मैनेज करने के लिए, FCM का इस्तेमाल करता है; हालांकि, के लिए ऑप्ट-इन किया है, तो आपको Firebase Developer Console पर एक प्रोजेक्ट सेट अप करना होगा.

नीचे दिए गए चरण खास तौर पर Chrome, Android के लिए Opera, और Samsung के लिए हैं वह ब्राउज़र जो FCM का इस्तेमाल करता है. लेख में आगे हम इस बारे में चर्चा करेंगे कि अन्य ब्राउज़र में यह सुविधा कैसे काम करती है.

नया Firebase डेवलपर प्रोजेक्ट बनाना

शुरुआत करने के लिए, आपको https://console.firebase.google.com/ पर एक नया प्रोजेक्ट बनाना होगा 'नया प्रोजेक्ट बनाएं' पर क्लिक करके.

प्रोजेक्ट का नाम जोड़ें, प्रोजेक्ट बनाएं और आपको प्रोजेक्ट पर ले जाया जाएगा डैशबोर्ड:

इस डैशबोर्ड से, सबसे ऊपर अपने प्रोजेक्ट के नाम के बगल में मौजूद कॉग पर क्लिक करें बाएं कोने में मौजूद 'प्रोजेक्ट सेटिंग' पर क्लिक करें.

सेटिंग पेज में, 'क्लाउड से मैसेज' पर क्लिक करें करें.

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

वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें

पुश करने के लिए, हमें gcm_sender_id फ़ील्ड वाली एक मेनिफ़ेस्ट फ़ाइल जोड़नी होगी, ताकि आपकी कमाई हो सके. यह पैरामीटर सिर्फ़ इनके लिए ज़रूरी है Android और Samsung ब्राउज़र के लिए Chrome, Opera, ताकि वे FCM / GCM का उपयोग कर सकें.

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

नीचे एक बहुत ही आसान मेनिफ़ेस्ट फ़ाइल दी गई है:

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

आपको, भेजने वाले के आईडी पर gcm_sender_id की वैल्यू सेट करनी होगी आपका Firebase प्रोजेक्ट.

एक बार प्रोजेक्ट में मेनिफ़ेस्ट फ़ाइल सेव कर लेने के बाद, (manifest.json एक अच्छा तरीका है) name), तो अपने HTML से इसका संदर्भ दें और इसके शीर्ष में निम्न टैग का उपयोग करें पेज.

<link rel="manifest" href="/manifest.json">

अगर इन पैरामीटर के साथ कोई वेब मेनिफ़ेस्ट नहीं जोड़ा जाता है, तो आपको अपवाद मिलेगा जब उपयोगकर्ता को मैसेज भेजने की सदस्यता लेने की कोशिश की जाती है, तो यह गड़बड़ी होती है "Registration failed - no sender id provided" या "Registration failed - permission denied".

पुश मैसेज सेवा की सदस्यता लें

अब आपने मेनिफ़ेस्ट सेट अप कर लिया है, तो अब अपनी साइटों की JavaScript पर वापस जाएं.

सदस्यता लेने के लिए, आपको सदस्यता लें() तरीके को PushManager ऑब्जेक्ट, इसे ऐक्सेस करने के लिए, ServiceWorkerRegistration.

इससे उपयोगकर्ता से आपकी साइट के ऑरिजिन को पुश भेजने की अनुमति मांगी जाएगी नोटिफ़िकेशन. इस अनुमति के बिना, ये काम नहीं किए जा सकेंगे सदस्यता लें.

अगर प्रॉमिस दिखता है, तो सदस्यता लें() तरीके से हल होने पर, आपको PushSubscription वह ऑब्जेक्ट जिसमें एक एंडपॉइंट होगा.

हर एक के लिए, आपके सर्वर पर एंडपॉइंट सेव किया जाना चाहिए उपयोगकर्ता से संपर्क करना होगा, क्योंकि आपको बाद में उन्हें पुश मैसेज भेजने होंगे.

निम्न कोड उपयोगकर्ता को पुश संदेश सेवा के लिए सदस्यता लेता है:

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

इस समय आपका वेब ऐप्लिकेशन पुश मैसेज पाने के लिए तैयार है. हालांकि, ऐसा कुछ नहीं ऐसा तब तक होगा, जब तक हम अपने सर्विस वर्कर फ़ाइल में पुश इवेंट लिसनर नहीं जोड़ते.

सर्विस वर्कर पुश इवेंट लिसनर

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

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

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

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

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

पुश मैसेज भेजना

हमने पुश मैसेज की सदस्यता ले ली है और हमारा सर्विस वर्कर नोटिफ़िकेशन भेजा जाएगा, ताकि FCM के ज़रिए पुश मैसेज भेजा जा सके.

यह केवल FCM का इस्तेमाल करने वाले ब्राउज़र पर लागू होता है.

जब अपने सर्वर पर PushSubscription.endpoint वैरिएबल भेजा जाता है, तो FCM के लिए एंडपॉइंट खास है. इसके यूआरएल के आखिर में एक पैरामीटर होता है, जो एक registration_id है.

एंडपॉइंट का एक उदाहरण यह होगा:

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

FCM यूआरएल यह है:

https://fcm.googleapis.com/fcm/send

registration_id होगा:

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

यह सुविधा FCM का इस्तेमाल करने वाले ब्राउज़र के लिए है. किसी सामान्य ब्राउज़र में, बस एक एंडपॉइंट मिलेगा और आपको उस एंडपॉइंट को स्टैंडर्ड तरीके से कॉल करना होगा और यूआरएल चाहे जो भी हो, वह काम करेगा.

इसका मतलब यह है कि अपने सर्वर पर आपको यह जांच करनी होगी कि एंडपॉइंट FCM के लिए है और अगर यह मौजूद है, तोरजिस्ट्रेशन आईडी एक्सट्रैक्ट करें. Python में ऐसा करने के लिए ऐसा कुछ किया जा सकता है:

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

रजिस्ट्रेशन आईडी मिल जाने के बाद, FCM API को कॉल किया जा सकता है. आपने लोगों तक पहुंचाया मुफ़्त में FCM API पर संदर्भ दस्तावेज़ यहां मिल सकते हैं.

FCM को कॉल करते समय याद रखने वाली ज़रूरी बातें:

• key=<YOUR_API_KEY> की वैल्यू वाला Authorization हेडर API को कॉल करते समय सेट होना चाहिए, जहां <YOUR_API_KEY> Firebase प्रोजेक्ट से मिली एपीआई कुंजी.
  • सही भेजने वाले का आईडी ढूंढने के लिए FCM, एपीआई पासकोड का इस्तेमाल करता है. साथ ही, पक्का करें कि उपयोगकर्ता ने आपके प्रोजेक्ट के लिए अनुमति दी है और आखिर में यह पक्का करना होगा कि उस प्रोजेक्ट के लिए सर्वर के आईपी पते को अनुमति वाली सूची में शामिल किया जाए.
• application/json का सही Content-Type हेडर या application/x-www-form-urlencoded;charset=UTF-8 इस पर निर्भर करता है कि क्या डेटा को JSON या फ़ॉर्म डेटा के रूप में भेजें.
• registration_ids का कलेक्शन - ये वे रजिस्ट्रेशन आईडी हैं जिन्हें आपने अपने उपयोगकर्ताओं के एंडपॉइंट से एक्सट्रैक्ट करता है.

कृपया दस्तावेज़ देखें अपने सर्वर से पुश मैसेज भेजने के तरीके के बारे में ज़्यादा जानें. लेकिन अपने सर्विस वर्कर की तुरंत जांच के लिए cURL आपके ब्राउज़र पर एक पुश संदेश भेजने के लिए.

<YOUR_API_KEY> और <YOUR_REGISTRATION_ID> को बदलें अपने निर्देश से इस cURL निर्देश में जोड़ें और इसे टर्मिनल से चलाएं.

आपको एक शानदार सूचना दिखेगी:

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"

अपना बैकएंड लॉजिक डेवलप करते समय, यह ध्यान रखें कि ऑथराइज़ेशन हेडर और POST के मुख्य हिस्से का फ़ॉर्मैट, FCM एंडपॉइंट के लिए खास होता है. इसलिए, पता लगाएं कि एंडपॉइंट FCM के लिए है और इसमें शर्त के साथ हेडर जोड़ें और पीओएसटी को फ़ॉर्मैट करें. अन्य ब्राउज़र (और संभवतः भविष्य में Chrome) के लिए, आपको वेब पुश प्रोटोकॉल पर टैप करें.

Chrome में Push API को मौजूदा तौर पर लागू करने में एक समस्या यह है कि पुश मैसेज के साथ कोई डेटा नहीं भेजा जा सकता. नहीं, कुछ नहीं. इसकी वजह यह है कि आने वाले समय में लागू करने पर, पेलोड डेटा को सर्वर को भेजा जाएगा. इस तरह से एंडपॉइंट, वह चाहे जो भी पुश प्रोवाइडर हो, वह आसानी से पुश मैसेज. यह सुविधा, खराब परफ़ॉर्मेंस जैसे अन्य जोखिमों से भी बचाती है आपके एचटीटीपीएस सर्टिफ़िकेट और मैन इन द मिडल अटैक की पुष्टि सर्वर और पुश प्रोवाइडर की जानकारी देनी होगी. हालांकि, एन्क्रिप्ट (सुरक्षित) करने की यह सुविधा फ़िलहाल काम नहीं कर रही है, इसलिए इस बीच, आपको अपने डेटा को फ़ेच करने के लिए, सूचना को पॉप्युलेट करें.

पुश इवेंट का ज़्यादा बेहतर उदाहरण

हमने अब तक जो सूचना देखी है वह बेहद बुनियादी है. साथ ही, जहां तक सैंपल देखने के लिए दिए गए हैं, हालांकि, यह असल दुनिया में इस्तेमाल के उदाहरणों को कवर करने के मामले में काफ़ी अच्छा नहीं है.

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

नीचे दिए गए कोड में, हम एपीआई से कुछ डेटा फ़ेच करते हैं. इस रिस्पॉन्स को ऑब्जेक्ट को इकट्ठा और इस्तेमाल करें.

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

एक बार फिर से, यह बताना ज़रूरी है कि event.waitUntil() ने वादा किया है जिससे showNotification() का प्रॉमिस प्रॉमिस मिलता है. हमारा इवेंट लिसनर एसिंक्रोनस fetch() कॉल पूरा होने तक बंद नहीं होगा, और सूचना दिखाई जाती है.

आपको दिखेगा कि गड़बड़ी होने पर भी हम आपको एक सूचना दिखाते हैं. यह है क्योंकि यदि हम नहीं करते, तो Chrome अपनी सामान्य सूचना ही दिखाएगा.

उपयोगकर्ता के किसी सूचना पर क्लिक करने पर यूआरएल खोलना

जब उपयोगकर्ता किसी सूचना पर क्लिक करता है, तो notificationclick इवेंट भेजा जाता है कोचिंग दें. अपने हैंडलर में, सही कार्रवाई की जा सकती है. जैसे कि किसी टैब पर फ़ोकस करना या किसी खास यूआरएल वाली विंडो खोलना:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

यह उदाहरण एक लिंक पर क्लिक करके, ब्राउज़र में साइट के ऑरिजिन के रूट में खुलता है अगर कोई मौजूदा एक ही ऑरिजिन टैब मौजूद है और कोई नया ऑरिजिन वाला टैब खोला जा रहा है.

यहां एक पोस्ट है, जिसमें उन चीज़ों के बारे में बताया गया है जिन्हें यहां Notification API की मदद से किया जा सकता है.

किसी उपयोगकर्ता के डिवाइस की सदस्यता छोड़ना

आपने किसी उपयोगकर्ता के डिवाइस की सदस्यता ली है और उन्हें पुश मैसेज मिल रहे हैं, लेकिन उनकी सदस्यता छोड़ें?

उपयोगकर्ता के डिवाइस पर सदस्यता छोड़ने के लिए, सबसे ज़रूरी है कि unsubscribe() तरीका PushSubscription ऑब्जेक्ट को निकाल सकते हैं और अपने सर्वर से एंडपॉइंट को निकाल सकते हैं (ठीक इसी तरह आप ऐसे पुश मैसेज भेजना जो आपको नहीं मिलेंगे). नीचे दिया गया कोड यह काम करता है बिलकुल यही:

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

सदस्यता को अप-टू-डेट रखना

FCM और आपके सर्वर के बीच सदस्यताएं सिंक हो सकती हैं. पक्का करें कि तो आपका सर्वर error:NotRegistered और canonical_id नतीजे, जैसा कि FCM दस्तावेज़ में बताया गया है.

सर्विस वर्कर और आपके सर्वर. उदाहरण के लिए, सदस्यता लेने/सदस्यता छोड़ने के बाद, फ़्लैकी इंटरनेट कनेक्शन की समस्या से हो सकता है कि आप सर्वर को अपडेट न कर पाएं; या कोई उपयोगकर्ता सूचना की अनुमति वापस लेने का विकल्प मिलता है, जिससे सदस्यता अपने-आप रद्द हो जाती है. हैंडल के परिणाम की जांच करके समय-समय पर serviceWorkerRegistration.pushManager.getSubscription() (उदाहरण के लिए, करने के लिए ऑप्टिमाइज़ किया जाता है. शायद आप यह भी चाहें अगर आपके पास सदस्यता नहीं है, तो अपने-आप फिर से सदस्यता लेने की सुविधा सूचना.अनुमति == 'मंज़ूरी दी गई'.

sendSubscriptionToServer() में आपको यह तय करना होगा कि आप किस तरह की सेवाएं देती हैं endpoint को अपडेट करते समय, नेटवर्क अनुरोध पूरे नहीं हो सके. एक समाधान है कुकी में endpoint की स्थिति को ट्रैक करने के लिए का इस्तेमाल करके यह पता लगाया जा सकता है कि आपके सर्वर को नई जानकारी की ज़रूरत है या नहीं.

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

अपने वेब ऐप्लिकेशन को डीबग करने का तरीका

पुश मैसेज लागू करते समय, गड़बड़ियां इनमें से किसी एक जगह पर दिखेंगी: आपका पेज या आपके सर्विस वर्कर.

पेज में मौजूद गड़बड़ियों को DevTools. सर्विस वर्कर को डीबग करने के लिए समस्याएं हैं, तो आपके पास दो विकल्प हैं:

1. chrome://inspect > पर जाएं सर्विस वर्कर. इस व्यू में, हमारे साथ काम कर रहे सर्विस वर्कर के अलावा अन्य कोई जानकारी भी नहीं मिलेगी.
2. chrome://serviceworker-internals पर जाएं और यहां से और अगर कोई गड़बड़ी है, तो उसे देखा जा सकता है. यह पेज है जब तक DevTools में इससे मिलती-जुलती सुविधाएं सेट नहीं हैं, तब तक कुछ समय के लिए उपलब्ध रहेगी.

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

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

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

"success": 1 वाले जवाब पर ध्यान दें. अगर आपको कोई गड़बड़ी दिखती है, तो सुझाव देता है कि FCM पंजीकरण आईडी और पुश Chrome पर मैसेज नहीं भेजा जा रहा है.

Android के लिए Chrome पर सर्विस वर्कर को डीबग करना

इस समय Android के लिए Chrome पर सर्विस वर्कर को डीबग करने के बारे में साफ़ तौर पर जानकारी नहीं है. आपको chrome://inspect पर जाना होगा. इसके बाद, अपना डिवाइस ढूंढना होगा और "वर्कर पीआईडी:...." नाम वाली सूची आइटम जिसमें आपकी सेवा का यूआरएल है कर्मचारी.

पुश नोटिफ़िकेशन के लिए UX

Chrome टीम सबसे सही तरीकों का दस्तावेज़ तैयार कर रही है उपयोगकर्ता अनुभव और एक दस्तावेज़ में, को ध्यान में रखने की ज़रूरत नहीं है.

• पुश नोटिफ़िकेशन की अनुमतियों के उपयोगकर्ता अनुभव के लिए सबसे सही तरीके
• पुश नोटिफ़िकेशन एज के केस और उन्हें कम करना

Chrome और ओपन वेब पर पुश मैसेजिंग का भविष्य

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

वेब पुश प्रोटोकॉल और एंडपॉइंट

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

वेब पुश प्रोटोकॉल एक नया स्टैंडर्ड है. इसे पुश प्रोवाइडर लागू कर सकते हैं, इससे डेवलपर को इस बात की चिंता नहीं करनी होगी कि पुश प्रोवाइडर कौन है. कॉन्टेंट बनाने आइडिया यह है कि इससे एपीआई पासकोड के लिए साइन अप करने और खास तौर पर कोई ईमेल भेजने की ज़रूरत नहीं पड़ती फ़ॉर्मैट किया गया डेटा, जैसा कि आपको FCM के साथ करना हो.

Chrome पहला ऐसा ब्राउज़र था जिसने Push API को लागू किया और FCM लागू नहीं करता वेब पुश प्रोटोकॉल का इस्तेमाल करते हैं, जो कि इसी वजह से Chrome को gcm_sender_id और आपको FCM के लिए आरामदेह एपीआई का इस्तेमाल करना होगा.

Chrome का आखिरी लक्ष्य, Chrome और FCM के साथ वेब पुश प्रोटोकॉल का इस्तेमाल करना है.

तब तक, आपको एंडपॉइंट का पता लगाना होगा "https://fcm.googleapis.com/fcm/send" और इसे अन्य एंडपॉइंट से अलग मैनेज करें, जैसे कि पेलोड डेटा को खास तरीके से कॉन्फ़िगर करें और प्राधिकरण कुंजी जोड़ें.

वेब पुश प्रोटोकॉल कैसे लागू करें?

Firefox Nightly फ़िलहाल पुश पर काम कर रहा है और यह संभावित रूप से पहला ब्राउज़र होगा को लागू करने के लिए कहा जाता है.

अक्सर पूछे जाने वाले सवाल

इसकी विशेषताएं कहां हैं?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

अगर मेरी वेब मौजूदगी के एक से ज़्यादा ऑरिजिन हैं या मेरा वेब और नेटिव दोनों ऑरिजिन से है, तो क्या मुझे डुप्लीकेट सूचनाओं से बचा जा सकता है?

फ़िलहाल, इसका कोई हल नहीं है. हालांकि, Chromium पर प्रोग्रेस को फ़ॉलो किया जा सकता है.

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

मुझे gcm_send_id की ज़रूरत क्यों है?

यह इसलिए ज़रूरी है ताकि Android के लिए Chrome, Opera और Samsung ब्राउज़र कर सकें Firebase क्लाउड से मैसेज (FCM) एपीआई का इस्तेमाल करना होगा. इसका मकसद है कि मानक तय हो जाने पर वेब पुश प्रोटोकॉल (एफ़एम) और FCM काम कर सकता है.

वेब सॉकेट या सर्वर से भेजे गए इवेंट (EventSource) का इस्तेमाल क्यों नहीं किया जाता?

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

अगर मुझे बैकग्राउंड इवेंट डिलीवरी की ज़रूरत न हो, तो मैं क्या करूं?

अगर आपको बैकग्राउंड में डिलीवरी नहीं करनी है, तो Web Sockets एक बेहतरीन विकल्प है.

सूचनाएं दिखाए बिना पुश नोटिफ़िकेशन का इस्तेमाल कब किया जा सकता है (जैसे, बैकग्राउंड में साइलेंट पुश)

यह सुविधा कब उपलब्ध होगी, इसके बारे में अभी कोई तय नहीं किया गया है. हालांकि, यह सुविधा अभी उपलब्ध है बैकग्राउंड सिंक लागू करने का इंटेंट यह अभी तय नहीं हुआ है या अभी यह तय नहीं किया गया है, तो हमारा सुझाव है कि पब्लिशर को बैकग्राउंड सिंक के साथ साइलेंट पुश की सुविधा पाएं.

इसके लिए एचटीटीपीएस की ज़रूरत क्यों है? मैं डेवलपमेंट के दौरान इस पर कैसे काम करूं?

सर्विस वर्कर स्क्रिप्ट को पक्का करने के लिए, सर्विस वर्कर को सुरक्षित ऑरिजिन की ज़रूरत होती है यह कॉन्टेंट, मकसद के आधार पर बनाया गया है. यह मैन इन द मिडल से नहीं आया है हमला. फ़िलहाल, इसका मतलब लाइव साइटों पर एचटीटीपीएस का इस्तेमाल करना है. हालांकि, लोकल होस्ट विकास के दौरान काम करते हैं.

ब्राउज़र के लिए यह कैसा काम करता है?

Chrome, अपने स्टेबल वर्शन के साथ काम करता है और Mozilla Firefox Nightly में काम करता है. ज़्यादा जानकारी के लिए Push API को लागू करना गड़बड़ी का लेख पढ़ें और सूचना को लागू करने के तरीके को यहां ट्रैक किया जा सकता है.

क्या किसी खास समयावधि के बाद, सूचना को हटाया जा सकता है?

फ़िलहाल, ऐसा नहीं किया जा सकता. हालांकि, हम ज़्यादा सहायता पाने के लिए, फ़िलहाल दिख रही सूचनाओं की सूची बनाओ. अगर आपके पास इस्तेमाल का कोई उदाहरण है, तो उसे दिखाए जाने के बाद उसकी समयसीमा खत्म होने की जानकारी पाएं. हमें जानना है कि उस ईमेल में क्या है, इसलिए कृपया कोई टिप्पणी जोड़ें और हम उसे Chrome टीम को वापस भेज देंगे.

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

Chrome में पुश मैसेज सेवा की सीमाएं क्या हैं?

इस पोस्ट में कुछ सीमाएं बताई गई हैं:

• Chrome में CCM को पुश सेवा के तौर पर इस्तेमाल करने से ज़रूरतें. हम साथ मिलकर यह पता लगाने की कोशिश कर रहे हैं कि क्या इनमें से कुछ कैंपेन को आने वाले समय में.
• आपको कोई पुश मैसेज मिलने पर सूचना दिखानी होगी.
• डेस्कटॉप पर Chrome में एक चेतावनी है कि अगर Chrome न चल रहा हो, तो पुश मैसेज नहीं मिलेगा. यह ChromeOS और Android से अलग है, जहां पुश मैसेज भेजे जाते हैं हमेशा प्राप्त की जाएगी.

क्या हमें अनुमतियां एपीआई का इस्तेमाल नहीं करना चाहिए?

कॉन्टेंट बनाने अनुमति एपीआई को Chrome में लागू किया गया है, लेकिन ऐसा ज़रूरी नहीं है कि वह सभी ब्राउज़र में उपलब्ध हो. आपको यहां ज़्यादा जानकारी मिल सकती है.

किसी सूचना पर क्लिक करने के बाद, Chrome पिछला टैब क्यों नहीं खोलता?

इस समस्या का असर सिर्फ़ उन पेजों पर पड़ता है जिन पर फ़िलहाल कोई सेवा कंट्रोल नहीं है कर्मचारी. आपको यहां ज़्यादा जानकारी मिल सकती है.

अगर कोई सूचना उपयोगकर्ता के डिवाइस को पुश मिलने से पहले की हो, तो क्या करें?

आपको कोई पुश मैसेज मिलने पर, हमेशा सूचना दिखानी होगी. ऐसी स्थिति में, जहां आपको सूचना भेजना है, लेकिन यह सिर्फ़ काम का है किसी खास समयावधि के लिए, 'time_to_live' CCM पर पैरामीटर ताकि FCM मैसेज की समयसीमा खत्म होने तक उसे न भेजे और न ही उसे भेजे.

ज़्यादा जानकारी यहां मिल सकती है.

अगर मैं अपने डिवाइस को सिर्फ़ 10 पुश मैसेज भेजना चाहता हूं, तो क्या होगा?

FCM में 'संक्षिप्त_key' है ऐसा पैरामीटर जिसका इस्तेमाल करके, FCM को 'मंज़ूरी बाकी है' को बदलने के लिए कहा जा सकता है वह मैसेज जिसमें नए मैसेज के साथ वही '{/6}_key' शामिल है.

ज़्यादा जानकारी यहां मिल सकती है.