PWA (Progressive Web App) হল এমন একটি ওয়েব অ্যাপ্লিকেশন যা একটি native mobile app এর মতো কাজ করে এবং ইউজারদের একটি native mobile app এর অভিজ্ঞতা প্রদান করে। PWA গুলি ইন্টারনেট সংযোগ ছাড়াই কাজ করতে সক্ষম এবং এগুলির মধ্যে একটি মোবাইল অ্যাপ্লিকেশন এবং ওয়েবসাইটের সর্বোত্তম বৈশিষ্ট্যগুলি মিশ্রিত করা হয়।
Materialize CSS ব্যবহার করে একটি PWA তৈরি করা খুবই সহজ, কারণ এটি responsive design প্রদান করে এবং মোবাইল ফ্রেন্ডলি। তবে, PWA তৈরি করার জন্য কিছু অতিরিক্ত স্টেপ প্রয়োজন, যেমন Service Workers, Manifest File, এবং HTTPS।
এই গাইডে, আমরা দেখব কিভাবে Materialize CSS ব্যবহার করে একটি Progressive Web App (PWA) তৈরি করা যায়।
PWA তৈরি করার জন্য প্রয়োজনীয় উপাদান
- Manifest File: এটি একটি JSON ফাইল যা আপনার ওয়েব অ্যাপের মেটাডেটা ধারণ করে, যেমন অ্যাপের নাম, আইকন, রঙ, শুরু পৃষ্ঠা ইত্যাদি।
- Service Workers: এটি এমন একটি স্ক্রিপ্ট যা ব্যাকগ্রাউন্ডে চলতে থাকে এবং অফলাইনে বা নেটওয়ার্ক সংযোগের সমস্যা থাকলেও অ্যাপ্লিকেশনটির কার্যকারিতা নিশ্চিত করে।
- HTTPS: PWA সিকিউরড কনেকশন প্রয়োজন, তাই আপনার ওয়েবসাইটের HTTPS থাকতে হবে।
PWA তৈরি করার স্টেপ-by-স্টেপ গাইড
১. Materialize CSS ইনস্টলেশন এবং সেটআপ
প্রথমে আপনাকে Materialize CSS সেটআপ করতে হবে। যদি আপনি Materialize CSS ব্যবহার করে একটি সাধারণ ওয়েবসাইট তৈরি করেন, তবে আপনার প্রথম কাজ হবে সেই ওয়েবসাইটটি PWA হিসেবে রূপান্তরিত করা।
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
এই কোডটি আপনার HTML ফাইলে যোগ করে আপনি Materialize CSS এর স্টাইলিং ব্যবহার করতে পারবেন।
২. Manifest File তৈরি করা
Manifest File হল একটি JSON ফাইল যা আপনার ওয়েব অ্যাপের মেটাডেটা সংরক্ষণ করে। এটি ওয়েব অ্যাপকে একটি native অ্যাপের মতো আচরণ করতে সহায়ক।
manifest.json নামের একটি ফাইল তৈরি করুন এবং এর মধ্যে নিম্নলিখিত কনফিগারেশনগুলি যোগ করুন:
{
"name": "My PWA App",
"short_name": "PWA",
"description": "A progressive web app built with Materialize",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#00796b",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
এখানে:
- name: অ্যাপের পূর্ণ নাম।
- short_name: অ্যাপের ছোট নাম।
- start_url: যখন অ্যাপটি খোলা হবে, তখন এটি কোথায় শুরু হবে।
- display: এটি অ্যাপের ডিসপ্লে স্টাইল নির্ধারণ করবে (এটি
standaloneহলে অ্যাপটি একটি পূর্ণ স্ক্রীন অ্যাপের মতো কাজ করবে)। - background_color এবং theme_color: অ্যাপের ব্যাকগ্রাউন্ড এবং থিম রঙ।
- icons: অ্যাপের জন্য আইকন ইমেজ নির্ধারণ করা।
৩. Manifest File যুক্ত করা
এখন manifest.json ফাইলটি আপনার HTML ফাইলে যুক্ত করুন:
<link rel="manifest" href="/manifest.json">
এটি আপনার ওয়েব অ্যাপের <head> ট্যাগের মধ্যে যুক্ত করুন।
৪. Service Worker তৈরি করা
Service Workers হল স্ক্রিপ্ট যা ব্যাকগ্রাউন্ডে চলে এবং আপনার ওয়েব অ্যাপকে অফলাইন মোডে কাজ করতে সহায়ক করে। PWA তৈরি করতে হলে একটি service worker ফাইল তৈরি করতে হবে।
service-worker.js নামে একটি ফাইল তৈরি করুন:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-app-cache').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js',
'/images/icon-192x192.png',
'/images/icon-512x512.png'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
এখানে:
- install event: যখন service worker প্রথমবার ইনস্টল হয়, এটি কনটেন্ট ক্যাশ করে।
- fetch event: যখন ইউজার কোনও রিসোর্স অনুরোধ করে, এটি ক্যাশ থেকে সেই রিসোর্সটি সরবরাহ করে যদি অফলাইন থাকে।
৫. Service Worker রেজিস্টার করা
এখন service-worker.js ফাইলটি ওয়েব পৃষ্ঠায় রেজিস্টার করতে হবে। এই স্ক্রিপ্টটি আপনার main JavaScript ফাইলে যুক্ত করুন:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}
এখানে:
- navigator.serviceWorker.register: এটি service-worker.js ফাইলটিকে রেজিস্টার করবে এবং ব্রাউজারকে জানাবে যে এটি একটি PWA।
৬. HTTPS সার্ভার ব্যবহার করা
PWA কাজ করতে হলে আপনার ওয়েবসাইটের সিকিউরড কনেকশন (HTTPS) থাকতে হবে। আপনি localhost এ ডেভেলপমেন্টে কাজ করতে পারবেন, কিন্তু প্রোডাকশনে এটি HTTPS সার্ভারে হোস্ট করতে হবে।
উপসংহার
Materialize CSS ব্যবহার করে Progressive Web App (PWA) তৈরি করা সহজ এবং দ্রুত করা যায়। Manifest File এবং Service Worker এর মাধ্যমে আপনি আপনার ওয়েব অ্যাপকে একটি native অ্যাপের মতো ব্যবহারযোগ্য এবং অফলাইন ফিচারযুক্ত করে তুলতে পারবেন। Materialize CSS এর সুবিধা হল, এটি একটি রেসপন্সিভ ডিজাইন প্রদান করে, যা আপনার PWA কে সব ধরনের ডিভাইসে সুন্দরভাবে কাজ করতে সক্ষম করে।
আপনি উপরের ধাপগুলো অনুসরণ করে PWA তৈরি করে তা মোবাইল, ডেস্কটপ এবং ট্যাবলেট ডিভাইসগুলিতে একটি পারফেক্ট ইউজার অভিজ্ঞতা প্রদান করতে পারবেন।
Read more
