1. স্বাগতম
এই ল্যাবে, আপনি একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশন নেবেন এবং এটিকে অফলাইনে কাজ করতে পারবেন। প্রোগ্রেসিভ ওয়েব অ্যাপ ওয়ার্কশপের জন্য সহচর কোডল্যাবগুলির একটি সিরিজের মধ্যে এটি প্রথম ৷ এই সিরিজে আরও সাতটি কোডল্যাব রয়েছে।
আপনি কি শিখবেন
- হাতে একজন সেবা কর্মী লিখুন
- একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশনে একজন পরিষেবা কর্মী যোগ করুন
- অফলাইনে সংস্থানগুলি উপলব্ধ করতে পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API ব্যবহার করুন৷
আপনি কি জানতে হবে
- বেসিক এইচটিএমএল এবং জাভাস্ক্রিপ্ট
আপনি কি প্রয়োজন হবে
- একটি ব্রাউজার যা পরিষেবা কর্মীদের সমর্থন করে
2. সেট আপ করুন
এই কোডল্যাবটি সম্পূর্ণ করার জন্য প্রয়োজনীয় স্টার্টার কোডটি ক্লোনিং বা ডাউনলোড করে শুরু করুন:
আপনি যদি রেপো ক্লোন করেন, নিশ্চিত করুন যে আপনি starter শাখায় আছেন। জিপ ফাইলটিতে সেই শাখার কোডও রয়েছে।
এই কোডবেসের জন্য Node.js 14 বা উচ্চতর প্রয়োজন। কোডটি উপলব্ধ হয়ে গেলে, আপনার প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করার জন্য কোডের ফোল্ডারে কমান্ড লাইন থেকে npm ci চালান। তারপর, কোডল্যাবের জন্য ডেভেলপমেন্ট সার্ভার শুরু করতে npm start চালান।
সোর্স কোডের README.md ফাইলটি সমস্ত বিতরণ করা ফাইলের জন্য একটি ব্যাখ্যা প্রদান করে। এছাড়াও, এই কোডল্যাব জুড়ে আপনি যে মূল বিদ্যমান ফাইলগুলির সাথে কাজ করবেন তা নিম্নরূপ:
কী ফাইল
-
js/main.js- প্রধান অ্যাপ্লিকেশন জাভাস্ক্রিপ্ট ফাইল -
service-worker.js- অ্যাপ্লিকেশনের পরিষেবা কর্মী ফাইল
3. অফলাইনে পরীক্ষা করুন
কোনো পরিবর্তন করার আগে, ওয়েব অ্যাপটি বর্তমানে অফলাইনে কাজ করে না তা দেখানোর জন্য পরীক্ষা করা যাক। এটি করতে, হয় আমাদের কম্পিউটার অফলাইনে নিয়ে যান এবং ওয়েব অ্যাপ পুনরায় লোড করুন, অথবা, আপনি যদি Chrome ব্যবহার করেন:
- Chrome ডেভ টুল খুলুন
- অ্যাপ্লিকেশন ট্যাবে স্যুইচ করুন
- পরিষেবা কর্মী বিভাগে স্যুইচ করুন
- অফলাইন চেকবক্স চেক করুন
- Chrome Dev Tools বন্ধ না করে পৃষ্ঠাটি রিফ্রেশ করুন
সাইটটি পরীক্ষিত এবং সফলভাবে অফলাইনে লোড করতে ব্যর্থ হওয়ায়, কিছু অনলাইন কার্যকারিতা যোগ করার সময় এসেছে! অফলাইন চেকবক্সটি আনচেক করুন এবং পরবর্তী ধাপে চালিয়ে যান।
4. অফলাইনে নিন
এটি একটি মৌলিক সেবা কর্মী যোগ করার সময়! এটি দুটি ধাপে ঘটবে: পরিষেবা কর্মী নিবন্ধন করা এবং সম্পদ ক্যাশ করা।
একজন পরিষেবা কর্মী নিবন্ধন করুন
ইতিমধ্যেই একটি খালি পরিষেবা কর্মী ফাইল রয়েছে, তাই পরিবর্তনগুলি দেখানো হয়েছে তা নিশ্চিত করতে, আসুন এটি আমাদের অ্যাপ্লিকেশনে নিবন্ধন করি৷ এটি করতে, js/main.js এর শীর্ষে নিম্নলিখিত কোডটি যুক্ত করুন:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
ব্যাখ্যা
পৃষ্ঠাটি লোড হয়ে গেলে এই কোডটি খালি service-worker.js পরিষেবা কর্মী ফাইল নিবন্ধন করে এবং শুধুমাত্র যদি সাইটটি পরিষেবা কর্মীদের সমর্থন করে।
Precache সম্পদ
ওয়েব অ্যাপ অফলাইনে কাজ করার জন্য, ব্রাউজারটিকে নেটওয়ার্ক অনুরোধের প্রতিক্রিয়া জানাতে সক্ষম হতে হবে এবং সেগুলিকে কোথায় রুট করতে হবে তা চয়ন করতে হবে৷ এটি করতে, service-worker.js এ নিম্নলিখিত যোগ করুন
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
এখন, ব্রাউজারে ফিরে যান, আপনার পূর্বরূপ ট্যাবটি বন্ধ করুন এবং এটিকে আবার খুলুন। আপনি পরিষেবা কর্মীর বিভিন্ন ইভেন্টের সাথে সঙ্গতিপূর্ণ console.log দেখতে হবে!
এর পরে, আবার অফলাইনে যান এবং সাইটটি রিফ্রেশ করুন। আপনি অফলাইনে থাকা সত্ত্বেও এটি লোড হচ্ছে দেখতে হবে!
ব্যাখ্যা
পরিষেবা কর্মীর ইনস্টল ইভেন্টের সময়, ক্যাশে স্টোরেজ API ব্যবহার করে একটি নামযুক্ত ক্যাশে খোলা হয়। precacheResources এ নির্দিষ্ট করা ফাইল এবং রুটগুলি তারপর cache.addAll পদ্ধতি ব্যবহার করে ক্যাশে লোড করা হয়। এটিকে প্রিক্যাচিং বলা হয় কারণ এটি ইন্সটল টাইমে ফাইলের সেটকে ক্যাশ করে যখন তাদের প্রয়োজন বা অনুরোধ করা হয় তখন ক্যাশ করার বিপরীতে।
একবার পরিষেবা কর্মী সাইটটি নিয়ন্ত্রণ করলে, অনুরোধ করা সংস্থানগুলি একটি প্রক্সির মতো পরিষেবা কর্মীদের মাধ্যমে যায়৷ প্রতিটি অনুরোধ একটি আনয়ন ইভেন্ট ট্রিগার করে যে, এই পরিষেবা কর্মী, একটি মিলের জন্য ক্যাশে অনুসন্ধান করে, যদি একটি মিল থাকে, ক্যাশে করা সম্পদের সাথে প্রতিক্রিয়া জানায়৷ যদি একটি মিল না থাকে, সম্পদ সাধারণত অনুরোধ করা হয়.
ক্যাশিং সংস্থান নেটওয়ার্ক অনুরোধগুলি এড়িয়ে অ্যাপটিকে অফলাইনে কাজ করার অনুমতি দেয়৷ এখন অফলাইনে অ্যাপটি 200 স্ট্যাটাস কোড দিয়ে সাড়া দিতে পারে!
5. অভিনন্দন!
আপনি পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API ব্যবহার করে কীভাবে আপনার ওয়েব অ্যাপ অফলাইনে নিতে হয় তা শিখেছেন।
সিরিজের পরবর্তী কোডল্যাব হল ওয়ার্কবক্সের সাথে কাজ করা