ওয়ার্কবক্স-প্রেক্যাচিং

পরিষেবা কর্মীদের একটি বৈশিষ্ট্য হল পরিষেবা কর্মী ইনস্টল করার সময় ক্যাশে ফাইলগুলির একটি সেট সংরক্ষণ করার ক্ষমতা। এটিকে প্রায়শই "প্রেক্যাচিং" হিসাবে উল্লেখ করা হয়, যেহেতু আপনি পরিষেবা কর্মী ব্যবহার করার আগে সামগ্রী ক্যাশে করছেন৷

এটি করার প্রধান কারণ হল এটি ডেভেলপারদের ক্যাশের উপর নিয়ন্ত্রণ দেয়, যার অর্থ তারা নির্ধারণ করতে পারে যে কখন এবং কতক্ষণ ফাইল ক্যাশ করা হবে এবং নেটওয়ার্কে না গিয়ে এটি ব্রাউজারে পরিবেশন করা যেতে পারে, যার অর্থ এটি ওয়েব তৈরি করতে ব্যবহার করা যেতে পারে। অফলাইনে কাজ করে এমন অ্যাপ।

ওয়ার্কবক্স এপিআইকে সরলীকরণ করে এবং সম্পদগুলি দক্ষতার সাথে ডাউনলোড করা নিশ্চিত করার মাধ্যমে প্রিক্যাচিং থেকে অনেক বেশি কাজ করে।

কিভাবে ওয়ার্কবক্স-প্রেক্যাচিং কাজ করে

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

workbox-precaching পরিষেবা কর্মীর install ইভেন্টের সময় এই সব করে।

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

এই নতুন পরিষেবা কর্মী অনুরোধের প্রতিক্রিয়া জানাতে ব্যবহার করা হবে না যতক্ষণ না এটি activate ইভেন্টটি ট্রিগার করা হয়। এটি activate ইভেন্টে যে workbox-precaching বর্তমান URL-এর তালিকায় আর উপস্থিত নেই এমন কোনও ক্যাশে করা সম্পদের জন্য পরীক্ষা করবে এবং সেগুলিকে ক্যাশে থেকে সরিয়ে দেবে।

workbox-precaching এই পদক্ষেপগুলি সম্পাদন করবে প্রতিবার আপনার পরিষেবা কর্মী ইনস্টল করা এবং সক্রিয় করা, ব্যবহারকারীর সর্বশেষ সম্পদ রয়েছে তা নিশ্চিত করে এবং শুধুমাত্র পরিবর্তিত ফাইলগুলি ডাউনলোড করা।

Precached প্রতিক্রিয়া পরিবেশন করা হচ্ছে

precacheAndRoute() বা addRoute() কল করা একটি রুট তৈরি করবে যা প্রিক্যাচ করা ইউআরএলগুলির অনুরোধের সাথে মেলে।

এই রুটে ব্যবহৃত প্রতিক্রিয়া কৌশলটি হল ক্যাশে-প্রথম : পূর্বনির্ধারিত প্রতিক্রিয়া ব্যবহার করা হবে, যদি না সেই ক্যাশে করা প্রতিক্রিয়া উপস্থিত না হয় (কিছু অপ্রত্যাশিত ত্রুটির কারণে), এই ক্ষেত্রে পরিবর্তে একটি নেটওয়ার্ক প্রতিক্রিয়া ব্যবহার করা হবে।

আপনি যে ক্রমে precacheAndRoute() বা addRoute() কল করেন সেটি গুরুত্বপূর্ণ। registerRoute() সাথে কোনো অতিরিক্ত রুট নিবন্ধন করার আগে আপনি সাধারণত এটিকে আপনার পরিষেবা কর্মী ফাইলে কল করতে চান। আপনি যদি প্রথমে registerRoute() কল করেন এবং সেই রুটটি একটি ইনকামিং অনুরোধের সাথে মিলে যায়, তাহলে আপনি সেই অতিরিক্ত রুটে যে কৌশলটি সংজ্ঞায়িত করেছেন তা সাড়া দেওয়ার জন্য ব্যবহার করা হবে, পরিবর্তে ক্যাশে-প্রথম কৌশলটি workbox-precaching দ্বারা ব্যবহৃত হয়।

Precache তালিকার ব্যাখ্যা

workbox-precaching একটি url এবং revision বৈশিষ্ট্য সহ বস্তুর একটি বিন্যাস আশা করে। এই অ্যারেকে কখনও কখনও একটি precache ম্যানিফেস্ট হিসাবে উল্লেখ করা হয়:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

এই তালিকাটি ইউআরএল-এর একটি সেট উল্লেখ করে, যার প্রত্যেকটির নিজস্ব অংশ "রিভিশনিং" তথ্য রয়েছে।

উপরের উদাহরণে দ্বিতীয় এবং তৃতীয় অবজেক্টের জন্য, revision প্রপার্টি null এ সেট করা হয়েছে। এর কারণ হল পুনর্বিবেচনার তথ্য URL-এ রয়েছে , যা সাধারণত স্ট্যাটিক সম্পদের জন্য একটি সর্বোত্তম অনুশীলন।

প্রথম অবজেক্ট ( /index.html ) স্পষ্টভাবে একটি রিভিশন প্রপার্টি সেট করে, যা ফাইলের বিষয়বস্তুর একটি স্বয়ংক্রিয়ভাবে তৈরি হ্যাশ। JavaScript এবং CSS রিসোর্সের বিপরীতে, HTML ফাইলগুলি সাধারণত তাদের URL-এ পুনর্বিবেচনার তথ্য অন্তর্ভুক্ত করতে পারে না, অন্যথায় পৃষ্ঠার বিষয়বস্তু পরিবর্তিত হলে ওয়েবে এই ফাইলগুলির লিঙ্কগুলি ভেঙে যাবে৷

precacheAndRoute() এ একটি রিভিশন প্রপার্টি পাস করার মাধ্যমে, ওয়ার্কবক্স ফাইলটি কখন পরিবর্তিত হয়েছে তা জানতে পারে এবং সেই অনুযায়ী আপডেট করতে পারে।

ওয়ার্কবক্স এই তালিকা তৈরি করতে সাহায্য করার জন্য সরঞ্জামগুলির সাথে আসে:

• workbox-build : এটি একটি নোড প্যাকেজ যা একটি gulp টাস্কে বা npm রান স্ক্রিপ্ট হিসাবে ব্যবহার করা যেতে পারে।
• workbox-webpack-plugin : ওয়েবপ্যাক ব্যবহারকারীরা এই প্লাগইন ব্যবহার করতে পারেন।
• workbox-cli : আমাদের CLI সম্পদের তালিকা তৈরি করতে এবং সেগুলিকে আপনার পরিষেবা কর্মীর সাথে যুক্ত করতেও ব্যবহার করা যেতে পারে।

প্রিক্যাচড ফাইলের জন্য ইনকামিং অনুরোধ

workbox-precaching বাক্সের বাইরে যে কাজটি করবে তা হল প্রিক্যাচ করা ফাইলগুলি চেষ্টা করার এবং মেলানোর জন্য আগত নেটওয়ার্ক অনুরোধগুলিকে ম্যানিপুলেট করা। এটি ওয়েবে সাধারণ অনুশীলনের জন্য মিটমাট করে।

উদাহরণস্বরূপ, / এর জন্য একটি অনুরোধ সাধারণত /index.html এ ফাইল দ্বারা সন্তুষ্ট হতে পারে।

workbox-precaching ডিফল্টরূপে সঞ্চালিত ম্যানিপুলেশনগুলির তালিকা এবং আপনি কীভাবে সেই আচরণটি পরিবর্তন করতে পারেন।

ইউআরএল প্যারামিটার উপেক্ষা করুন

অনুসন্ধান পরামিতি সহ অনুরোধগুলি নির্দিষ্ট মানগুলি সরাতে বা সমস্ত মানগুলি সরাতে পরিবর্তন করা যেতে পারে।

ডিফল্টরূপে, utm_ দিয়ে শুরু হওয়া বা fbclid সাথে হুবহু মিলে যাওয়া অনুসন্ধানের পরামিতিগুলি সরানো হয়, যার অর্থ হল /about.html?utm_campaign=abcd জন্য একটি অনুরোধ /about.html এর জন্য একটি পূর্বনির্ধারিত এন্ট্রি দিয়ে পূরণ করা হবে।

আপনি ignoreURLParametersMatching ব্যবহার করে অনুসন্ধান পরামিতির একটি ভিন্ন সেট উপেক্ষা করতে পারেন:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

ডিরেক্টরি সূচক

একটি / ইচ্ছায় শেষ হওয়া অনুরোধগুলি, ডিফল্টরূপে, শেষের সাথে একটি index.html যুক্ত এন্ট্রির সাথে মিলিত হবে। এর মানে হল / এর জন্য একটি ইনকামিং অনুরোধ স্বয়ংক্রিয়ভাবে প্রিক্যাচড এন্ট্রি /index.html দিয়ে পরিচালনা করা যেতে পারে।

আপনি এটিকে অন্য কিছুতে পরিবর্তন করতে পারেন, অথবা directoryIndex সেট করে এটি সম্পূর্ণরূপে অক্ষম করতে পারেন:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

ইউআরএল পরিষ্কার করুন

যদি একটি অনুরোধ প্রিক্যাশের সাথে মেলে না, আমরা "ক্লিন" ইউআরএল (ওরফে "সুন্দর" ইউআরএল) সমর্থন করতে শেষে .html যোগ করব। এর অর্থ হল /about এর মতো একটি অনুরোধ /about.html এর জন্য প্রিক্যাচ করা এন্ট্রি দ্বারা পরিচালনা করা হবে।

আপনি cleanUrls সেট করে এই আচরণ অক্ষম করতে পারেন:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

কাস্টম ম্যানিপুলেশন

আপনি যদি আগত অনুরোধ থেকে প্রিক্যাচেড অ্যাসেটগুলিতে কাস্টম মিলগুলিকে সংজ্ঞায়িত করতে চান তবে আপনি urlManipulation বিকল্পের সাথে তা করতে পারেন৷ এটি একটি কলব্যাক হওয়া উচিত যা সম্ভাব্য মিলগুলির একটি অ্যারে প্রদান করে৷

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

উন্নত ব্যবহার

সরাসরি PrecacheController ব্যবহার করা

ডিফল্টরূপে, workbox-precaching আপনার জন্য শ্রোতাদের install এবং activate । পরিষেবা কর্মীদের সাথে পরিচিত ডেভেলপারদের জন্য, আপনার যদি আরও নিয়ন্ত্রণের প্রয়োজন হয় তবে এটি পছন্দসই নাও হতে পারে।

ডিফল্ট রপ্তানি ব্যবহার করার পরিবর্তে, আপনি প্রিক্যাশে আইটেমগুলি যোগ করতে, কখন এই সম্পদগুলি ইনস্টল করা হবে এবং কখন পরিষ্কার করা উচিত তা নির্ধারণ করতে আপনি সরাসরি PrecacheController ব্যবহার করতে পারেন।

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

প্রিক্যাচেড সম্পদ সরাসরি পড়া

এমন কিছু সময় আছে যখন workbox-precaching স্বয়ংক্রিয়ভাবে সম্পাদন করতে পারে এমন রাউটিং এর প্রেক্ষাপটের বাইরে আপনাকে প্রিক্যাচ করা সম্পদ সরাসরি পড়তে হবে। উদাহরণস্বরূপ, আপনি আংশিক এইচটিএমএল টেমপ্লেটগুলিকে প্রিক্যাচ করতে চাইতে পারেন যেগুলি একটি সম্পূর্ণ প্রতিক্রিয়া তৈরি করার সময় পুনরুদ্ধার করা এবং ব্যবহার করা প্রয়োজন৷

সাধারণভাবে, আপনি প্রিক্যাচড Response অবজেক্টগুলি পেতে ক্যাশে স্টোরেজ এপিআই ব্যবহার করতে পারেন, তবে একটি বলি আছে: cache.match() কল করার সময় যে URL ক্যাশে কী ব্যবহার করতে হবে তাতে একটি সংস্করণিং প্যারামিটার থাকতে পারে যা workbox-precaching স্বয়ংক্রিয়ভাবে তৈরি করে। এবং বজায় রাখে।

সঠিক ক্যাশে কী পেতে আপনি getCacheKeyForURL() কল করতে পারেন, মূল ইউআরএলে পাস করে, এবং তারপর উপযুক্ত ক্যাশে একটি cache.match() সম্পাদন করতে ফলাফলটি ব্যবহার করুন।

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

বিকল্পভাবে, যদি আপনার যা প্রয়োজন হয় তা হল precached Response অবজেক্ট, আপনি কল করতে পারেন matchPrecache() , যা স্বয়ংক্রিয়ভাবে সঠিক ক্যাশে কী ব্যবহার করবে এবং সঠিক ক্যাশে অনুসন্ধান করবে:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

পুরানো Precaches পরিষ্কার করুন

ওয়ার্কবক্সের বেশিরভাগ রিলিজই প্রিক্যাচ করা ডেটা সংরক্ষণের জন্য একই বিন্যাস বজায় রাখে এবং ওয়ার্কবক্সের পুরানো সংস্করণ দ্বারা তৈরি করা প্রিক্যাচগুলি সাধারণত নতুন রিলিজের মতো ব্যবহার করা যেতে পারে। কদাচিৎ, যদিও, প্রিক্যাচিং স্টোরেজে একটি ব্রেকিং পরিবর্তন রয়েছে যার জন্য বিদ্যমান ব্যবহারকারীদের সবকিছু পুনরায় ডাউনলোড করতে হবে এবং যা পূর্বে প্রিক্যাচ করা ডেটা অপ্রচলিত করে দেয়। (ওয়ার্কবক্স v3 এবং v4 রিলিজের মধ্যে এই ধরনের পরিবর্তন ঘটেছে।)

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

Subresource ইন্টিগ্রিটি ব্যবহার করে

কিছু ডেভেলপার নেটওয়ার্ক থেকে প্রিক্যাচড ইউআরএল পুনরুদ্ধার করার সময় সাবরিসোর্স ইন্টিগ্রিটি এনফোর্সমেন্টের দ্বারা অফার করা অতিরিক্ত গ্যারান্টি চাইতে পারে।

integrity নামক একটি অতিরিক্ত, ঐচ্ছিক সম্পত্তি precache ম্যানিফেস্টের যেকোনো এন্ট্রিতে যোগ করা যেতে পারে। প্রদান করা হলে, ক্যাশে পপুলেট করার জন্য ব্যবহৃত Request নির্মাণ করার সময় এটি integrity মান হিসাবে ব্যবহার করা হবে। অমিল থাকলে, প্রিক্যাচিং প্রক্রিয়া ব্যর্থ হবে।

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

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

workbox-precaching.urlManipulation(
  { url }: object,
)

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

workbox-precaching.cleanupOutdatedCaches()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

workbox-precaching.getCacheKeyForURL(
  url: string,
)

workbox-precaching.matchPrecache(
  request: string | Request,
)

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)