বিজ্ঞপ্তি প্রয়োজন ইন্টারঅ্যাকশন - ডেস্কটপে একটি মসৃণ বিজ্ঞপ্তি UX

ক্রোমে নোটিফিকেশন এবং পুশ মেসেজিং আসার পর থেকে আমরা অনেক কিছু শিখেছি। ডেস্কটপ-শ্রেণির ডিভাইস সম্পর্কে একটি নির্দিষ্ট প্রতিক্রিয়া ছিল যে ব্যবহারকারীর দ্বারা সক্রিয়ভাবে বরখাস্ত না হওয়া পর্যন্ত বিজ্ঞপ্তিগুলি ব্যবহারকারীর স্ক্রিনে থাকবে এবং দৃশ্যমান থাকবে।

পৃষ্ঠাটি খোলা হলে একটি সাধারণ জাভাস্ক্রিপ্ট টাইমার তৈরি করা সম্ভব যা স্বয়ংক্রিয়ভাবে বিজ্ঞপ্তিটি বন্ধ করে দেবে। কিন্তু আমরা এখন এমন একটি বিশ্বে বাস করি যেখানে পরিষেবা কর্মী রয়েছে: যেখানে ওয়েব অ্যাপগুলি একটি উইন্ডোর জীবনকাল অতিক্রম করতে পারে এবং পরিষেবা কর্মীদের সংস্থানগুলি সংরক্ষণ করতে যত তাড়াতাড়ি সম্ভব ঘুমাতে দেওয়া হয়৷ এর মানে ব্যবহারকারীদের জন্য একটি ভাল অভিজ্ঞতা তৈরি করার জন্য আমাদের আরেকটি উপায় প্রয়োজন।

নোটিফিকেশন স্পেকটি সম্প্রতি আপডেট করা হয়েছে যাতে ডেভেলপারকে ইঙ্গিত করার ক্ষমতা দেয় যে বিজ্ঞপ্তিটি সিস্টেমের দ্বারা স্বয়ংক্রিয়ভাবে খারিজ করা উচিত নয়

একটি বিজ্ঞপ্তিতে একটি সংশ্লিষ্ট প্রয়োজন মিথস্ক্রিয়া পছন্দ পতাকা রয়েছে যা প্রাথমিকভাবে সেট করা নেই। সেট করা হলে, ইঙ্গিত করে যে যথেষ্ট বড় স্ক্রীন সহ ডিভাইসগুলিতে, ব্যবহারকারী বিজ্ঞপ্তিটি সক্রিয় বা খারিজ না করা পর্যন্ত বিজ্ঞপ্তিটি সহজেই উপলব্ধ থাকা উচিত।

এটি অদ্ভুত বলে মনে হতে পারে, কিন্তু এটি কি বোঝায় যে যদি না বলা হয় তবে বিজ্ঞপ্তিটি অল্প সময়ের পরে দৃশ্য থেকে সরানো উচিত।

Chrome 47 (অক্টোবর 2015 এ বিটা) এখন requireInteraction বিকল্পকে সমর্থন করে। এটি স্পষ্টভাবে প্রদান করা এবং true সেট করা না হলে, ডেস্কটপের সমস্ত বিজ্ঞপ্তি প্রায় 20 সেকেন্ড পরে খারিজ হয়ে যাবে৷ যদিও মজার অংশটি হল যে Chrome সম্প্রতি সমস্ত ডেস্কটপ প্ল্যাটফর্ম থেকে বিজ্ঞপ্তি কেন্দ্র সরিয়ে দিয়েছে (কিন্তু ChromeOS), এর মানে হল যে ন্যূনতম বিজ্ঞপ্তিগুলিকে খারিজ করা বলে মনে করা হয় এবং পরিষেবা কর্মীতে getNotifications পেতে একটি কলে অ্যাক্সেসযোগ্য নয়৷

অ্যান্ড্রয়েডের জন্য Chrome-এ, বিজ্ঞপ্তি ট্রে এলাকায় বিজ্ঞপ্তিগুলি ছোট করা হয়েছে, তাই requireInteraction বিকল্পটি উপেক্ষা করা হয়েছে৷

navigator.serviceWorker.register('sw.js');

function showNotifications() {
    Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('requireInteraction: true', {
            body: 'Requires interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: true,
            tag: 'require-interaction'
        });

        registration.showNotification('requireInteraction: false', {
            body: 'Does not require interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: false,
            tag: 'no-require-interaction'
        });
        });
    }
    });
}

ডেমো চেষ্টা করুন .