আবশ্যিক ক্যাশিং গাইড

Andrew Guan

Demián Renzulli

কিছু ওয়েবসাইটের ফলাফল সম্পর্কে অবহিত না করেই পরিষেবা কর্মীর সাথে যোগাযোগ করতে হতে পারে। এখানে কিছু উদাহরণঃ:

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

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

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

দ্রষ্টব্য: ওয়েব কর্মী বনাম পরিষেবা কর্মীদের কখন ব্যবহার করতে হবে তার উচ্চ-স্তরের ব্যাখ্যার জন্য কর্মীদের ওভারভিউ দেখুন এবং অন্যান্য সাধারণ ব্যবহারের ক্ষেত্রে গাইডের জন্য শ্রমিকদের সাথে যোগাযোগ করুন সিরিজের বাকি অংশগুলি দেখুন৷

উৎপাদন ক্ষেত্রে

1-800-Flowers.com পণ্যের বিশদ পৃষ্ঠাগুলিতে পরবর্তী নেভিগেশনের গতি বাড়ানোর জন্য বিভাগ পৃষ্ঠাগুলিতে শীর্ষ আইটেমগুলিকে প্রিফেচ করার জন্য postMessage() এর মাধ্যমে পরিষেবা কর্মীদের সাথে প্রয়োজনীয় ক্যাশিং (প্রিফেচিং) প্রয়োগ করেছে৷

কোন আইটেমগুলিকে প্রিফেচ করতে হবে তা নির্ধারণ করতে তারা একটি মিশ্র পদ্ধতি ব্যবহার করে:

• পৃষ্ঠা লোডের সময় তারা পরিষেবা কর্মীকে শীর্ষ 9টি আইটেমের জন্য JSON ডেটা পুনরুদ্ধার করতে বলে এবং ফলাফলের প্রতিক্রিয়া বস্তুগুলিকে ক্যাশে যুক্ত করতে বলে।
• অবশিষ্ট আইটেমগুলির জন্য, তারা mouseover ইভেন্টটি শোনে, যাতে, যখন কোনও ব্যবহারকারী একটি আইটেমের উপরে কার্সার নিয়ে যায়, তখন তারা "চাহিদা" অনুযায়ী সম্পদের জন্য একটি আনয়ন ট্রিগার করতে পারে।

তারা JSON প্রতিক্রিয়া সঞ্চয় করতে ক্যাশে API ব্যবহার করে:

1-800Flowers.com-এ পণ্য তালিকার পৃষ্ঠাগুলি থেকে JSON পণ্য ডেটা প্রিফেচ করা হচ্ছে।

ব্যবহারকারী যখন কোনো আইটেমে ক্লিক করেন, তখন নেটওয়ার্কে যাওয়ার প্রয়োজন ছাড়াই এর সাথে যুক্ত JSON ডেটা ক্যাশে থেকে তোলা যেতে পারে, যা নেভিগেশনকে দ্রুত করে তোলে।

ওয়ার্কবক্স ব্যবহার করে

ওয়ার্কবক্স workbox-window প্যাকেজের মাধ্যমে একটি পরিষেবা কর্মীকে বার্তা পাঠানোর একটি সহজ উপায় প্রদান করে, একটি মডিউলের সেট যা উইন্ডো প্রসঙ্গে চালানোর উদ্দেশ্যে করা হয়। এগুলি পরিষেবা কর্মীর মধ্যে চলা অন্যান্য ওয়ার্কবক্স প্যাকেজের পরিপূরক।

পরিষেবা কর্মীর সাথে পৃষ্ঠাটি যোগাযোগ করতে, প্রথমে নিবন্ধিত পরিষেবা কর্মীর কাছে একটি ওয়ার্কবক্স অবজেক্ট রেফারেন্স পান:

const wb = new Workbox('/sw.js');
wb.register();

তারপর আপনি রেজিস্ট্রেশন পাওয়ার ঝামেলা ছাড়াই, অ্যাক্টিভেশন চেক করা বা অন্তর্নিহিত যোগাযোগ API সম্পর্কে চিন্তা না করে সরাসরি ঘোষণামূলকভাবে বার্তা পাঠাতে পারেন:

wb.messageSW({"type": "PREFETCH", "payload": {"urls": ["/data1.json", "data2.json"]}}); });

এই বার্তাগুলি শোনার জন্য পরিষেবা কর্মী একটি message হ্যান্ডলার প্রয়োগ করে৷ এটি ঐচ্ছিকভাবে একটি প্রতিক্রিয়া ফেরত দিতে পারে, যদিও, এই ধরনের ক্ষেত্রে, এটি প্রয়োজনীয় নয়:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'PREFETCH') {
    // do something
  }
});

ব্রাউজার API ব্যবহার করে

ওয়ার্কবক্স লাইব্রেরি আপনার প্রয়োজনের জন্য পর্যাপ্ত না হলে, ব্রাউজার API ব্যবহার করে আপনি কীভাবে পরিষেবা কর্মী যোগাযোগের জন্য উইন্ডো বাস্তবায়ন করতে পারেন তা এখানে।

পোস্টমেসেজ এপিআই পৃষ্ঠা থেকে পরিষেবা কর্মী পর্যন্ত একমুখী যোগাযোগ ব্যবস্থা স্থাপন করতে ব্যবহার করা যেতে পারে।

পৃষ্ঠাটি পরিষেবা কর্মী ইন্টারফেসে postMessage() কল করে:

navigator.serviceWorker.controller.postMessage({
  type: 'MSG_ID',
  payload: 'some data to perform the task',
});

এই বার্তাগুলি শোনার জন্য পরিষেবা কর্মী একটি message হ্যান্ডলার প্রয়োগ করে৷

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === MSG_ID) {
    // do something
  }
});

{type : 'MSG_ID'} অ্যাট্রিবিউটের একেবারেই প্রয়োজন নেই, কিন্তু এটি একটি উপায় যা পৃষ্ঠাটিকে পরিষেবা কর্মীকে বিভিন্ন ধরনের নির্দেশ পাঠানোর অনুমতি দেয় (অর্থাৎ, 'প্রিফেচ' বনাম 'স্টোরেজ পরিষ্কার করা')। পরিষেবা কর্মী এই পতাকার উপর ভিত্তি করে বিভিন্ন মৃত্যুদন্ড কার্যকর করতে পারে।

অপারেশন সফল হলে, ব্যবহারকারী এটি থেকে সুবিধা পেতে সক্ষম হবে কিন্তু, যদি না হয়, এটি মূল ব্যবহারকারী প্রবাহ পরিবর্তন করবে না। উদাহরণস্বরূপ, যখন 1-800-Flowers.com precache করার চেষ্টা করে, তখন পরিষেবা কর্মী সফল হয়েছে কিনা তা জানতে পৃষ্ঠাটির প্রয়োজন নেই৷ যদি এটি হয়, তাহলে ব্যবহারকারী একটি দ্রুত নেভিগেশন উপভোগ করবে। যদি এটি না হয় তবে পৃষ্ঠাটিকে এখনও নতুন পৃষ্ঠায় নেভিগেট করতে হবে৷ এটা শুধু একটু বেশি সময় নিতে যাচ্ছে.

একটি সহজ প্রিফেচিং উদাহরণ

অত্যাবশ্যকীয় ক্যাশিংয়ের সবচেয়ে সাধারণ অ্যাপ্লিকেশনগুলির মধ্যে একটি হল প্রিফেচিং , যার অর্থ নেভিগেশনের গতি বাড়ানোর জন্য ব্যবহারকারী এটিতে যাওয়ার আগে একটি প্রদত্ত URL এর জন্য সংস্থানগুলি আনা।

সাইটগুলিতে প্রিফেচিং বাস্তবায়নের বিভিন্ন উপায় রয়েছে:

• পৃষ্ঠাগুলিতে লিঙ্ক প্রিফেচ ট্যাগ ব্যবহার করা: সংস্থানগুলিকে পাঁচ মিনিটের জন্য ব্রাউজার ক্যাশে রাখা হয়, তারপরে সংস্থানের জন্য সাধারণ Cache-Control নিয়মগুলি প্রযোজ্য হয়৷
• এই সীমার বাইরে প্রিফেচ রিসোর্সের জীবনকাল বাড়ানোর জন্য পরিষেবা কর্মীতে রানটাইম ক্যাশিং কৌশল সহ পূর্ববর্তী কৌশলটির পরিপূরক।

তুলনামূলকভাবে সহজ প্রিফেচিং পরিস্থিতির জন্য, যেমন প্রিফেচিং নথি, বা নির্দিষ্ট সম্পদ (JS, CSS, ইত্যাদি), সেই কৌশলগুলি হল সর্বোত্তম পদ্ধতি৷

যদি অতিরিক্ত যুক্তির প্রয়োজন হয়, উদাহরণস্বরূপ, এর অভ্যন্তরীণ ইউআরএলগুলি আনার জন্য প্রিফেচ রিসোর্স (একটি JSON ফাইল বা পৃষ্ঠা) পার্স করা, এই কাজটি সম্পূর্ণরূপে পরিষেবা কর্মীকে অর্পণ করা আরও উপযুক্ত৷

এই ধরনের ক্রিয়াকলাপগুলি পরিষেবা কর্মীকে অর্পণ করার নিম্নলিখিত সুবিধা রয়েছে:

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

পণ্যের বিস্তারিত পৃষ্ঠাগুলি প্রিফেচ করুন

পরিষেবা কর্মী ইন্টারফেসে প্রথমে postMessage() ব্যবহার করুন এবং ক্যাশে ইউআরএলের একটি অ্যারে পাস করুন:

navigator.serviceWorker.controller.postMessage({
  type: 'PREFETCH',
  payload: {
    urls: [
      'www.exmaple.com/apis/data_1.json',
      'www.exmaple.com/apis/data_2.json',
    ],
  },
});

পরিষেবা কর্মীর মধ্যে, যেকোনো সক্রিয় ট্যাব দ্বারা প্রেরিত বার্তাগুলিকে আটকাতে এবং প্রক্রিয়া করতে একটি message হ্যান্ডলার প্রয়োগ করুন:

addEventListener('message', (event) => {
  let data = event.data;
  if (data && data.type === 'PREFETCH') {
    let urls = data.payload.urls;
    for (let i in urls) {
      fetchAsync(urls[i]);
    }
  }
});

আগের কোডে আমরা ইউআরএল-এর অ্যারেতে পুনরাবৃত্তি করার জন্য fetchAsync() নামে একটি ছোট সহায়ক ফাংশন চালু করেছি এবং তাদের প্রত্যেকের জন্য একটি করে আনার অনুরোধ জারি করেছি:

async function fetchAsync(url) {
  // await response of fetch call
  let prefetched = await fetch(url);
  // (optionally) cache resources in the service worker storage
}

প্রতিক্রিয়া প্রাপ্ত হলে আপনি সম্পদের ক্যাশিং শিরোনামগুলির উপর নির্ভর করতে পারেন। যদিও অনেক ক্ষেত্রে, পণ্যের বিস্তারিত পৃষ্ঠাগুলির মতো, সংস্থানগুলি ক্যাশে করা হয় না (যার মানে, তাদের একটি Cache-control হেডার no-cache )। এই ধরনের ক্ষেত্রে আপনি পরিষেবা কর্মী ক্যাশে আনা সম্পদ সংরক্ষণ করে এই আচরণ ওভাররাইড করতে পারেন। ফাইলটিকে অফলাইন পরিস্থিতিতে পরিবেশন করার অনুমতি দেওয়ার অতিরিক্ত সুবিধা রয়েছে।

JSON ডেটার বাইরে

একবার সার্ভার এন্ডপয়েন্ট থেকে JSON ডেটা আনা হলে, এতে প্রায়শই অন্যান্য ইউআরএল থাকে যা প্রিফেচ করার মতো, যেমন একটি ছবি বা অন্যান্য এন্ডপয়েন্ট ডেটা যা এই প্রথম-স্তরের ডেটার সাথে যুক্ত।

ধরা যাক যে আমাদের উদাহরণে, JSON ডেটা ফেরত হল একটি মুদি শপিং সাইটের তথ্য:

{
  "productName": "banana",
  "productPic": "https://cdn.example.com/product_images/banana.jpeg",
  "unitPrice": "1.99"
 }

পণ্যের তালিকার উপর পুনরাবৃত্তি করতে fetchAsync() কোডটি পরিবর্তন করুন এবং তাদের প্রত্যেকের জন্য হিরো ইমেজ ক্যাশে করুন:

async function fetchAsync(url, postProcess) {
  // await response of fetch call
  let prefetched = await fetch(url);

  //(optionally) cache resource in the service worker cache

  // carry out the post fetch process if supplied
  if (postProcess) {
    await postProcess(prefetched);
  }
}

async function postProcess(prefetched) {
  let productJson = await prefetched.json();
  if (productJson && productJson.product_pic) {
    fetchAsync(productJson.product_pic);
  }
}

আপনি 404s এর মতো পরিস্থিতিতে এই কোডের চারপাশে কিছু ব্যতিক্রম পরিচালনা যোগ করতে পারেন। কিন্তু প্রিফেচ করার জন্য একজন পরিষেবা কর্মীকে ব্যবহার করার সৌন্দর্য হল যে এটি পৃষ্ঠা এবং মূল থ্রেডের অনেক পরিণতি ছাড়াই ব্যর্থ হতে পারে। প্রিফেচড কন্টেন্টের পোস্ট-প্রসেসিংয়ে আপনার আরও বিস্তৃত যুক্তি থাকতে পারে, এটিকে আরও নমনীয় করে এবং এটি যে ডেটা পরিচালনা করছে তার সাথে ডিকপল করে। আকাশ আমাদের সীমানা.

সতর্কতা: প্রিফেচিং কৌশলগুলি রিসোর্সগুলির জন্য অতিরিক্ত বাইট ব্যবহার করে যা অবিলম্বে প্রয়োজন হয় না, তাই এটিকে ভেবেচিন্তে প্রয়োগ করতে হবে; শুধুমাত্র প্রিফেচ রিসোর্স যখন আপনি নিশ্চিত হন যে ব্যবহারকারীদের তাদের প্রয়োজন হবে। ব্যবহারকারীরা যখন ধীর সংযোগে থাকে তখন প্রিফেচিং এড়িয়ে চলুন। আপনি নেটওয়ার্ক ইনফরমেশন এপিআই এর মাধ্যমে এটি সনাক্ত করতে পারেন।

উপসংহার

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

পৃষ্ঠা এবং পরিষেবা কর্মী যোগাযোগের আরও নিদর্শনগুলির জন্য, চেক আউট করুন:

• ব্রডকাস্ট আপডেট : গুরুত্বপূর্ণ আপডেট সম্পর্কে অবহিত করার জন্য পরিষেবা কর্মী থেকে পৃষ্ঠায় কল করা (যেমন ওয়েবঅ্যাপের একটি নতুন সংস্করণ উপলব্ধ)।
• দ্বি-মুখী যোগাযোগ : একজন পরিষেবা কর্মীকে একটি কাজ অর্পণ করা (যেমন একটি ভারী ডাউনলোড), এবং পৃষ্ঠাটিকে অগ্রগতি সম্পর্কে অবহিত করা।