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

Matt Gaunt

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

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 में डेटा को छिपाना होता था या आइकन URL - eek.

ServiceWorkerRegistration.getNotifications()

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

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

getNotifications() के बिना, आप पिछले डेटा को सबसे अच्छे तरीके से बदल सकते हैं सबसे नए मैसेज के साथ सूचना मिलेगी. 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);
    }));
    }
});

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

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 से आप स्क्रीन लॉक बनाते समय एक वाइब्रेशन पैटर्न तय कर सकते हैं सूचना पर टैप करें. उन डिवाइस पर जो Vibration API - फ़िलहाल सिर्फ़ Android के लिए Chrome - यह आपको उस वाइब्रेशन पैटर्न को कस्टमाइज़ करने देता है, का इस्तेमाल किया जाएगा.

वाइब्रेशन पैटर्न, संख्याओं का कलेक्शन या कोई एक संख्या हो सकती है जो को एक संख्या की सरणी माना जाता है. अरे में मौजूद वैल्यू, समय को इसमें दिखाती हैं मिलीसेकंड, जिनमें सम इंडेक्स (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 सूचना ऑब्जेक्ट पर कॉलबैक की सुविधा नहीं दे सकता, जैसे कि onclick. हालांकि, इसका इस्तेमाल डेस्कटॉप पर वेब के लिए सूचनाएं दिखाने के लिए किया जाता है वे ऐप्लिकेशन जो शायद अभी खुले हुए हों.

मेरे बस यही कहने की वजह यह है कि मूल रूप से, एक आसान सुविधा की पहचान करने के लिए जैसा कि नीचे दिया गया है, आपको डेस्कटॉप का इस्तेमाल करने में मदद करेगा और इससे कोई गड़बड़ी नहीं होगी 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();
    }

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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