HTML5 এর Offline Web Application তৈরি করার জন্য, আমরা মূলত Application Cache এবং Service Workers ব্যবহার করি। এগুলি ওয়েব অ্যাপ্লিকেশনকে অফলাইনে কাজ করার ক্ষমতা প্রদান করে, অর্থাৎ ইন্টারনেট সংযোগ না থাকলেও ব্যবহারকারীরা অ্যাপ্লিকেশনটি ব্যবহার করতে পারবেন। এখানে আমরা Service Workers ব্যবহার করে একটি আধুনিক এবং কার্যকরী অফলাইন ওয়েব অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়া দেখব।
Offline Web Application তৈরি করতে যা যা প্রয়োজন
- Service Worker: এটি একটি স্ক্রিপ্ট যা ব্রাউজারের পেছনে চলে এবং ওয়েব অ্যাপ্লিকেশনকে অফলাইন মোডে কাজ করতে সক্ষম করে। Service Worker একটি মধ্যস্থ স্তর হিসেবে কাজ করে যা ক্যাশিং এবং রিকোয়েস্ট হ্যান্ডলিং করে।
- Cache API: Service Worker ক্যাশে করে রাখতে পারে প্রয়োজনীয় ফাইল এবং রিসোর্স, যাতে ব্যবহারকারী অফলাইনে থাকলেও সেগুলি অ্যাক্সেস করতে পারে।
১. Service Worker তৈরি
Service Worker ফাইলটি মূলত একটি JavaScript ফাইল হয়, যা ওয়েব অ্যাপ্লিকেশনের পেছনে চলে এবং অফলাইন কার্যকারিতা নিয়ন্ত্রণ করে।
১.১. Service Worker রেজিস্টার করা
প্রথমে, service-worker.js ফাইলটি রেজিস্টার করতে হবে।
// service-worker.js
self.addEventListener('install', (event) => {
// ক্যাশে তৈরি করা
event.waitUntil(
caches.open('my-cache-v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
'/images/logo.png',
]);
})
);
});
self.addEventListener('activate', (event) => {
// ক্যাশে আপডেট করার জন্য কোড এখানে
console.log('Service Worker Activated');
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request);
})
);
});
- install ইভেন্টে, Service Worker ক্যাশে ফাইলগুলো সংগ্রহ করে রাখে।
- activate ইভেন্টে, Service Worker অ্যাক্টিভ হওয়ার পর আপনি কোনো নতুন ক্যাশে বা পুরোনো ক্যাশে সিঙ্ক্রোনাইজেশন পরিচালনা করতে পারেন।
- fetch ইভেন্টে, এটি প্রতিটি রিকোয়েস্টে ক্যাশে চেক করে, যদি ক্যাশে ফাইল পাওয়া যায়, তাহলে তা রিটার্ন করে, অন্যথায় নেটওয়ার্ক থেকে রিকোয়েস্ট করে।
১.২. Service Worker রেজিস্টার করা HTML ফাইলে
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline Web App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>আমার অফলাইন অ্যাপ</h1>
<script>
// যদি ব্রাউজার Service Worker সমর্থন করে
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker রেজিস্টার হয়েছে: ', registration);
})
.catch((error) => {
console.log('Service Worker রেজিস্টার করতে সমস্যা হয়েছে: ', error);
});
}
</script>
</body>
</html>
এখানে, আমরা navigator.serviceWorker.register() ফাংশন ব্যবহার করে Service Worker রেজিস্টার করেছি। যদি ব্রাউজার এই ফিচারটি সমর্থন করে, তাহলে এটি Service Worker স্ক্রিপ্টটি লোড করবে।
২. Cache API ব্যবহার করা
Service Worker ক্যাশিং ব্যবস্থাপনা করে, যাতে ওয়েব অ্যাপ্লিকেশন অফলাইনে চলতে পারে। ক্যাশে API ব্যবহার করে আপনি ফাইলগুলির একটি তালিকা তৈরি করেন, যেগুলি অফলাইনে অ্যাক্সেস করা যাবে।
২.১. ক্যাশে করা ফাইল
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache-v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
'/images/logo.png',
]);
})
);
});
উপরে উল্লিখিত cache.addAll() মেথডের মাধ্যমে, আমরা কিছু নির্দিষ্ট ফাইল ক্যাশে করে রাখছি। যখন ব্যবহারকারী অফলাইনে থাকে, তখন এগুলোর সবগুলো সরাসরি ক্যাশ থেকে সরবরাহ করা হবে।
৩. Fetching Data from Cache
নেটওয়ার্ক রিকোয়েস্ট হলে, আপনি চেক করতে পারেন যে রিকোয়েস্ট করা ফাইলটি ক্যাশে রয়েছে কিনা। যদি থাকে, তবে তা ক্যাশ থেকে রিটার্ন করুন; অন্যথায়, এটি নেটওয়ার্ক থেকে রিকোয়েস্ট করা হবে।
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request);
})
);
});
এখানে, event.respondWith() মেথডটি ব্যবহার করে, আমরা রিকোয়েস্টের জন্য প্রথমে ক্যাশে চেক করি এবং যদি পাওয়া না যায়, তাহলে তা নেটওয়ার্ক থেকে রিকোয়েস্ট করি।
৪. Offline Experience
Service Worker কার্যকরভাবে কাজ করার পরে, আপনার অ্যাপ্লিকেশনটি যদি ইন্টারনেট সংযোগ না থাকে, তবুও আগের ক্যাশ করা রিসোর্সগুলো দিয়ে অ্যাপটি কাজ করবে। তবে, আপনি চাইলে এই সময়টিতে একটি offline page প্রদর্শন করতে পারেন।
৪.১. Offline Page
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).catch(() => {
// যদি নেটওয়ার্কের সাথে কানেকশন না থাকে
return caches.match('/offline.html');
});
})
);
});
এখানে, যদি নেটওয়ার্ক না থাকে, তবে offline.html ফাইলটি প্রদর্শিত হবে।
৫. Service Worker এর কার্যকারিতা নিশ্চিত করা
Service Worker সঠিকভাবে কাজ করছে কিনা তা যাচাই করতে আপনি Chrome DevTools ব্যবহার করতে পারেন।
- Chrome ব্রাউজারে ডেভেলপার টুলস (DevTools) ওপেন করুন (F12 বা Ctrl+Shift+I চাপুন)।
- Application ট্যাব সিলেক্ট করুন।
- Service Workers সেকশনে গিয়ে নিশ্চিত করুন যে আপনার Service Worker রেজিস্টার হয়েছে এবং কার্যকরী।
Service Worker এবং Cache API ব্যবহার করে আপনি একটি সম্পূর্ণ Offline Web Application তৈরি করতে পারেন। এটি ব্যবহারকারীদের অফলাইন অবস্থায়ও অ্যাপ্লিকেশনটি ব্যবহারের সুবিধা প্রদান করে, যা বিশেষত সেলুলার ডাটা বা ইন্টারনেট সংযোগের সীমিত প্রবাহের ক্ষেত্রে খুবই কার্যকর।
সারাংশ:
- Service Worker এবং Cache API ব্যবহার করে অ্যাপ্লিকেশনকে অফলাইনে সক্ষম করা যায়।
- ক্যাশে ফাইল সংরক্ষণ, ফেচিং, এবং অফলাইন পেজ ব্যবস্থাপনা করা যায়।
- Chrome DevTools এর মাধ্যমে Service Worker কার্যকারিতা পরীক্ষা করা যায়।
Read more
