सूचनाओं में होने वाले बदलावों के बारे में सूचना देना

मैट गांट

Twitter होम पेज

सबसे पहले, मैं उस खराब टाइटल के लिए माफ़ी चाहती हूं, लेकिन ऐसा नहीं कर सकी.

Chrome 44 में, Notfication.data और ServiceWorkerRegistration.getNotifications() को जोड़ा जा सकता है. साथ ही, पुश मैसेज के साथ सूचनाओं का जवाब देते समय, इस्तेमाल के कुछ सामान्य उदाहरणों को जोड़ा जा सकता है और खोला जा सकता है या उन्हें आसान बनाया जा सकता है.

सूचना का डेटा

Notification.data की मदद से, JavaScript ऑब्जेक्ट को किसी सूचना से जोड़ा जा सकता है.

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

उदाहरण के लिए, कोई डेटा ऑब्जेक्ट बनाना और उसे अपने सूचना के विकल्पों में जोड़ना, जैसे:

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';
    var data = {
    doge: {
        wow: 'such amaze notification data'
    }
    };

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

इसका मतलब है कि हमें नोटिफ़िकेशन क्लिक इवेंट में यह जानकारी मिल सकती है:

self.addEventListener('notificationclick', function(event) {
    var doge = event.notification.data.doge;
    console.log(doge.wow);
});

इससे पहले, आपको IndexDB में डेटा को छिपाना पड़ता था या आइकॉन यूआरएल के आखिर में कुछ डालना पड़ता था.

ServiceWorkerRegistration.getNotifications()

पुश नोटिफ़िकेशन पर काम करने वाले डेवलपर का एक सामान्य अनुरोध यह होता है कि वे दिखाई देने वाली सूचनाओं पर बेहतर कंट्रोल रखें.

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

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

इसे करने का कोड काफ़ी आसान है. अपने पुश इवेंट में, मौजूदा सूचनाओं की कैटगरी पाने के लिए ServiceWorkerरजिस्ट्रेशन.getNotifications() को कॉल करें. इसके बाद, सही तरीका चुनें, चाहे वह सभी सूचनाओं को छोटा कर रहा हो या Notification.tag का इस्तेमाल करके सही तरीका चुन रहा हो.

function showNotification(title, body, icon, data) {
    var notificationOptions = {
    body: body,
    icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png',
    tag: 'simple-push-demo-notification',
    data: data
    };

    self.registration.showNotification(title, notificationOptions);
    return;
}

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

    // Since this is no payload data with the first version
    // of Push notifications, here we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
            response.status);
        // Throw an error so the promise is rejected and catch() is executed
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        var title = 'You have a new message';
        var message = data.message;
        var icon = 'images/notification-icon.png';
        var notificationTag = 'chat-message';

        var notificationFilter = {
            tag: notificationTag
        };
        return self.registration.getNotifications(notificationFilter)
            .then(function(notifications) {
            if (notifications && notifications.length > 0) {
                // Start with one to account for the new notification
                // we are adding
                var notificationCount = 1;
                for (var i = 0; i < notifications.length; i++) {
                var existingNotification = notifications[i];
                if (existingNotification.data &&
                    existingNotification.data.notificationCount) {
                    notificationCount +=
existingNotification.data.notificationCount;
                } else {
                    notificationCount++;
                }
                existingNotification.close();
                }
                message = 'You have ' + notificationCount +
                ' weather updates.';
                notificationData.notificationCount = notificationCount;
            }

            return showNotification(title, message, icon, notificationData);
            });
        });
    }).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';

        return showNotification(title, message);
    })
    );
});

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event);

    if (Notification.prototype.hasOwnProperty('data')) {
    console.log('Using Data');
    var url = event.notification.data.url;
    event.waitUntil(clients.openWindow(url));
    } else {
    event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME,
event.notification.tag).then(function(url) {
        // At the moment you cannot open third party URL's, a simple trick
        // is to redirect to the desired URL from a URL on your domain
        var redirectUrl = '/redirect.html?redirect=' +
        url;
        return clients.openWindow(redirectUrl);
    }));
    }
});

इस कोड स्निपेट की मदद से आपको सबसे पहले यह बताना होगा कि हम getNotifications() में फ़िल्टर ऑब्जेक्ट को पास करके अपनी सूचनाओं को फ़िल्टर करते हैं. इसका मतलब है कि हम किसी खास टैग (इस उदाहरण में, किसी खास बातचीत के लिए) के लिए सूचनाओं की सूची पा सकते हैं.

var notificationFilter = {
    tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)

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

var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
    var existingNotification = notifications[i];
    if (existingNotification.data && existingNotification.data.notificationCount) {
    notificationCount += existingNotification.data.notificationCount;
    } else {
    notificationCount++;
    }
    existingNotification.close();
}

हाइलाइट करने में आसान बात यह है कि आपको सूचना में close() को कॉल करना होगा, ताकि यह पक्का किया जा सके कि सूचना को सूचनाओं की सूची से हटा दिया गया है. यह Chrome में एक गड़बड़ी है, क्योंकि हर सूचना को अगली सूचना से बदल दिया जाता है, क्योंकि उसी टैग का इस्तेमाल किया जाता है. फ़िलहाल, यह बदलाव getNotifications() से दिखाए गए कलेक्शन में नहीं दिख रहा है.

यह getNotifications() का सिर्फ़ एक उदाहरण है और जैसा कि आप कल्पना कर सकते हैं, यह एपीआई कई दूसरे इस्तेमाल के उदाहरणों के बारे में बताता है.

NotificationOptions.vibrate

Chrome 45 से सूचना बनाते समय एक वाइब्रेशन पैटर्न तय किया जा सकता है. फ़िलहाल, यह सिर्फ़ Android के लिए Chrome पर काम करता है. जिन डिवाइसों पर Vibration API काम करता है, उन पर यह वाइब्रेशन पैटर्न पसंद के मुताबिक बनाने की सुविधा देता है. इसका इस्तेमाल सूचना दिखने पर किया जाता है.

वाइब्रेशन पैटर्न या तो संख्याओं का कलेक्शन हो सकता है या एक ऐसा नंबर हो सकता है जिसे एक नंबर की कलेक्शन माना जाता है. ऐरे में मौजूद वैल्यू, समय को मिलीसेकंड में दिखाती हैं. सम इंडेक्स (0, 2, 4, ...) का मतलब है कि वाइब्रेशन की अवधि कितनी है और अजीब इंडेक्स का मतलब है कि अगले वाइब्रेशन से पहले कितने समय तक रुकना है.

self.registration.showNotification('Buzz!', {
    body: 'Bzzz bzzzz',
    vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});

सुविधा के बचे हुए सामान्य अनुरोध

आम तौर पर, डेवलपर एक सुविधा के लिए अनुरोध करते हैं. वह किसी तय समयावधि के बाद किसी सूचना को बंद कर सकते हैं या किसी सूचना के दिखने पर उसे बंद कर सकते हैं.

फ़िलहाल, ऐसा कोई तरीका नहीं है जिससे ऐसा किया जा सके और स्पेसिफ़िकेशन में ऐसा कुछ भी नहीं है जिससे इसे अनुमति मिले :( लेकिन Chrome की इंजीनियरिंग टीम को इस्तेमाल के इस उदाहरण के बारे में जानकारी है.

Android की सूचनाएं

डेस्कटॉप पर, इस कोड का इस्तेमाल करके सूचना बनाई जा सकती है:

new Notification('Hello', {body: 'Yay!'});

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

मुझे इस बारे में सिर्फ़ यह बताने की वजह यह है कि पहले इस आसान सुविधा की पहचान करने से, डेस्कटॉप पर अच्छी तरह से काम करने में मदद मिलेगी और Android में कोई गड़बड़ी नहीं होगी:

if (!'Notification' in window) {
    // Notifications aren't supported
    return;
}

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

_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_

फ़िलहाल, Android और डेस्कटॉप पर किसी सुविधा का पता लगाने का सबसे अच्छा तरीका ये हैं:

    function isNewNotificationSupported() {
        if (!window.Notification || !Notification.requestPermission)
            return false;
        if (Notification.permission == 'granted')
            throw new Error('You must only call this \*before\* calling
    Notification.requestPermission(), otherwise this feature detect would bug the
    user with an actual notification!');
        try {
            new Notification('');
        } catch (e) {
            if (e.name == 'TypeError')
                return false;
        }
        return true;
    }

इसका इस्तेमाल ऐसे किया जा सकता है:

    if (window.Notification && Notification.permission == 'granted') {
        // We would only have prompted the user for permission if new
        // Notification was supported (see below), so assume it is supported.
        doStuffThatUsesNewNotification();
    } else if (isNewNotificationSupported()) {
        // new Notification is supported, so prompt the user for permission.
        showOptInUIForNotifications();
    }

ध्यान दें: वेब पुश नोटिफ़िकेशन इस्तेमाल करने के सबसे सही तरीकों की जानकारी देने वाले सभी दस्तावेज़ देखना न भूलें