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

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

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

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

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

যখন একটি ওয়েব অ্যাপ প্রথমবার লোড করা হয়, 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.

প্রকারভেদ

CleanupResult

বৈশিষ্ট্য

  • মুছে ফেলা ক্যাচে অনুরোধ

    স্ট্রিং[]

InstallResult

বৈশিষ্ট্য

  • আপডেট করা URLs না

    স্ট্রিং[]

  • আপডেট করা URL

    স্ট্রিং[]

PrecacheController

সম্পদের দক্ষ precaching সঞ্চালন.

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    একটি নতুন PrecacheController তৈরি করুন।

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (options?: PrecacheControllerOptions) => {...}

    • বিকল্প

      PrecacheControllerOptions ঐচ্ছিক

  • কৌশল

    কৌশল

  • সক্রিয় করা

    অকার্যকর

    বর্তমান প্রিক্যাশে ম্যানিফেস্টে আর উপস্থিত নেই এমন সম্পদগুলি মুছে দেয়৷ পরিষেবা কর্মী সক্রিয় ইভেন্ট থেকে এই পদ্ধতিতে কল করুন।

    দ্রষ্টব্য: এই পদ্ধতিটি আপনার জন্য event.waitUntil() কল করে, তাই আপনাকে আপনার ইভেন্ট হ্যান্ডলারে এটিকে কল করার দরকার নেই।

    activate ফাংশনটি এরকম দেখাচ্ছে:

    (event: ExtendableEvent) => {...}

    • ঘটনা

      এক্সটেন্ডেবল ইভেন্ট

  • addToCacheList

    অকার্যকর

    এই পদ্ধতিটি আইটেমগুলিকে precache তালিকায় যুক্ত করবে, সদৃশগুলি সরিয়ে দেবে এবং তথ্য বৈধ কিনা তা নিশ্চিত করবে।

    addToCacheList ফাংশনটি এরকম দেখাচ্ছে:

    (entries: (string | PrecacheEntry)[]) => {...}

    • এন্ট্রি

      (স্ট্রিং | PrecacheEntry )[]

      precache এন্ট্রি অ্যারে.

  • createHandlerBoundToURL

    অকার্যকর

    একটি ফাংশন প্রদান করে যা প্রিক্যাশে url দেখায় (অ্যাকাউন্ট রিভিশন তথ্য বিবেচনা করে), এবং সংশ্লিষ্ট Response প্রদান করে।

    createHandlerBoundToURL ফাংশনটি এইরকম দেখাচ্ছে:

    (url: string) => {...}

    • url

      স্ট্রিং

      প্রিক্যাচড ইউআরএল যা Response দেখতে ব্যবহার করা হবে।

  • getCacheKeyForURL

    অকার্যকর

    একটি প্রদত্ত URL সঞ্চয় করার জন্য ব্যবহৃত ক্যাশে কী ফেরত দেয়। যদি সেই URLটি unversioned হয়, যেমন `/index.html', তাহলে ক্যাশে কী হবে মূল URL এর সাথে একটি অনুসন্ধান পরামিতি যুক্ত।

    getCacheKeyForURL ফাংশনটি এরকম দেখাচ্ছে:

    (url: string) => {...}

    • url

      স্ট্রিং

      একটি URL যার ক্যাশে কী আপনি দেখতে চান৷

    • রিটার্ন

      স্ট্রিং

      সংস্করণযুক্ত URL যা মূল URL-এর জন্য একটি ক্যাশে কী-এর সাথে মিলে যায়, অথবা যদি সেই URLটি প্রি-ক্যাচ করা না থাকে তবে অনির্ধারিত৷

  • ক্যাশেড ইউআরএল পান

    অকার্যকর

    বর্তমান পরিষেবা কর্মী দ্বারা প্রিক্যাচ করা সমস্ত URLগুলির একটি তালিকা প্রদান করে৷

    getCachedURLs ফাংশনটি এরকম দেখাচ্ছে:

    () => {...}

    • রিটার্ন

      স্ট্রিং[]

      প্রিক্যাচ করা ইউআরএল।

  • getIntegrityForCacheKey

    অকার্যকর

    getIntegrityForCacheKey ফাংশনটি এরকম দেখাচ্ছে:

    (cacheKey: string) => {...}

    • cacheKey

      স্ট্রিং

    • রিটার্ন

      স্ট্রিং

      সাবরিসোর্স অখণ্ডতা ক্যাশে কী-এর সাথে যুক্ত, অথবা সেট না থাকলে অনির্ধারিত।

  • URLsToCacheKeys পান

    অকার্যকর

    ইউআরএল-এর জন্য রিভিশন তথ্য বিবেচনা করে সংশ্লিষ্ট ক্যাশে কী-তে একটি পূর্বক্যাচ করা URL-এর ম্যাপিং ফেরত দেয়।

    getURLsToCacheKeys ফাংশনটি এরকম দেখাচ্ছে:

    () => {...}

    • রিটার্ন

      মানচিত্র<stringstring>

      ক্যাশে কী ম্যাপিং করার জন্য একটি URL।

  • ইনস্টল

    অকার্যকর

    নতুন এবং আপডেট করা সম্পদ precaches. পরিষেবা কর্মী ইনস্টল ইভেন্ট থেকে এই পদ্ধতি কল করুন.

    দ্রষ্টব্য: এই পদ্ধতিটি আপনার জন্য event.waitUntil() কল করে, তাই আপনাকে আপনার ইভেন্ট হ্যান্ডলারে এটিকে কল করার দরকার নেই।

    install ফাংশনটি এর মত দেখাচ্ছে:

    (event: ExtendableEvent) => {...}

    • ঘটনা

      এক্সটেন্ডেবল ইভেন্ট

    • রিটার্ন

      প্রতিশ্রুতি< InstallResult >

  • matchPrecache

    অকার্যকর

    এটি নিম্নলিখিত পার্থক্য সহ cache.match() এর ড্রপ-ইন প্রতিস্থাপন হিসাবে কাজ করে:

    • এটি precache এর নাম কি তা জানে এবং শুধুমাত্র সেই ক্যাশে চেক করে।
    • এটি আপনাকে প্যারামিটার সংস্করণ ছাড়াই একটি "মূল" URL-এ পাস করার অনুমতি দেয় এবং এটি স্বয়ংক্রিয়ভাবে সেই URL-এর বর্তমান সক্রিয় সংশোধনের জন্য সঠিক ক্যাশে কী সন্ধান করবে৷

    যেমন, matchPrecache('index.html') বর্তমানে সক্রিয় পরিষেবা কর্মীর জন্য সঠিক পূর্বনির্ধারিত প্রতিক্রিয়া খুঁজে পাবে, এমনকি প্রকৃত ক্যাশে কী '/index.html?__WB_REVISION__=1234abcd' হলেও।

    matchPrecache ফাংশনটি এইরকম দেখাচ্ছে:

    (request: string | Request) => {...}

    • অনুরোধ

      স্ট্রিং | অনুরোধ

      প্রিক্যাশে দেখার জন্য কী (পরামিতি সংশোধন না করে)।

    • রিটার্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

  • precache

    অকার্যকর

    প্রিক্যাশ তালিকায় আইটেম যোগ করে, যেকোনো সদৃশ অপসারণ করে এবং ক্যাশে ফাইলগুলি সংরক্ষণ করে" যখন পরিষেবা কর্মী ইনস্টল করে।

    এই পদ্ধতি একাধিকবার বলা যেতে পারে।

    precache ফাংশন এর মত দেখাচ্ছে:

    (entries: (string | PrecacheEntry)[]) => {...}

    • এন্ট্রি

      (স্ট্রিং | PrecacheEntry )[]

PrecacheEntry

বৈশিষ্ট্য

  • অখণ্ডতা

    স্ট্রিং ঐচ্ছিক

  • পুনর্বিবেচনা

    স্ট্রিং ঐচ্ছিক

  • url

    স্ট্রিং

PrecacheFallbackPlugin

PrecacheFallbackPlugin আপনাকে একটি "অফলাইন ফলব্যাক" প্রতিক্রিয়া নির্দিষ্ট করার অনুমতি দেয় যখন একটি প্রদত্ত কৌশল একটি প্রতিক্রিয়া তৈরি করতে অক্ষম হয়।

এটি handlerDidError প্লাগইন কলব্যাককে বাধা দিয়ে এবং প্রত্যাশিত পুনর্বিবেচনা পরামিতি স্বয়ংক্রিয়ভাবে বিবেচনায় নিয়ে একটি পূর্বনির্ধারিত প্রতিক্রিয়া প্রদান করে এটি করে।

আপনি যদি স্পষ্টভাবে একটি PrecacheController দৃষ্টান্তে কনস্ট্রাক্টরকে না দেন, ডিফল্ট উদাহরণটি ব্যবহার করা হবে। সাধারণভাবে বলতে গেলে, বেশিরভাগ বিকাশকারীরা ডিফল্ট ব্যবহার করে শেষ করবে।

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    সংশ্লিষ্ট ফলব্যাকURL সহ একটি নতুন PrecacheFallbackPlugin তৈরি করে।

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (config: object) => {...}

    • কনফিগারেশন

      বস্তু

      • fallbackURL

        স্ট্রিং

        যদি সংশ্লিষ্ট কৌশল কোনো প্রতিক্রিয়া তৈরি করতে না পারে তাহলে ফলব্যাক হিসেবে ব্যবহার করার জন্য একটি পূর্বনির্ধারিত URL।

      • precache কন্ট্রোলার

        PrecacheController ঐচ্ছিক

PrecacheRoute

workbox-routing.Route এর একটি সাবক্লাস যা একটি workbox-precaching.PrecacheController দৃষ্টান্ত নেয় এবং আগত অনুরোধের সাথে মেলে এবং প্রিক্যাচ থেকে প্রতিক্রিয়াগুলি আনার জন্য এটি ব্যবহার করে৷

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}

    • precache কন্ট্রোলার

      একটি PrecacheController দৃষ্টান্ত যা মেলানোর অনুরোধ এবং ইভেন্ট আনার প্রতিক্রিয়া উভয়ের জন্য ব্যবহৃত হয়।

    • বিকল্প

      PrecacheRouteOptions ঐচ্ছিক

  • ক্যাচহ্যান্ডলার

    RouteHandlerObject ঐচ্ছিক

  • ম্যাচ
  • পদ্ধতি

    HTTP পদ্ধতি

  • সেটক্যাচহ্যান্ডলার

    অকার্যকর

    setCatchHandler ফাংশনটি এইরকম দেখাচ্ছে:

    (handler: RouteHandler) => {...}

    • হ্যান্ডলার

      একটি কলব্যাক ফাংশন যা একটি প্রতিশ্রুতি সমাধান করে একটি প্রতিক্রিয়া প্রদান করে

PrecacheRouteOptions

বৈশিষ্ট্য

  • পরিষ্কার URL

    বুলিয়ান ঐচ্ছিক

  • ডিরেক্টরি ইনডেক্স

    স্ট্রিং ঐচ্ছিক

  • ignoreURL প্যারামিটার ম্যাচিং

    RegExp[] ঐচ্ছিক

  • url ম্যানিপুলেশন

PrecacheStrategy

একটি workbox-strategies.Strategy বিশেষভাবে workbox-precaching.PrecacheController এর সাথে কাজ করার জন্য ডিজাইন করা কৌশল বাস্তবায়ন।

দ্রষ্টব্য: একটি PrecacheController তৈরি করার সময় এই শ্রেণীর একটি উদাহরণ স্বয়ংক্রিয়ভাবে তৈরি হয়; এটি সাধারণত নিজেকে তৈরি করার প্রয়োজন হয় না।

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (options?: PrecacheStrategyOptions) => {...}

    • বিকল্প

      PrecacheStrategyOptions ঐচ্ছিক

  • cacheName

    স্ট্রিং

  • ফেচ অপশন

    RequestInit ঐচ্ছিক

  • ম্যাচ অপশন

    CacheQueryOptions ঐচ্ছিক

  • copyRedirectedCacheableResponsesPlugin
  • _অপেক্ষা সম্পূর্ণ

    অকার্যকর

    _awaitComplete ফাংশনটি এরকম দেখাচ্ছে:

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • প্রতিক্রিয়া সম্পন্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

    • অনুরোধ

      অনুরোধ

    • ঘটনা

      এক্সটেন্ডেবল ইভেন্ট

    • রিটার্ন

      প্রতিশ্রুতি <void>

  • রেসপন্স পান

    অকার্যকর

    _getResponse ফাংশনটি এরকম দেখাচ্ছে:

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • রিটার্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

  • _হ্যান্ডেল ফেচ

    অকার্যকর

    _handleFetch ফাংশনটি এরকম দেখাচ্ছে:

    (request: Request, handler: StrategyHandler) => {...}

    • রিটার্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

  • _হ্যান্ডল ইনস্টল করুন

    অকার্যকর

    _handleInstall ফাংশনটি এরকম দেখাচ্ছে:

    (request: Request, handler: StrategyHandler) => {...}

    • রিটার্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

  • হাতল

    অকার্যকর

    একটি অনুরোধ কৌশল সম্পাদন করুন এবং একটি Promise প্রদান করুন যা একটি Response সাথে সমাধান করবে, সমস্ত প্রাসঙ্গিক প্লাগইন কলব্যাকগুলিকে আহ্বান করে৷

    যখন একটি কৌশল উদাহরণ ওয়ার্কবক্স workbox-routing.Route এর সাথে নিবন্ধিত হয়। রুটটি মেলে এই পদ্ধতিটি স্বয়ংক্রিয়ভাবে কল করা হয়।

    বিকল্পভাবে, এই পদ্ধতিটি event.respondWith() এ পাস করে একটি স্বতন্ত্র FetchEvent শ্রোতাদের মধ্যে ব্যবহার করা যেতে পারে।

    handle ফাংশনটি এরকম দেখাচ্ছে:

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • রিটার্ন

      প্রতিশ্রুতি <প্রতিক্রিয়া>

  • সব হ্যান্ডেল

    অকার্যকর

    workbox-strategies.Strategy~handle মতই, কিন্তু শুধুমাত্র একটি Promise ফেরত দেওয়ার পরিবর্তে যা একটি Response প্রতিশ্রুতি দেয় এটি একটি [response, done] প্রতিশ্রুতি প্রদান করবে, যেখানে পূর্বের ( response ) handle() ফেরত দেওয়ার সমতুল্য। , এবং পরেরটি হল একটি প্রতিশ্রুতি যা কৌশলটি সম্পাদনের অংশ হিসাবে event.waitUntil() এ যোগ করা যেকোনো প্রতিশ্রুতি সম্পূর্ণ হয়ে গেলে সমাধান হবে।

    কৌশল দ্বারা সম্পাদিত অতিরিক্ত কাজ (সাধারণত ক্যাশিং প্রতিক্রিয়া) সফলভাবে সম্পন্ন হয় তা নিশ্চিত করার জন্য আপনি done প্রতিশ্রুতির জন্য অপেক্ষা করতে পারেন।

    handleAll ফাংশনটি এর মত দেখাচ্ছে:

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • রিটার্ন

      [প্রতিশ্রুতি<প্রতিক্রিয়া>, প্রতিশ্রুতি<void>]

      [প্রতিক্রিয়া, সম্পন্ন] প্রতিশ্রুতির একটি টুপল যা প্রতিক্রিয়া কখন সমাধান হয় এবং হ্যান্ডলার তার সমস্ত কাজ শেষ করে তা নির্ধারণ করতে ব্যবহার করা যেতে পারে।

urlManipulation()

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

টাইপ

ফাংশন

পরামিতি

  • { url }

    বস্তু

    • url

      URL

রিটার্নস

  • URL[]

পদ্ধতি

addPlugins()

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

প্রিক্যাচিং কৌশলে প্লাগইন যোগ করে।

পরামিতি

addRoute()

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

পরিষেবা কর্মীর সাথে একটি fetch শ্রোতা যোগ করুন যেটি [নেটওয়ার্কের অনুরোধের] https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests পূর্বনির্ধারিত সম্পদ সহ সাড়া দেবে।

সম্পদের জন্য অনুরোধ যেগুলি আগে থেকে সংরক্ষিত নয়, FetchEvent প্রতি সাড়া দেওয়া হবে না, যাতে ইভেন্টটি অন্যান্য fetch শ্রোতাদের কাছে পৌঁছে যায়।

পরামিতি

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

একটি activate ইভেন্ট লিসেনার যোগ করে যা ওয়ার্কবক্সের পুরানো সংস্করণগুলির দ্বারা তৈরি করা বেমানান প্রিক্যাচগুলি পরিষ্কার করবে৷

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

হেল্পার ফাংশন যা ডিফল্ট PrecacheController ইনস্ট্যান্সে PrecacheController#createHandlerBoundToURL কল করে।

আপনি যদি নিজের PrecacheController তৈরি করেন, তাহলে এই ফাংশনটি ব্যবহার না করে সেই উদাহরণে PrecacheController#createHandlerBoundToURL কল করুন।

পরামিতি

  • url

    স্ট্রিং

    প্রিক্যাচড ইউআরএল যা Response দেখতে ব্যবহার করা হবে।

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

একটি ইউআরএল নেয় এবং প্রাক্যাশে এন্ট্রি খুঁজতে ব্যবহার করা যেতে পারে এমন সংশ্লিষ্ট ইউআরএল ফেরত দেয়।

একটি আপেক্ষিক URL প্রদান করা হলে, পরিষেবা কর্মী ফাইলের অবস্থান বেস হিসাবে ব্যবহার করা হবে।

রিভিশন তথ্য ছাড়াই প্রিক্যাচড এন্ট্রির জন্য, ক্যাশে কী মূল URL-এর মতোই হবে।

পুনর্বিবেচনা তথ্য সহ প্রিক্যাচড এন্ট্রিগুলির জন্য, ক্যাশে কীটি হবে মূল URL এবং রিভিশন তথ্যের ট্র্যাক রাখার জন্য ব্যবহৃত একটি ক্যোয়ারী প্যারামিটার যুক্ত করা।

পরামিতি

  • url

    স্ট্রিং

    URL যার ক্যাশে কী দেখতে হবে।

রিটার্নস

  • স্ট্রিং | অনির্ধারিত

    সেই URL-এর সাথে সম্পর্কিত ক্যাশে কী।

matchPrecache()

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

হেল্পার ফাংশন যা পূর্বনির্ধারিত PrecacheController দৃষ্টান্তে PrecacheController#matchPrecache কল করে।

আপনি যদি নিজের PrecacheController তৈরি করেন, তাহলে এই ফাংশনটি ব্যবহার না করে সেই উদাহরণে PrecacheController#matchPrecache কল করুন।

পরামিতি

  • অনুরোধ

    স্ট্রিং | অনুরোধ

    প্রিক্যাশে দেখার জন্য কী (পরামিতি সংশোধন না করে)।

রিটার্নস

  • প্রতিশ্রুতি <প্রতিক্রিয়া | undefined>

precache()

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

প্রিক্যাশ তালিকায় আইটেম যোগ করে, যেকোনো সদৃশ অপসারণ করে এবং ক্যাশে ফাইলগুলি সংরক্ষণ করে" যখন পরিষেবা কর্মী ইনস্টল করে।

এই পদ্ধতি একাধিকবার বলা যেতে পারে।

অনুগ্রহ করে মনে রাখবেন: এই পদ্ধতিটি আপনার জন্য কোনো ক্যাশ করা ফাইল পরিবেশন করবে না । এটা শুধুমাত্র ফাইল precaches. একটি নেটওয়ার্ক অনুরোধে সাড়া দিতে আপনি workbox-precaching.addRoute কল করুন।

যদি আপনার কাছে precache করার জন্য ফাইলের একটি একক অ্যারে থাকে, তাহলে আপনি শুধু workbox-precaching.precacheAndRoute কল করতে পারেন।

পরামিতি

  • এন্ট্রি

    (স্ট্রিং | PrecacheEntry )[]

precacheAndRoute()

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

এই পদ্ধতিটি প্রিক্যাশে তালিকায় এন্ট্রি যোগ করবে এবং ইভেন্ট আনার প্রতিক্রিয়া জানাতে একটি রুট যোগ করবে।

এটি একটি সুবিধাজনক পদ্ধতি যা একটি কলে workbox-precaching.precache এবং workbox-precaching.addRoute কল করবে।

পরামিতি

  • এন্ট্রি

    (স্ট্রিং | PrecacheEntry )[]

    precache এন্ট্রি অ্যারে.

  • বিকল্প

    PrecacheRouteOptions ঐচ্ছিক