একটি পরিষেবা কর্মী ব্যবহার করে নেটওয়ার্কে অপেক্ষা না করে নেভিগেশন অনুরোধে সাড়া দিন।
নেভিগেশন অনুরোধগুলি হল আপনার ব্রাউজার দ্বারা তৈরি করা HTML নথিগুলির জন্য অনুরোধ যখনই আপনি নেভিগেশন বারে একটি নতুন URL লিখুন, বা আপনাকে একটি নতুন URL-এ নিয়ে যাওয়া একটি পৃষ্ঠার একটি লিঙ্ক অনুসরণ করুন৷ এখানেই পরিষেবা কর্মীরা কর্মক্ষমতার উপর তাদের সবচেয়ে বড় প্রভাব ফেলে: আপনি যদি নেটওয়ার্কের জন্য অপেক্ষা না করে নেভিগেশন অনুরোধের প্রতিক্রিয়া জানাতে একজন পরিষেবা কর্মীকে ব্যবহার করেন, আপনি নিশ্চিত করতে পারেন যে নেটওয়ার্কটি অনুপলব্ধ হলে স্থিতিস্থাপক হওয়ার পাশাপাশি নেভিগেশনগুলি নির্ভরযোগ্যভাবে দ্রুত হয়। এটি হল একক বৃহত্তম পারফরম্যান্স জয় যা একজন পরিষেবা কর্মী থেকে আসে, বনাম HTTP ক্যাশিংয়ের মাধ্যমে যা সম্ভব।
নেটওয়ার্ক নির্দেশিকা থেকে লোড করা সংস্থান সনাক্তকরণে বিশদ হিসাবে, একটি নেভিগেশন অনুরোধ নেটওয়ার্ক ট্র্যাফিকের "জলপ্রপাত" এ করা সম্ভাব্য অনেক অনুরোধের মধ্যে প্রথম। একটি নেভিগেশন অনুরোধের মাধ্যমে আপনি যে HTML লোড করেন তা ইমেজ, স্ক্রিপ্ট এবং শৈলীর মতো সাবরিসোর্সের জন্য অন্য সমস্ত অনুরোধের প্রবাহ বন্ধ করে দেয়।
একটি পরিষেবা কর্মীর fetch ইভেন্ট হ্যান্ডলারের ভিতরে, আপনি FetchEvent এ request.mode প্রপার্টি চেক করে একটি অনুরোধ একটি নেভিগেশন কিনা তা নির্ধারণ করতে পারেন। যদি এটি 'navigate' এ সেট করা থাকে, তাহলে এটি একটি নেভিগেশন অনুরোধ।
একটি সাধারণ নিয়ম হিসাবে, একটি নেভিগেশন অনুরোধের জন্য HTML প্রতিক্রিয়া ক্যাশে করতে দীর্ঘস্থায়ী Cache-Control headers ব্যবহার করবেন না। তাদের সাধারণত নেটওয়ার্কের মাধ্যমে সন্তুষ্ট হওয়া উচিত, Cache-Control: no-cache , নিশ্চিত করতে যে এইচটিএমএল, পরবর্তী নেটওয়ার্ক অনুরোধের চেইন সহ, (যুক্তিসঙ্গতভাবে) তাজা। দুর্ভাগ্যবশত ব্যবহারকারী যখনই একটি নতুন পৃষ্ঠায় নেভিগেট করেন তখন নেটওয়ার্কের বিরুদ্ধে যাওয়া মানে প্রতিটি নেভিগেশন ধীর হতে পারে । খুব অন্তত, এর মানে হল যে এটি নির্ভরযোগ্যভাবে দ্রুত হবে না।
স্থাপত্যের জন্য বিভিন্ন পদ্ধতি
নেটওয়ার্ক এড়ানোর সময় কীভাবে নেভিগেশন অনুরোধের প্রতিক্রিয়া জানাতে হয় তা বের করা কঠিন হতে পারে। সঠিক পদ্ধতি আপনার ওয়েব সাইটের আর্কিটেকচার এবং ব্যবহারকারীরা নেভিগেট করতে পারে এমন অনন্য ইউআরএলের সংখ্যার উপর নির্ভর করে।
সমস্ত সমাধানের জন্য কোনো এক-আকার-ফিট না থাকলেও, নিম্নলিখিত সাধারণ নির্দেশিকাগুলি আপনাকে সিদ্ধান্ত নিতে সাহায্য করবে যে কোন পদ্ধতিটি সবচেয়ে কার্যকর।
ছোট স্ট্যাটিক সাইট
যদি আপনার ওয়েব অ্যাপে তুলনামূলকভাবে অল্প সংখ্যক (মনে করুন: কয়েক ডজন) অনন্য ইউআরএল থাকে এবং সেই ইউআরএলগুলির প্রত্যেকটি একটি ভিন্ন স্ট্যাটিক এইচটিএমএল ফাইলের সাথে মিলে যায়, তাহলে একটি কার্যকর পদ্ধতি হল সেই সমস্ত এইচটিএমএল ফাইলগুলিকে ক্যাশে করা এবং প্রতিক্রিয়া জানানো। উপযুক্ত ক্যাশে HTML সহ নেভিগেশন অনুরোধের জন্য।
প্রিক্যাচিং ব্যবহার করে, পরিষেবা কর্মী ইনস্টল হওয়ার সাথে সাথে আপনি এইচটিএমএলকে আগাম ক্যাশে করতে পারেন এবং প্রতিবার যখন আপনি আপনার সাইটটি পুনর্নির্মাণ করবেন এবং আপনার পরিষেবা কর্মীকে পুনঃনিয়োগ করবেন তখন ক্যাশে করা HTML আপডেট করতে পারবেন৷
বিকল্পভাবে, আপনি যদি আপনার সমস্ত এইচটিএমএল প্রিক্যাচ করা এড়াতে চান—হয়তো ব্যবহারকারীরা আপনার সাইটে URL-এর একটি উপসেটে নেভিগেট করার প্রবণতা রাখে—আপনি একটি পুরানো-যখন-পুনর্বিন্যাস রানটাইম ক্যাশিং কৌশল ব্যবহার করতে পারেন। এই পদ্ধতির বিষয়ে সতর্ক থাকুন, যদিও প্রতিটি পৃথক HTML নথি ক্যাশে করা এবং আলাদাভাবে আপডেট করা হয়। HTML-এর জন্য রানটাইম ক্যাশিং ব্যবহার করা সবচেয়ে উপযুক্ত যদি আপনার কাছে অল্প সংখ্যক ইউআরএল থাকে যেগুলি একই ব্যবহারকারীদের দ্বারা ঘন ঘন পুনরালোচিত হয় এবং আপনি যদি সেই URLগুলি একে অপরের থেকে স্বাধীনভাবে পুনরায় যাচাই করা সম্পর্কে স্বাচ্ছন্দ্য বোধ করেন।
একক পৃষ্ঠার অ্যাপ
একটি একক-পৃষ্ঠার আর্কিটেকচার প্রায়শই আধুনিক ওয়েব অ্যাপ্লিকেশন দ্বারা ব্যবহৃত হয়। এতে, ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ব্যবহারকারীর ক্রিয়াকলাপের প্রতিক্রিয়া হিসাবে এইচটিএমএল পরিবর্তন করে। ব্যবহারকারী ওয়েব অ্যাপের সাথে ইন্টারঅ্যাক্ট করার সাথে সাথে এই মডেলটি হিস্ট্রি এপিআই ব্যবহার করে বর্তমান ইউআরএল পরিবর্তন করতে, যা কার্যকরভাবে একটি "সিমুলেটেড" নেভিগেশনের দিকে পরিচালিত করে। যদিও পরবর্তী নেভিগেশনগুলি "ভুয়া" হতে পারে, তবে প্রাথমিক নেভিগেশনটি আসল, এবং এটি নেটওয়ার্কে ব্লক করা নেই তা নিশ্চিত করা এখনও গুরুত্বপূর্ণ৷
সৌভাগ্যবশত, আপনি যদি একক-পৃষ্ঠার আর্কিটেকচার ব্যবহার করেন, ক্যাশে থেকে প্রাথমিক নেভিগেশন পরিবেশন করার জন্য অনুসরণ করার জন্য একটি সরল প্যাটার্ন রয়েছে: অ্যাপ্লিকেশন শেল । এই মডেলে, আপনার পরিষেবা কর্মী একই, একক HTML ফাইলটি ফেরত দিয়ে নেভিগেশন অনুরোধে সাড়া দেয় যা ইতিমধ্যেই প্রিক্যাচ করা হয়েছে — অনুরোধ করা URL যাই হোক না কেন। এই এইচটিএমএলটি বেয়ার-বোন হওয়া উচিত, সম্ভবত, একটি জেনেরিক লোডিং সূচক বা কঙ্কাল সামগ্রী নিয়ে গঠিত। ব্রাউজার একবার ক্যাশে থেকে এই HTML লোড করলে, আপনার বিদ্যমান ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টটি দখল করে নেয় এবং মূল নেভিগেশন অনুরোধ থেকে URL-এর জন্য সঠিক HTML সামগ্রী রেন্ডার করে।
ওয়ার্কবক্স এই পদ্ধতিটি বাস্তবায়নের জন্য প্রয়োজনীয় সরঞ্জামগুলি সরবরাহ করে; navigateFallback option আপনাকে আপনার অ্যাপ শেল হিসাবে কোন HTML নথি ব্যবহার করতে হবে তা নির্দিষ্ট করতে দেয়, সাথে একটি ঐচ্ছিক অনুমতি এবং অস্বীকার তালিকার সাথে এই আচরণটি আপনার URL-এর একটি উপসেটে সীমাবদ্ধ করতে।
বহু-পৃষ্ঠার অ্যাপ
যদি আপনার ওয়েব সার্ভার আপনার সাইটের এইচটিএমএল গতিশীলভাবে তৈরি করে, অথবা আপনার যদি কয়েক ডজনের বেশি অনন্য পৃষ্ঠা থাকে, তাহলে নেভিগেশন অনুরোধগুলি পরিচালনা করার সময় নেটওয়ার্ক এড়ানো অনেক কঠিন। অন্য সবকিছুর পরামর্শ সম্ভবত আপনার জন্য প্রযোজ্য হবে।
কিন্তু মাল্টি-পেজ অ্যাপ্লিকেশানগুলির একটি নির্দিষ্ট উপসেটের জন্য, আপনি এমন একটি পরিষেবা কর্মী প্রয়োগ করতে সক্ষম হতে পারেন যা HTML তৈরি করতে আপনার ওয়েব সার্ভারে ব্যবহৃত যুক্তিটিকে সম্পূর্ণরূপে প্রতিলিপি করে৷ যদি আপনি সার্ভার এবং পরিষেবা কর্মী পরিবেশের মধ্যে রাউটিং এবং টেমপ্লেটিং তথ্য ভাগ করতে পারেন, এবং বিশেষ করে, যদি আপনার ওয়েব সার্ভার জাভাস্ক্রিপ্ট ব্যবহার করে ( Node.js- নির্দিষ্ট বৈশিষ্ট্যগুলির উপর নির্ভর না করে, যেমন ফাইল সিস্টেম অ্যাক্সেসের উপর নির্ভর না করে) তাহলে এটি সবচেয়ে ভাল কাজ করে।
যদি আপনার ওয়েব সার্ভারটি সেই শ্রেণীতে পড়ে এবং আপনি নেটওয়ার্ক থেকে এইচটিএমএল জেনারেশন সরানোর জন্য এবং আপনার পরিষেবা কর্মীর মধ্যে একটি পদ্ধতির অন্বেষণ করতে চান, তবে SPA-এর বাইরে নির্দেশিকা: আপনার PWA-এর জন্য বিকল্প আর্কিটেকচারগুলি আপনাকে শুরু করতে পারে।
অন্য সব কিছুর
আপনি যদি ক্যাশেড এইচটিএমএল দিয়ে নেভিগেশন অনুরোধে সাড়া না দিতে পারেন, তবে আপনাকে অবশ্যই পদক্ষেপ নিতে হবে যাতে আপনার সাইটে একজন পরিষেবা কর্মী যোগ করা (অন্যান্য, নন-এইচটিএমএল অনুরোধগুলি পরিচালনা করার জন্য) আপনার নেভিগেশনগুলিকে ধীর করে না দেয়। একটি নেভিগেশন অনুরোধে সাড়া দেওয়ার জন্য পরিষেবা কর্মীকে ব্যবহার না করেই শুরু করা অল্প পরিমাণ লেটেন্সি চালু করবে (যেমন বিল্ডিং ফাস্টার, সার্ভিস ওয়ার্কার সহ আরও স্থিতিস্থাপক অ্যাপে ব্যাখ্যা করা হয়েছে)। আপনি নেভিগেশন প্রিলোড নামক একটি বৈশিষ্ট্য সক্ষম করে এবং তারপরে আপনার fetch ইভেন্ট হ্যান্ডলারের ভিতরে আগে থেকে লোড করা নেটওয়ার্ক প্রতিক্রিয়া ব্যবহার করে এই ওভারহেডটি প্রশমিত করতে পারেন৷
ওয়ার্কবক্স একটি সহায়ক লাইব্রেরি প্রদান করে যা বৈশিষ্ট্য-শনাক্ত করে যে নেভিগেশন প্রিলোড সমর্থিত কিনা, এবং যদি তাই হয়, আপনার পরিষেবা কর্মীকে নেটওয়ার্ক প্রতিক্রিয়া ব্যবহার করতে বলার প্রক্রিয়াটিকে সহজ করে।
অ্যারন বার্ডেন আনস্প্ল্যাশে ছবি তুলেছেন