এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি পরিষেবা কর্মী কর্মক্ষমতা পরিমাপ

Paul Kinlan

Jake Archibald তার বিকাশকারীর দক্ষতা পচা এবং পড়ে যাওয়ার বিষয়ে উদ্বিগ্ন হওয়া ব্যতীত, তিনি একটি শক্তিশালী কেস তৈরি করেছেন যে বুদ্ধিমত্তার সাথে পরিষেবা কর্মী ব্যবহার করে আপনি আপনার সাইট বা অ্যাপের কার্যকারিতা ব্যাপকভাবে উন্নত করতে পারেন। একটি ওভারভিউ জন্য ভিডিও দেখুন.

আপনি যদি জেকের পরামর্শ অনুযায়ী আপনার পৃষ্ঠা লোডের সময়কে সুপারচার্জ করতে যাচ্ছেন, তাহলে আপনাকে সত্যিই বুঝতে সক্ষম হতে হবে যে কীভাবে পরিষেবা কর্মীরা আপনার পৃষ্ঠার অনুরোধগুলিকে প্রভাবিত করে৷

রিসোর্স টাইমিং এবং ইউজার টাইমিং এপিআই হল অনেক সাইট RUM (রিয়েল ইউজার মনিটরিং) পরিকাঠামোতে গুরুত্বপূর্ণ উপাদান কারণ এটি আপনাকে সামগ্রিকভাবে বুঝতে দেয় কিভাবে আপনার সমস্ত ব্যবহারকারীরা আপনার সাইটের পারফরম্যান্স দেখেন ( অন্য একটি ব্যবহারের ক্ষেত্রে বিষয়বস্তু ইনজেকশন সনাক্ত করা হচ্ছে )। সংক্ষেপে, এটি আপনাকে আপনার সাইট থেকে করা প্রতিটি ওয়েব অনুরোধের প্রায় প্রতিটি দিক বুঝতে দেয়, ভাল, যদি না আপনার একজন পরিষেবা কর্মী বা একজন ওয়েব কর্মী না থাকে।

বর্তমান ডোমেন নয় এমন একটি ডোমেনে করা সমস্ত অনুরোধের তালিকা পেতে কীভাবে এটি ব্যবহার করা যেতে পারে তার একটি দ্রুত উদাহরণ এখানে দেওয়া হল।

var getThirdPartyRequests = function() {
    var thirdPartyRequests = [];
    var requests = window.performance.getEntriesByType("resource");
    
    var currentHost = window.location.host

    for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
    var request = requests[requestIdx];
    var url = new URL(request.name);
    var host = url.host;

    if(host != currentHost) {
        thirdPartyRequests.push(request);
    }
    }
    
    return thirdPartyRequests;
};

রিসোর্স টাইমিং এবং ইউজার টাইমিং এপিআই তৈরি করা হয়েছিল এবং প্রয়োগ করা হয়েছিল পরিষেবা কর্মী ইঞ্জিনিয়ারদের চোখের পলক পড়ার আগেই এবং উপরের কোডটি বুঝতে সক্ষম হবে না যে পরিষেবা কর্মী কীভাবে এটিকে প্রভাবিত করেছে৷

ক্রোম 45 (জুলাই 2015-এ বিটা) এর পরিবর্তনগুলির একটি সাম্প্রতিক সেট আপনাকে সমস্ত ধরণের কর্মীদের (ওয়েব এবং পরিষেবা কর্মী) রিসোর্স টাইমিং এবং ইউজার টাইমিং এপিআই-এ অ্যাক্সেস পাওয়ার ক্ষমতা প্রবর্তন করে সাহায্য করবে এবং এইভাবে আপনাকে অনুমতি দেবে আপনার সমস্ত ব্যবহারকারীদের জন্য নেটওয়ার্ক কর্মক্ষমতা শীর্ষে রাখুন.

একজন পরিষেবা কর্মী থেকে কর্মক্ষমতা মেট্রিক্স অ্যাক্সেস করা

সবচেয়ে বড় পরিবর্তন হল performance বস্তুটিকে একটি কর্মী প্রসঙ্গে (ওয়েব এবং সার্ভিসওয়ার্কার্স) যোগ করা যা এখন আপনাকে কর্মীর প্রেক্ষাপটে করা সমস্ত অনুরোধের কার্য সম্পাদনের সময় বুঝতে দেবে এবং আপনাকে আপনার নিজস্ব চিহ্ন সেট করতে দেবে। জেএস এক্সিকিউশন পরিমাপের জন্য। যদি আপনি শুধুমাত্র বর্তমান উইন্ডোর প্রেক্ষাপট থেকে কি ঘটতে পারে তা দেখতে পান তাহলে আপনি এর থেকে গুরুত্বপূর্ণ সময়ের তথ্য মিস করবেন:

পরিষেবা কর্মীর oninstall ইভেন্টের মধ্যে fetch() অনুরোধ করা হয়েছে
একটি onpush ইভেন্টে ডেটা ক্যাশ করার সময় fetch() অনুরোধগুলি এখন আপনার ব্যবহারকারীরা যে পারফরম্যান্স দেখেন তা বোঝার জন্য ট্রেস করা যেতে পারে।
অবশেষে, fetch() অনুরোধ যা onfetch হ্যান্ডলার দ্বারা করা এবং বাধা দেওয়া হয়।

শেষ বিন্দু গুরুত্বপূর্ণ. একজন পরিষেবা কর্মীকে ভাবার একটি উপায় হল একটি প্রক্সি হিসাবে যা ওয়েব UI এবং নেটওয়ার্কের মধ্যে বসে। window performance অবজেক্ট শুধুমাত্র অনুরোধের অংশের জন্য সময় এবং তথ্য দেখতে পায়, ক্লায়েন্ট এবং নেটওয়ার্কের মধ্যে বসে থাকা পরিষেবা কর্মী সম্পর্কে এটির কোন জ্ঞান নেই তাই এটি পরিষেবা কর্মীদের প্রভাব বুঝতে পারে না .

আমি এটা কিভাবে ব্যবহার করতে পারি?

একটি সাধারণ পরিষেবা কর্মী যা প্রথমে অফলাইনে সমর্থন করে একটি ইনস্টল করার ধাপ থাকবে যেখানে এটি পরবর্তী ব্যবহারের জন্য সমস্ত সম্পদ ডাউনলোড এবং সংরক্ষণ করবে

যেখানে এটি ব্যবহার করা যেতে পারে তার একটি উদাহরণ হল ইনস্টল ধাপের সময় ডেটা রেকর্ড করা এবং লগ করা যাতে আপনি বন্য ব্যবহারকারী ব্যবহারের বাস্তবতার উপর ভিত্তি করে কীভাবে আপনার ইনস্টলের কার্যকারিতা উন্নত করতে পারেন সে সম্পর্কে কিছু পরিমাপক সিদ্ধান্ত নিতে পারেন।

self.addEventListener("install", function() {
    var urls = [
    '/',
    '/images/chrome-touch-icon-192x192.png',
    '/images/ic_add_24px.svg',
    '/images/side-nav-bg@2x.jpg',
    '/images/superfail.svg',
    '/scripts/voicememo-core.js',
    '/styles/voicememo-core.css',
    '/third_party/Recorderjs/recorder.js',
    '/third_party/Recorderjs/recorderWorker.js',
    '/third_party/Recorderjs/wavepcm.js',
    '/third_party/moment.min.js',
    '/favicon.ico',
    '/manifest.json'
    ];

    urls = urls.map(function(url) {
    return new Request(url, {credentials: 'include'});
    });

    event.waitUntil(
    caches
        .open(CACHE_NAME + '-v' + CACHE_VERSION)
        .then(function(cache) {
        // Fetch all the URL's and store in the cache
        return cache.addAll(urls);
        })
        .then(function () {
        // Analyze all the requests
        var requests = self.performance.getEntriesByType("resource");
        
        // Loop across all the requests and save the timing data.
        return;
        })
    );
});

আজকে অনেক সাইট RUM ব্যবহার করে বোঝার জন্য যে তাদের বেশিরভাগ ব্যবহারকারী তাদের সাইটের অভিজ্ঞতা কেমন। গুগল অ্যানালিটিক্সের মতো সরঞ্জামগুলি ইতিমধ্যেই নেভিগেশন টাইমিং API ব্যবহার করে সাইটের গতির ডেটা রিপোর্ট করে তবে একটি কর্মী প্রসঙ্গ থেকে কর্মক্ষমতা বিশ্লেষণ অন্তর্ভুক্ত করতে আপডেট করতে হবে।

ন্যাভিগেশন টাইমিং API পরিষেবা কর্মীদের কাছে পৌঁছাবে?

এই মুহূর্তে পরিষেবা কর্মী প্রসঙ্গে নেভিগেশন টাইমিং API যোগ করার কোনও পরিকল্পনা নেই, কারণ কোনও পরিষেবা কর্মীতে কোনও ঐতিহ্যগত নেভিগেশন নেই৷ মজার বিষয় হল যে পরিষেবা কর্মীর কাছে, পরিষেবা কর্মীর নিয়ন্ত্রিত পৃষ্ঠাগুলির সেটের প্রতিটি নেভিগেশন একটি রিসোর্স আনার মতো দেখায়। এটি একাই পরিষেবা কর্মীদের আপনার ওয়েব অ্যাপে আপনার কর্মক্ষমতা যুক্তির বেশিরভাগ কেন্দ্রীভূত করার জন্য একটি অবিশ্বাস্যভাবে বাধ্যতামূলক উপায় করে তোলে।

একটি পরিষেবা কর্মী কর্মক্ষমতা পরিমাপ

একজন পরিষেবা কর্মী থেকে কর্মক্ষমতা মেট্রিক্স অ্যাক্সেস করা

আমি এটা কিভাবে ব্যবহার করতে পারি?

ন্যাভিগেশন টাইমিং API পরিষেবা কর্মীদের কাছে পৌঁছাবে?

আমি কি পরিবর্তন দেখতে পারি?

আমি আলোচনা এবং চশমা আগ্রহী