যখন কোনও পরিষেবা কর্মী fetch ইভেন্টগুলি পরিচালনা করেন, তখন ব্রাউজার পরিষেবা কর্মীর প্রতিক্রিয়া দেওয়ার জন্য অপেক্ষা করে। যদিও নেটওয়ার্ক অনুরোধের লেটেন্সি অপেক্ষার একটি বড় অংশ, ব্রাউজারটিকে পরিষেবা কর্মী বুট আপ করার জন্য এবং ইভেন্ট কলব্যাকগুলি ফায়ার fetch অপেক্ষা করতে হতে পারে৷
ডিভাইস এবং এর ক্ষমতার উপর ভিত্তি করে বুটআপের সময় পরিবর্তিত হয়, তবে জড়িত সময় যথেষ্ট হতে পারে, কখনও কখনও যখন একটি CPU ধীর থাকে, বা পরিবেষ্টিত অবস্থার কারণে একটি থ্রোটল অবস্থায় কাজ করে তখন কখনও কখনও আধা সেকেন্ড পর্যন্ত হতে পারে। নেটওয়ার্ক এড়াতে পারফরম্যান্স লাভ এই স্টার্টআপ সময়কে ছাড়িয়ে যেতে পারে যখন আপনার নেভিগেশন প্রতিক্রিয়াগুলি একটি Cache উদাহরণ থেকে পরিবেশিত হয়। নেটওয়ার্কে যাওয়া নেভিগেশন অনুরোধগুলির জন্য, একজন পরিষেবা কর্মীকে পরিচয় করিয়ে দেওয়া একটি উপলব্ধিযোগ্য বিলম্ব তৈরি করতে পারে।
নেভিগেশন প্রিলোড লিখুন
নেভিগেশন প্রিলোড হল একটি পরিষেবা কর্মী বৈশিষ্ট্য যা পরিষেবা কর্মী বুটআপ সময়ের কারণে বিলম্বের সমাধান করে। নেভিগেশন প্রিলোড সক্ষম না থাকলে, পরিষেবা কর্মীর বুটআপ এবং এটি পরিচালনা করে নেভিগেশন অনুরোধ উভয়ই ধারাবাহিকভাবে ঘটবে:
এটি আদর্শ নয়, তবে আপনি নেভিগেশন প্রিলোড সক্ষম করে এটি ঠিক করতে পারেন, যা নিশ্চিত করে যে পরিষেবা কর্মী বুটআপ এবং নেভিগেশন অনুরোধ একই সাথে ঘটে:
যদিও ন্যাভিগেশন প্রিলোড এমন সাইটগুলির জন্য একটি দুর্দান্ত পারফরম্যান্স অপ্টিমাইজেশান যা পরিষেবা কর্মীদের ব্যবহার করে, এটি এমন কোনও বৈশিষ্ট্য নয় যা আপনার সমস্ত পরিস্থিতিতে সক্ষম করা উচিত। বিশেষ করে, যে সাইটগুলি একটি প্রিক্যাচড অ্যাপ শেল ব্যবহার করে তাদের নেভিগেশন প্রিলোডের প্রয়োজন হয় না, কারণ ক্যাশে কোনও নেভিগেশন লেটেন্সি ছাড়াই অ্যাপ শেল মার্কআপের জন্য নেভিগেশন অনুরোধটি পরিবেশন করে। এই ক্ষেত্রে, প্রিলোড করা প্রতিক্রিয়া নষ্ট হয়ে যাবে, যা খুব ভালো নয়।
নেভিগেশন প্রিলোড ব্যবহার করার সর্বোত্তম সময় হল যখন একটি ওয়েবসাইট HTML প্রিক্যাচ করতে পারে না। এমন ওয়েবসাইটগুলির কথা চিন্তা করুন যেখানে মার্কআপ প্রতিক্রিয়াগুলি গতিশীল এবং প্রমাণীকরণ অবস্থার মতো জিনিসগুলির সাথে পরিবর্তিত হয়৷ এইগুলির জন্য নেভিগেশন অনুরোধগুলি একটি নেটওয়ার্ক-প্রথম (বা এমনকি একটি নেটওয়ার্ক-শুধুমাত্র) কৌশল ব্যবহার করতে পারে এবং সেখানেই নেভিগেশন প্রিলোড একটি বড় পার্থক্য করতে পারে।
ওয়ার্কবক্সে নেভিগেশন প্রিলোড ব্যবহার করে
ওয়ার্কবক্স দ্বারা চালিত নয় এমন একটি পরিষেবা কর্মীতে সরাসরি নেভিগেশন প্রিলোড ব্যবহার করা কঠিন। প্রথমত, এটি সব ব্রাউজারে সমর্থিত নয় । দ্বিতীয়ত, এটি সঠিকভাবে পেতে কঠিন হতে পারে। আপনি জ্যাক আর্চিবল্ডের এই দুর্দান্ত ব্যাখ্যাকারীতে কীভাবে এটি সরাসরি ব্যবহার করবেন তা শিখতে পারেন।
ওয়ার্কবক্স নেভিগেশন প্রিলোড ব্যবহার করে সহজ করে, কারণ workbox-navigation-preload মডিউলের enable পদ্ধতি প্রয়োজনীয় বৈশিষ্ট্য সমর্থন চেক করে, সেইসাথে আপনার জন্য এটি সক্রিয় করতে activate ইভেন্ট লিসেনার তৈরি করে।
এখান থেকে, নেটওয়ার্ক-প্রথম কৌশল হ্যান্ডলার ব্যবহার করে নেভিগেশন অনুরোধগুলি পরিচালনা করার জন্য ওয়ার্কবক্স ব্যবহার করে ব্রাউজারগুলিকে সমর্থন করার জন্য নেভিগেশন প্রিলোডের সুবিধাগুলি উপলব্ধি করা হয়:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
যখন নেভিগেশন প্রিলোড সক্ষম করা হয়, ওয়ার্কবক্স নেভিগেশন অনুরোধের প্রতিক্রিয়া জানাবে যেগুলি প্রিলোড করা প্রতিক্রিয়া সহ NetworkFirst বা NetworkOnly কৌশলগুলি ব্যবহার করে।
নেভিগেশন প্রিলোড কাজ করছে কিনা তা আমি কিভাবে বলতে পারি?
ডেভেলপমেন্ট বিল্ডে , ওয়ার্কবক্স এটি কী করে সে সম্পর্কে অনেক কিছু লগ করে। আপনি যদি ওয়ার্কবক্সে নেভিগেশন প্রিলোড কাজ করছে কিনা তা পরীক্ষা করতে চান, একটি নেভিগেশন অনুরোধের সময় একটি সমর্থনকারী ব্রাউজারে কনসোলটি খুলুন এবং আপনি একটি লগ মেসেজ দেখতে পাবেন যা বলে:
এই লগিংটি ডিফল্টরূপে প্রোডাকশন বিল্ডগুলিতে দৃশ্যমান হবে না, তাই আপনি যখন আপনার পরিষেবা কর্মীকে প্রোডাকশনে মোতায়েন করবেন তখন আপনি এটি দেখতে পাবেন না, তবে এটি যাচাই করার একটি দুর্দান্ত উপায় যে নেভিগেশন প্রিলোড কাজ করছে (অন্যান্য জিনিসগুলির মধ্যে)।
প্রিলোড করা প্রতিক্রিয়া কাস্টমাইজ করা হচ্ছে
নেভিগেশন প্রিলোড ব্যবহার করার সময়, এমন পরিস্থিতিতে হতে পারে যেখানে একটি অ্যাপ্লিকেশন ব্যাকএন্ডে প্রিলোড করা প্রতিক্রিয়াগুলি কাস্টমাইজ করা প্রয়োজন। পরিষেবা কর্মীরা যে নেটওয়ার্ক থেকে আংশিক বিষয়বস্তু স্ট্রিম করে এমন একটি দৃশ্য যেখানে এটি কার্যকর হতে পারে।
এই ধরনের ক্ষেত্রে, এটি জানার জন্য অর্থ প্রদান করে যে প্রিলোড অনুরোধগুলি একটি Service-Worker-Navigation-Preload হেডার সেট সহ একটি ডিফল্ট মান true সাথে পাঠানো হয়:
Service-Worker-Navigation-Preload: true
তারপর, আপনার পছন্দের অ্যাপ্লিকেশন ব্যাকএন্ডে, আপনি এই শিরোনামটি পরীক্ষা করতে পারেন এবং আপনার প্রয়োজন অনুসারে প্রতিক্রিয়া পরিবর্তন করতে পারেন। কোনো কারণে হেডারের ডিফল্ট মান সমস্যাযুক্ত হলে, আপনি উইন্ডো প্রেক্ষাপটে এটি পরিবর্তন করতে পারেন । শুধু জেনে রাখুন যে এই শিরোনামটি পড়ার জন্য আপনি সার্ভারে যে কোনও কাজ করেন তা আপনার উপর নির্ভর করে এবং ওয়ার্কবক্সের সুযোগের বাইরে৷
উপসংহার
সরাসরি ব্যবহার করার সময় নেভিগেশন প্রিলোড সঠিকভাবে পাওয়া কঠিন, কিন্তু একজন পরিষেবা কর্মী যাতে ব্রাউজারটিকে নেভিগেশন অনুরোধ করা থেকে আটকে না রাখে তা নিশ্চিত করার জন্য সেই কঠোর পরিশ্রমটি মূল্যবান। ওয়ার্কবক্সকে ধন্যবাদ, আপনি অনেক কম কাজের সাথে নেভিগেশন প্রিলোড থেকে উপকৃত হতে পারেন। workbox-navigation-preload মডিউল সম্পর্কে আরও বিশদ পেতে, এর রেফারেন্স ডকুমেন্টেশন দেখুন ।