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

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

রেসিপি

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

অফলাইন ফলব্যাক

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

এই রেসিপিটি, ডিফল্টরূপে, অনুমান করে যে ফলব্যাক পৃষ্ঠাটি offline.html এবং সেখানে কোনও চিত্র বা ফন্ট ফলব্যাক নেই৷ সমস্ত কনফিগারেশন বিকল্পগুলির একটি তালিকার জন্য অফলাইন ফলব্যাক বিকল্পগুলি দেখুন৷

অফলাইন ফলব্যাক শুধুমাত্র প্রদত্ত অনুরোধের জন্য একটি মিলিত রুট থাকলেই প্রয়োগ করা হবে৷ আপনি যদি অফলাইন ফলব্যাক রেসিপিটি নিজেই ব্যবহার করেন তবে আপনাকে নিজেই রুট তৈরি করতে হবে। করার সবচেয়ে সহজ উপায় হল setDefaultHandler() পদ্ধতি ব্যবহার করে একটি রুট তৈরি করা যা সমস্ত অনুরোধের জন্য NetworkOnly কৌশল প্রয়োগ করে, যেমন নীচে দেখানো হয়েছে। অন্যান্য রেসিপি, যেমন পৃষ্ঠা ক্যাশে , স্ট্যাটিক রিসোর্স ক্যাশে , বা ইমেজ ক্যাশে , তাদের নিজ নিজ ক্যাশের জন্য রুট সেট আপ করে। setDefaultHandler() অফলাইন ফলব্যাক এবং সেই রেসিপিগুলির মধ্যে একটি উভয়ই ব্যবহার করার সময় প্রয়োজন হয় না।

রেসিপি

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

প্যাটার্ন

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-fallbacks')
      .then(cache => cache.addAll(files))
  );
});

const handler = async options => {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFallback)) || Response.error();
  }

  if (dest === 'image' && imageFallback !== false) {
    return (await cache.match(imageFallback)) || Response.error();
  }

  if (dest === 'font' && fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

উষ্ণ কৌশল ক্যাশে

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

সমস্ত কনফিগারেশন বিকল্পের তালিকার জন্য উষ্ণ কৌশল ক্যাশে বিকল্পগুলি দেখুন।

রেসিপি

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

warmStrategyCache({urls, strategy});

প্যাটার্ন

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

পৃষ্ঠা ক্যাশে

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

এই রেসিপিটি, ডিফল্টরূপে, নেটওয়ার্ক টাইমআউট 3 সেকেন্ড হওয়া উচিত এবং warmCache বিকল্পের মাধ্যমে ক্যাশে ওয়ার্মিং সমর্থন করে। সমস্ত কনফিগারেশন বিকল্পের তালিকার জন্য পৃষ্ঠা ক্যাশে বিকল্পগুলি দেখুন।

রেসিপি

import {pageCache} from 'workbox-recipes';

pageCache();

প্যাটার্ন

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

const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

স্ট্যাটিক সম্পদ ক্যাশে

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

এই রেসিপিটি warmCache বিকল্পের মাধ্যমে ক্যাশে ওয়ার্মিং সমর্থন করে। সমস্ত কনফিগারেশন বিকল্পের তালিকার জন্য স্ট্যাটিক রিসোর্স ক্যাশে বিকল্পগুলি দেখুন।

রেসিপি

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

প্যাটার্ন

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

const cacheName = 'static-resources';
const matchCallback = ({request}) =>
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

ইমেজ ক্যাশে

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

এই রেসিপিটি, ডিফল্টরূপে, সর্বোচ্চ 60টি ছবি ক্যাশ করে, প্রতিটি 30 দিনের জন্য এবং warmCache বিকল্পের মাধ্যমে ক্যাশে ওয়ার্মিং সমর্থন করে। সমস্ত কনফিগারেশন বিকল্পগুলির তালিকার জন্য চিত্র ক্যাশে বিকল্পগুলি দেখুন।

রেসিপি

import {imageCache} from 'workbox-recipes';

imageCache();

প্যাটার্ন

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

গুগল ফন্ট ক্যাশে

Google ফন্ট রেসিপি একটি Google ফন্ট অনুরোধের দুটি অংশ ক্যাশ করে:

• @font-face সংজ্ঞা সহ স্টাইলশীট, যা ফন্ট ফাইলগুলির সাথে লিঙ্ক করে।
• স্থির, পরিমার্জিত ফন্ট ফাইল।

যেহেতু স্টাইলশীট ঘন ঘন পরিবর্তিত হতে পারে, একটি স্থির-যখন-পুনর্বিচারিত ক্যাশিং কৌশল ব্যবহার করা হয়। অন্য দিকে, ফন্ট ফাইলগুলি নিজেরাই পরিবর্তন করে না এবং একটি ক্যাশে প্রথম কৌশল ব্যবহার করতে পারে।

এই রেসিপিটি, ডিফল্টরূপে, সর্বোচ্চ 30টি ফন্ট ফাইল ক্যাশ করে, প্রতিটি এক বছরের জন্য। সমস্ত কনফিগারেশন বিকল্পের তালিকার জন্য Google ফন্ট ক্যাশে বিকল্পগুলি দেখুন।

রেসিপি

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

প্যাটার্ন

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;

registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

দ্রুত ব্যবহার

সমস্ত রেসিপি একত্রে একত্রিত করার ফলে একজন পরিষেবা কর্মী পাওয়া যাবে যেটি একটি নেটওয়ার্ক ফার্স্ট ক্যাশিং কৌশলের মাধ্যমে পৃষ্ঠার অনুরোধে সাড়া দেয়, সিএসএস, জাভাস্ক্রিপ্ট এবং ওয়েব ওয়ার্কার অনুরোধে একটি স্থির-অবস্থা-পুনঃপ্রমাণ কৌশলের সাথে সাড়া দেয়, প্রথমে একটি ক্যাশ সহ ইমেজ অনুরোধের জবাব দেয়। কৌশল, সঠিকভাবে Google ফন্ট ক্যাশে, এবং পৃষ্ঠা অনুরোধের জন্য একটি অফলাইন ফলব্যাক প্রদান করুন। এই সব নিম্নলিখিত সঙ্গে করা যেতে পারে:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

প্রকারভেদ

GoogleFontCacheOptions

বৈশিষ্ট্য

• cachePrefix

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

• সর্বোচ্চ বয়স সেকেন্ড

  সংখ্যা ঐচ্ছিক

• maxEntry

  সংখ্যা ঐচ্ছিক

ImageCacheOptions

বৈশিষ্ট্য

• cacheName

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

• ম্যাচ কলব্যাক

  RouteMatchCallback ঐচ্ছিক

• সর্বোচ্চ বয়স সেকেন্ড

  সংখ্যা ঐচ্ছিক

• maxEntry

  সংখ্যা ঐচ্ছিক

• প্লাগইন

  WorkboxPlugin [] ঐচ্ছিক

• উষ্ণ ক্যাশে

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

OfflineFallbackOptions

বৈশিষ্ট্য

• fontFallback

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

• ইমেজ ফলব্যাক

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

• পাতা ফলব্যাক

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

PageCacheOptions

বৈশিষ্ট্য

• cacheName

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

• ম্যাচ কলব্যাক

  RouteMatchCallback ঐচ্ছিক

• নেটওয়ার্ক টাইমআউট সেকেন্ড

  সংখ্যা ঐচ্ছিক

• প্লাগইন

  WorkboxPlugin [] ঐচ্ছিক

• উষ্ণ ক্যাশে

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

StaticResourceOptions

বৈশিষ্ট্য

• cacheName

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

• ম্যাচ কলব্যাক

  RouteMatchCallback ঐচ্ছিক

• প্লাগইন

  WorkboxPlugin [] ঐচ্ছিক

• উষ্ণ ক্যাশে

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

WarmStrategyCacheOptions

বৈশিষ্ট্য

• কৌশল

  কৌশল

• ইউআরএল

  স্ট্রিং[]

পদ্ধতি

googleFontsCache()

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts ক্যাশিং রেসিপির একটি বাস্তবায়ন

পরামিতি

• বিকল্প

  GoogleFontCacheOptions ঐচ্ছিক

imageCache()

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

[ইমেজ ক্যাশিং রেসিপি] https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images এর একটি বাস্তবায়ন

পরামিতি

• বিকল্প

  ImageCacheOptions ঐচ্ছিক

offlineFallback()

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

[বিস্তৃত ফলব্যাক রেসিপি] https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks এর একটি বাস্তবায়ন। আপনার precache ইনজেকশনে ফলব্যাকগুলি অন্তর্ভুক্ত করতে ভুলবেন না

পরামিতি

• বিকল্প

  OfflineFallbackOptions ঐচ্ছিক

pageCache()

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

নেটওয়ার্ক টাইমআউট সহ একটি পৃষ্ঠা ক্যাশিং রেসিপির বাস্তবায়ন

পরামিতি

• বিকল্প

  PageCacheOptions ঐচ্ছিক

staticResourceCache()

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

[CSS এবং JavaScript ফাইলের রেসিপি] https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files এর বাস্তবায়ন

পরামিতি

• বিকল্প

  StaticResourceOptions ঐচ্ছিক

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

পরামিতি

• বিকল্প

  ওয়ার্ম স্ট্র্যাটেজি ক্যাশ অপশন