রানটাইম সময় সম্পদ ক্যাশিং

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

ওয়ার্কবক্সে, আপনি রুট মেলানোর জন্য workbox-routing মডিউল ব্যবহার করে সম্পদের জন্য রানটাইম ক্যাশিং পরিচালনা করতে পারেন এবং workbox-strategies মডিউল দিয়ে তাদের জন্য ক্যাশিং কৌশলগুলি পরিচালনা করতে পারেন।

ক্যাশিং কৌশল

আপনি বিল্ট ইন ক্যাশিং কৌশলগুলির একটি দিয়ে সম্পদের জন্য বেশিরভাগ রুট পরিচালনা করতে পারেন। সেগুলি এই ডকুমেন্টেশনে আগে বিশদভাবে কভার করা হয়েছে , তবে এখানে কয়েকটি পুনরুদ্ধার করা মূল্যবান:

  • Stale while Revalidate একটি অনুরোধের জন্য একটি ক্যাশে করা প্রতিক্রিয়া ব্যবহার করে যদি এটি উপলব্ধ থাকে এবং নেটওয়ার্ক থেকে একটি প্রতিক্রিয়া সহ পটভূমিতে ক্যাশে আপডেট করে৷ অতএব, যদি সম্পদটি ক্যাশে করা না হয়, তবে এটি নেটওয়ার্ক প্রতিক্রিয়ার জন্য অপেক্ষা করবে এবং এটি ব্যবহার করবে। এটি একটি মোটামুটি নিরাপদ কৌশল, কারণ এটি নিয়মিত ক্যাশে এন্ট্রি আপডেট করে যা এটির উপর নির্ভর করে। নেতিবাচক দিক হল যে এটি সর্বদা পটভূমিতে নেটওয়ার্ক থেকে একটি সম্পদের জন্য অনুরোধ করে।
  • নেটওয়ার্ক ফার্স্ট প্রথমে নেটওয়ার্ক থেকে একটি প্রতিক্রিয়া পেতে চেষ্টা করে। একটি প্রতিক্রিয়া প্রাপ্ত হলে, এটি সেই প্রতিক্রিয়াটি ব্রাউজারে পাস করে এবং এটি একটি ক্যাশে সংরক্ষণ করে। যদি নেটওয়ার্ক অনুরোধ ব্যর্থ হয়, শেষ ক্যাশে করা প্রতিক্রিয়া ব্যবহার করা হবে, সম্পদে অফলাইন অ্যাক্সেস সক্ষম করে৷
  • ক্যাশে প্রথমে একটি প্রতিক্রিয়ার জন্য প্রথমে ক্যাশে চেক করে এবং উপলব্ধ থাকলে এটি ব্যবহার করে। অনুরোধটি ক্যাশে না থাকলে, নেটওয়ার্ক ব্যবহার করা হয় এবং ব্রাউজারে পাঠানোর আগে ক্যাশে কোনো বৈধ প্রতিক্রিয়া যোগ করা হয়।
  • নেটওয়ার্ক কেবলমাত্র নেটওয়ার্ক থেকে প্রতিক্রিয়া আসতে বাধ্য করে।
  • ক্যাশে শুধুমাত্র ক্যাশে থেকে প্রতিক্রিয়া আসতে বাধ্য করে।

আপনি workbox-routing দ্বারা প্রস্তাবিত পদ্ধতিগুলি ব্যবহার করে অনুরোধগুলি নির্বাচন করতে এই কৌশলগুলি প্রয়োগ করতে পারেন।

রুট ম্যাচিং সহ ক্যাশিং কৌশল প্রয়োগ করা

workbox-routing রুটগুলিকে মেলানোর জন্য একটি registerRoute পদ্ধতি উন্মুক্ত করে এবং একটি ক্যাশিং কৌশল দিয়ে সেগুলি পরিচালনা করে। registerRoute একটি Route অবজেক্ট গ্রহণ করে যা ঘুরে দুটি আর্গুমেন্ট গ্রহণ করে:

  1. একটি স্ট্রিং, রেগুলার এক্সপ্রেশন , বা একটি মিল কলব্যাক রুট ম্যাচিং মানদণ্ড নির্দিষ্ট করতে।
  2. রুটের জন্য একজন হ্যান্ডলার—সাধারণত workbox-strategies দ্বারা প্রদত্ত একটি কৌশল।

মিল কলব্যাকগুলিকে রুটগুলি মেলানোর জন্য অগ্রাধিকার দেওয়া হয়, কারণ তারা একটি প্রসঙ্গ অবজেক্ট প্রদান করে যাতে Request অবজেক্ট , রিকোয়েস্ট ইউআরএল স্ট্রিং, ফেচ ইভেন্ট এবং রিকোয়েস্টটি একই-অরিজিন রিকোয়েস্ট কিনা তার বুলিয়ান থাকে।

হ্যান্ডলার তারপর মিলে যাওয়া রুট পরিচালনা করে। নিম্নলিখিত উদাহরণে, একটি নতুন রুট তৈরি করা হয়েছে যা একই-অরিজিন ইমেজ অনুরোধের সাথে মেলে, প্রথমে ক্যাশে প্রয়োগ করে, নেটওয়ার্ক কৌশলে ফিরে আসে ।

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
  return sameOrigin && request.destination === 'image'
}, new CacheFirst());

// Register the new route
registerRoute(imageRoute);

একাধিক ক্যাশে ব্যবহার করে

ওয়ার্কবক্স আপনাকে বান্ডিল করা কৌশলগুলিতে উপলব্ধ cacheName বিকল্পটি ব্যবহার করে ক্যাশে করা প্রতিক্রিয়াগুলিকে আলাদা Cache উদাহরণে বাকেট করার অনুমতি দেয়।

নিম্নলিখিত উদাহরণে, চিত্রগুলি একটি স্থির-যখন-পুনঃপ্রমাণ কৌশল ব্যবহার করে, যেখানে CSS এবং JavaScript সম্পদগুলি নেটওয়ার্ক কৌশলে ফিরে আসা ক্যাশে-প্রথম ব্যবহার করে। প্রতিটি সম্পদের রুট cacheName প্রপার্টি যোগ করে আলাদা ক্যাশে প্রতিক্রিয়া রাখে।

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Handle images:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image'
}, new StaleWhileRevalidate({
  cacheName: 'images'
}));

// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts'
}));

// Handle styles:
const stylesRoute = new Route(({ request }) => {
  return request.destination === 'style';
}, new CacheFirst({
  cacheName: 'styles'
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);
Chrome-এর DevTools-এর অ্যাপ্লিকেশান ট্যাবে ক্যাশে উদাহরণগুলির একটি তালিকার একটি স্ক্রিনশট৷ তিনটি স্বতন্ত্র ক্যাশে দেখানো হয়েছে: একটির নাম 'স্ক্রিপ্ট', অন্যটির নাম 'স্টাইল', এবং শেষটির নাম 'চিত্র'।
Chrome DevTools-এর অ্যাপ্লিকেশন প্যানেলে ক্যাশে স্টোরেজ ভিউয়ার। বিভিন্ন ধরনের সম্পদের জন্য প্রতিক্রিয়া পৃথক ক্যাশে সংরক্ষণ করা হয়।

ক্যাশে এন্ট্রির জন্য একটি মেয়াদ শেষ হচ্ছে

পরিষেবা কর্মী ক্যাশে (গুলি) পরিচালনা করার সময় স্টোরেজ কোটা সম্পর্কে সচেতন হন। ExpirationPlugin ক্যাশে রক্ষণাবেক্ষণকে সহজ করে এবং workbox-expiration দ্বারা উন্মুক্ত করা হয়। এটি ব্যবহার করতে, একটি ক্যাশিং কৌশলের জন্য কনফিগারেশনে এটি নির্দিষ্ট করুন:

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Evict image cache entries older thirty days:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image';
}, new CacheFirst({
  cacheName: 'images',
  plugins: [
    new ExpirationPlugin({
      maxAgeSeconds: 60 * 60 * 24 * 30,
    })
  ]
}));

// Evict the least-used script cache entries when
// the cache has more than 50 entries:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50,
    })
  ]
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);

স্টোরেজ কোটা মেনে চলা জটিল হতে পারে। যারা স্টোরেজের চাপ অনুভব করছেন বা তাদের স্টোরেজের সবচেয়ে দক্ষ ব্যবহার করতে চান তাদের বিবেচনা করা ভাল অভ্যাস। ওয়ার্কবক্সের ExpirationPlugin জোড়া সেই লক্ষ্য অর্জনে সাহায্য করতে পারে।

ক্রস-অরিজিন বিবেচনা

আপনার পরিষেবা কর্মী এবং ক্রস-অরিজিন অ্যাসেটের মধ্যে মিথস্ক্রিয়া একই-অরিজিন অ্যাসেটের তুলনায় যথেষ্ট আলাদা। ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) জটিল, এবং সেই জটিলতা আপনি কীভাবে একজন পরিষেবা কর্মীতে ক্রস-অরিজিন রিসোর্স পরিচালনা করেন তার উপর প্রসারিত হয়।

অস্বচ্ছ প্রতিক্রিয়া

no-cors মোডে ক্রস-অরিজিন অনুরোধ করার সময়, প্রতিক্রিয়াটি একটি পরিষেবা কর্মী ক্যাশে সংরক্ষণ করা যেতে পারে এবং এমনকি ব্রাউজার দ্বারা সরাসরি ব্যবহার করা যেতে পারে। যাইহোক, প্রতিক্রিয়া বডি নিজেই জাভাস্ক্রিপ্টের মাধ্যমে পড়া যাবে না। এটি একটি অস্বচ্ছ প্রতিক্রিয়া হিসাবে পরিচিত।

অস্বচ্ছ প্রতিক্রিয়া হল একটি নিরাপত্তা ব্যবস্থা যা ক্রস-অরিজিন সম্পদের পরিদর্শন রোধ করার উদ্দেশ্যে। আপনি এখনও ক্রস-অরিজিন সম্পদের জন্য অনুরোধ করতে পারেন এবং এমনকি সেগুলি ক্যাশেও করতে পারেন, আপনি কেবল প্রতিক্রিয়া বডিটি পড়তে পারবেন না বা এমনকি এর স্ট্যাটাস কোডও পড়তে পারবেন না!

CORS মোডে নির্বাচন করতে ভুলবেন না

এমনকি যদি আপনি ক্রস-অরিজিন সম্পদ লোড করেন যা অনুমতিমূলক CORS হেডার সেট করে যা আপনাকে প্রতিক্রিয়া পড়তে দেয়, ক্রস-অরিজিন প্রতিক্রিয়ার মূল অংশটি এখনও অস্বচ্ছ হতে পারে। উদাহরণ স্বরূপ, নিচের এইচটিএমএল no-cors অনুরোধগুলিকে ট্রিগার করবে যা CORS হেডারগুলি নির্বিশেষে অস্বচ্ছ প্রতিক্রিয়ার দিকে নিয়ে যাবে:

<link rel="stylesheet" href="https://example.com/path/to/style.css">
<img src="https://example.com/path/to/image.png">

স্পষ্টভাবে একটি cors অনুরোধ ট্রিগার করতে যা একটি অ-অস্বচ্ছ প্রতিক্রিয়া দেবে, আপনাকে আপনার HTML-এ crossorigin অ্যাট্রিবিউট যোগ করে স্পষ্টভাবে CORS মোডে অপ্ট-ইন করতে হবে:

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">

আপনার পরিষেবা কর্মী ক্যাশে সাবরিসোর্সগুলি রানটাইমে লোড হলে এটি মনে রাখা গুরুত্বপূর্ণ৷

ওয়ার্কবক্স অস্বচ্ছ প্রতিক্রিয়া ক্যাশে নাও করতে পারে

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

আপনার যদি ওয়ার্কবক্সে একটি অস্বচ্ছ প্রতিক্রিয়া ক্যাশে করার প্রয়োজন হয়, তাহলে এটি পরিচালনা করার জন্য আপনাকে একটি নেটওয়ার্ক-প্রথম বা স্থির-যখন বৈধকরণ কৌশল ব্যবহার করা উচিত। হ্যাঁ, এর মানে হল যে সম্পদটি এখনও প্রতিবার নেটওয়ার্ক থেকে অনুরোধ করা হবে, কিন্তু এটি নিশ্চিত করে যে ব্যর্থ প্রতিক্রিয়াগুলি টিকে থাকবে না এবং অবশেষে ব্যবহারযোগ্য প্রতিক্রিয়া দ্বারা প্রতিস্থাপিত হবে৷

আপনি যদি অন্য ক্যাশিং কৌশল ব্যবহার করেন এবং একটি অস্বচ্ছ প্রতিক্রিয়া ফিরে আসে, ওয়ার্কবক্স আপনাকে সতর্ক করবে যে বিকাশ মোডে থাকাকালীন প্রতিক্রিয়াটি ক্যাশে করা হয়নি।

অস্বচ্ছ প্রতিক্রিয়া জোর করে ক্যাশিং

আপনি যদি সম্পূর্ণরূপে নিশ্চিত হন যে আপনি ক্যাশে-প্রথম বা ক্যাশে শুধুমাত্র কৌশল ব্যবহার করে একটি অস্বচ্ছ প্রতিক্রিয়া ক্যাশে করতে চান, আপনি workbox-cacheable-response মডিউল দিয়ে ওয়ার্কবক্সকে এটি করতে বাধ্য করতে পারেন:

import {Route, registerRoute} from 'workbox-routing';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cdnRoute = new Route(({url}) => {
  return url === 'https://cdn.google.com/example-script.min.js';
}, new CacheFirst({
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200]
    })
  ]
}))

registerRoute(cdnRoute);

অস্বচ্ছ প্রতিক্রিয়া এবং navigator.storage API

ক্রস-ডোমেন তথ্য ফাঁস এড়াতে, স্টোরেজ কোটা সীমা গণনা করার জন্য ব্যবহৃত একটি অস্বচ্ছ প্রতিক্রিয়ার আকারে উল্লেখযোগ্য প্যাডিং যোগ করা হয়েছে। এটি প্রভাবিত করে কিভাবে navigator.storage API স্টোরেজ কোটা রিপোর্ট করে।

এই প্যাডিং ব্রাউজার অনুসারে পরিবর্তিত হয়, কিন্তু Chrome-এর জন্য, যে কোনো একক ক্যাশে করা অস্বচ্ছ প্রতিক্রিয়া ব্যবহৃত সামগ্রিক সঞ্চয়স্থানে অবদান রাখে এমন ন্যূনতম আকার হল প্রায় 7 মেগাবাইট । আপনি কতগুলি অস্বচ্ছ প্রতিক্রিয়া ক্যাশে করতে চান তা নির্ধারণ করার সময় আপনার এটি মনে রাখা উচিত, কারণ আপনি অন্যথায় আশা করার চেয়ে খুব তাড়াতাড়ি স্টোরেজ কোটা অতিক্রম করতে পারেন।