সার্ভিস ওয়ার্কারের মাধ্যমে অ্যাসেট ক্যাশে করলে, বার বার ভিজিট করার প্রসেস আরও দ্রুত হতে পারে এবং অফলাইন সহায়তা প্রদান করা যেতে পারে। Workbox এটি সহজ করে তোলে এবং ডিফল্ট হিসেবে Create React App-এ অন্তর্ভুক্ত থাকে।
Workbox-কে
Create React App (CRA)-এ ডিফল্ট কনফিগারেশনের সাথে বিল্ড করা হয়েছে যা প্রতিটি বিল্ডের সাথে আপনার অ্যাপ্লিকেশনের সব
স্ট্যাটিক অ্যাসেট প্রি-ক্যাশে করে।
এটি কেন কাজে লেগেছে?
সার্ভিস ওয়ার্কার আপনাকে গুরুত্বপূর্ণ রিসোর্স ক্যাশেতে স্টোর করতে দেয় (প্রি-ক্যাশিং) যাতে ব্যবহারকারী দ্বিতীয়বার ওয়েব পেজ লোড করলে, ব্রাউজার নেটওয়ার্কে অনুরোধ করার পরিবর্তে সার্ভিস ওয়ার্কার থেকে সেগুলি উদ্ধার করতে পারে। এর ফলে, বারবার ভিজিট করার সময় পৃষ্ঠা দ্রুত লোড হয় এবং ব্যবহারকারী অফলাইনে থাকলেও কন্টেন্ট দেখানো যায়।
CRA-তে Workbox
Workbox হল টুলের একটি সংগ্রহ যা আপনাকে সার্ভিস ওয়ার্কার তৈরি ও রক্ষণাবেক্ষণ করতে
দেয়। CRA-তে,
workbox-webpack-plugin
প্রোডাকশন বিল্ডে আগে থেকেই অন্তর্ভুক্ত থাকে এবং প্রতিটি বিল্ডের সাথে নতুন সার্ভিস ওয়ার্কার রেজিস্টার করার জন্য
শুধুমাত্র src/index.js ফাইলে
এটি চালু করতে হয়:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
CRA-এর মাধ্যমে তৈরি করা React অ্যাপের একটি উদাহরণ এখানে দেওয়া হল, যেখানে এই ফাইলের মাধ্যমে সার্ভিস ওয়ার্কার চালু করা আছে:
কোন কোন অ্যাসেট ক্যাশে করা হচ্ছে তা দেখতে:
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন। - DevTools খুলতে `Control+Shift+J` (বা Mac-এ `Command+Option+J`) প্রেস করুন।
- নেটওয়ার্ক ট্যাবে ক্লিক করুন।
- অ্যাপটি আবার লোড করুন।
আপনি লক্ষ্য করবেন যে পেলোডের সাইজ দেখানোর পরিবর্তে, Size কলামে
একটি (from ServiceWorker) মেসেজ দেখায় যা ইঙ্গিত করে যে এইসব রিসোর্স সার্ভিস ওয়ার্কার থেকে
উদ্ধার করা হয়েছে।
যেহেতু সার্ভিস ওয়ার্কার সব স্ট্যাটিক অ্যাসেট ক্যাশে করে, তাই অফলাইনে থাকাকালীন অ্যাপ্লিকেশন ব্যবহার করার চেষ্টা করুন:
- DevTools-এর নেটওয়ার্ক ট্যাবে, অফলাইন অভিজ্ঞতা সিমুলেট করতে অফলাইন চেকবক্স চালু করুন।
- অ্যাপটি আবার লোড করুন।
নেটওয়ার্ক কানেকশন না থাকলেও, অ্যাপ্লিকেশনটি ঠিক একই রকমভাবে কাজ করে!
ক্যাশিং স্ট্র্যাটেজি পরিবর্তন করা হচ্ছে
CRA-তে Workbox-এর ব্যবহার করা ডিফল্ট প্রিক্যাশিং স্ট্র্যাটেজি হল ক্যাশে-ফার্স্ট, যেখানে সব স্ট্যাটিক অ্যাসেট সার্ভিস ওয়ার্কার ক্যাশে থেকে ফেচ করা হয় এবং সেটি ব্যর্থ হলে (যেমন, রিসোর্স ক্যাশে করা না থাকলে), নেটওয়ার্ক অনুরোধ করা হয়। এইভাবে ব্যবহারকারীরা সম্পূর্ণ অফলাইন মোডে থাকলেও তাদের কন্টেন্ট দেখানো যেতে পারে।
যদিও স্ট্যাটিক ও ডায়নামিক রিসোর্স ক্যাশে করার জন্য বিভিন্ন স্ট্র্যাটেজি ও অ্যাপ্রোচ সংজ্ঞায়িত করার ক্ষেত্রে
Workbox সহায়তা প্রদান করে, CRA-তে ডিফল্ট কনফিগারেশন
সম্পূর্ণরূপে ইজেক্ট না করা পর্যন্ত পরিবর্তন বা ওভাররাইট করা যাবে না। তবে, এক্সটার্নাল workbox.config.js ফাইলের জন্য সহায়তা যোগ করার বিষয়টি এক্সপ্লোর করার জন্য একটি
ওপেন প্রস্তাব
রয়েছে। এর ফলে
ডেভেলপাররা শুধুমাত্র একটি workbox.config.js ফাইল তৈরি করেই ডিফল্ট সেটিংস ওভাররাইড করতে
পারবেন।
ক্যাশে-ফার্স্ট স্ট্র্যাটেজি ম্যানেজ করা
প্রথমে সার্ভিস ওয়ার্কার ক্যাশের উপর নির্ভর করা এবং তারপরে নেটওয়ার্কে ফিরে আসা হল এমন সাইট তৈরি করার একটি চমৎকার উপায় যা পরবর্তী ভিজিটে দ্রুত লোড হয় এবং কিছুটা অফলাইনে কাজ করে। তবে, কিছু বিষয় বিবেচনা করে দেখতে হবে:
- কোনও সার্ভিস ওয়ার্কারের ক্যাশিং আচরণ কীভাবে পরীক্ষা করা যেতে পারে?
- ব্যবহারকারীদের কি কোনও মেসেজ দেখানো উচিত যাতে তারা জানতে পারেন যে তারা ক্যাশে করা কন্টেন্ট দেখছেন?
CRA ডকুমেন্টেশন থেকে এইসব পয়েন্ট এবং আরও অনেক কিছু সম্পর্কে বিস্তারিত জানতে পারবেন।
উপসংহার
আপনার ব্যবহারকারীদের আরও দ্রুত অভিজ্ঞতা এবং অফলাইন সহায়তা প্রদান করতে আপনার অ্যাপ্লিকেশনে গুরুত্বপূর্ণ রিসোর্স প্রিক্যাশ করতে কোনও সার্ভিস ওয়ার্কার ব্যবহার করুন।
- আপনি CRA ব্যবহার করলে,
src/index.js-এ আগে থেকে কনফিগার করা সার্ভিস ওয়ার্কার চালু করুন। - আপনি React অ্যাপ্লিকেশন তৈরি করার জন্য CRA ব্যবহার না করলে, Workbox-এর প্রদান করা অনেক লাইব্রেরির মধ্যে একটি, যেমন
workbox-webpack-plugin, আপনার বিল্ড প্রসেসে অন্তর্ভুক্ত করুন। - CRA কখন
workbox.config.jsওভাররাইড ফাইল সাপোর্ট করবে তা জানতে এই GitHub সমস্যা দেখুন।