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

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

generateSW দিয়ে প্রিক্যাচিং

generateSW হল ওয়ার্কবক্সে সম্পদ প্রিক্যাশ করার সবচেয়ে সহজ উপায়। generateSW সম্পর্কে মনে রাখতে হবে যে আপনি নিজের পরিষেবা কর্মী লিখছেন না—আপনি ওয়ার্কবক্সকে আপনার জন্য একটি তৈরি করতে বলছেন। যাইহোক, আপনি বিভিন্ন কনফিগারেশন বিকল্পের মাধ্যমে এর আচরণকে প্রভাবিত করতে পারেন ।

আপনি কোন বিল্ড টুল ব্যবহার করেন তার উপর নির্ভর করে generateSW ডিফল্টভাবে বিভিন্ন জিনিস করে। workbox-webpack-plugin ব্যবহার করার সময়, আপনাকে কোনো কনফিগারেশন বিকল্প নির্দিষ্ট করতে হবে না। ডিফল্টরূপে, প্লাগইনটি ওয়েবপ্যাকের নির্ভরতা গ্রাফে অন্তর্ভুক্ত সমস্ত কিছুকে প্রিক্যাচ করবে এবং output.path দ্বারা নির্দিষ্ট ডিরেক্টরিতে service-worker.js নামে একটি পরিষেবা কর্মী লিখবে।

অন্যদিকে, আপনি যদি workbox-build বা workbox-cli ব্যবহার করেন, শুধুমাত্র স্থানীয় ফাইল সিস্টেম থেকে পড়া এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট সম্পদগুলি ডিফল্টরূপে প্রিক্যাচ করা হবে। কনফিগারেশন অনুসারে, আপনাকে কাজ করার জন্য প্রিক্যাচিংয়ের জন্য generateSW কনফিগারে swDest এবং globDirectory বিকল্পটি নির্দিষ্ট করতে হবে। সম্ভাবনা হল, আপনি আপনার পরিষেবা কর্মীদের আচরণকে প্রভাবিত করে এমন অতিরিক্ত বিকল্পগুলিও কনফিগার করতে চাইবেন, তাই ডকুমেন্টেশনটি দেখুন।

সতর্কতা: যদি আপনার প্রকল্পে অনেকগুলি সম্পদ ডিফল্ট সেটিংসের সাথে প্রিক্যাচ করা থাকে, তাহলে generateSW কনফিগারেশনে সংস্থানগুলি বাদ দিতে গ্লোব বিকল্পগুলির একটি ব্যবহার করুন৷ workbox-webpack-plugin ব্যবহার করার সময়, কীভাবে অবাঞ্ছিত সম্পদগুলিকে প্রিক্যাচ করা থেকে আটকাতে হয় তা জানতে প্লাগইনের GenerateSW ডকুমেন্টেশনের সাথে পরামর্শ করুন, কারণ এর কনফিগারেশন generateSW থেকে আলাদা।

injectManifest সাথে প্রিক্যাচিং

injectManifest ব্যবহার করা generateSW ব্যবহার করার মতো সহজ নয়, কিন্তু আপনি আরও বেশি নমনীয়তার জন্য ব্যবহার সহজে ট্রেড করছেন৷ যেখানে generateSW আপনার জন্য সম্পূর্ণ পরিষেবা কর্মী প্রজন্ম পরিচালনা করে, সেখানে injectManifest একজন পরিষেবা কর্মীকে নিয়ে যায় যাকে আপনি এটির উত্স হিসাবে লিখছেন এবং আপনার বাকি পরিষেবা কর্মীকে যেমন আছে-তাই রেখে প্রিক্যাশে ইউআরএলগুলির একটি তালিকা ইনজেক্ট করে৷

আপনি যখন injectManifest ব্যবহার করেন, তখন আপনি precaching লজিক ওয়্যারিং আপ করার জন্য দায়ী। যখন injectManifest আপনার ইনপুট পরিষেবা কর্মী পরীক্ষা করে, তখন এটি একটি বিশেষ self.__WB_MANIFEST এই ভেরিয়েবলটি উপস্থিত না থাকলে, injectManifest একটি ত্রুটি নিক্ষেপ করবে।

দ্রষ্টব্য: আপনি যদি স্ট্রিং injectManifest পরিবর্তন করতে চান self.__WB_MANIFEST থেকে ভিন্ন injectionPoint জন্য।

precache ম্যানিফেস্টের এন্ট্রিগুলির তালিকা অতিরিক্ত কনফিগারেশন বিকল্পগুলির সাথে টুইক করা যেতে পারে।

সতর্কতা: generateSW বিপরীতে, injectManifest স্বয়ংক্রিয়ভাবে আপনার জন্য ওয়ার্কবক্স রানটাইম বান্ডিল করবে না! injectManifest উপর নির্ভর করে এমন ব্যবহারের ক্ষেত্রে কীভাবে এটি পরিচালনা করবেন তা দেখতে, নীচের পাশাপাশি তুলনাটি দেখুন।

পাশাপাশি তুলনা

generateSW এবং injectManifest পদ্ধতির ব্যবহার তুলনা করতে নীচের প্রতিটি ট্যাবে ক্লিক করুন:

যেহেতু generateSW একটি পরিষেবা কর্মী তৈরি করে, আপনাকে শুধুমাত্র একটি কনফিগারেশন নির্দিষ্ট করতে হবে। নিচে workbox-build ব্যবহার করে একটি উদাহরণ দেওয়া হল:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

পরিষেবা কর্মী তারপর নোডের সাথে কমান্ড লাইনে তৈরি করা যেতে পারে:

node build-sw.js

যেহেতু injectManifest জন্য একটি উৎস পরিষেবা কর্মী প্রয়োজন, তাই একটি ন্যূনতম কার্যকর উদাহরণের জন্য একটি উৎস পরিষেবা কর্মী ফাইল প্রয়োজন৷ যদি সমস্ত প্রয়োজন হয় প্রিক্যাচিং, সেই ইনপুট পরিষেবা কর্মী দেখতে এইরকম কিছু হতে পারে:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST স্ট্রিং। এটি একটি স্থানধারক যা Workbox precache ম্যানিফেস্ট দিয়ে প্রতিস্থাপন করে। নীচে এই ব্যবহারের ক্ষেত্রে একটি বৈধ কনফিগারেশন রয়েছে:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

আপনার যদি জটিল প্রয়োজনীয়তা থাকে, যেমন উন্নত রাউটিং, কাস্টম ক্যাশিং কৌশল বা অন্যান্য জিনিস যা generateSW প্রদান করে বিকল্পগুলির দ্বারা কভার করা হয় না, তাহলে injectManifest পছন্দ করা হয়।

সতর্কতা: উপরের উদাহরণগুলি অনুমান করে যে আপনি একটি নোড পরিবেশে আছেন যা স্থানীয়ভাবে বিল্ড স্টেপ ছাড়াই ES মডিউলগুলিকে সমর্থন করে। 16 সংস্করণের পূর্বে নোডের সংস্করণগুলিতে, আপনাকে ES মডিউল সমর্থন সক্ষম করতে একটি পতাকা সেট করতে হতে পারে, অথবা module.exports ব্যবহার করে CommonJS শব্দার্থবিদ্যার উপর নির্ভর করতে হতে পারে।

উপসংহার

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