প্রোগ্রেসিভ ওয়েব অ্যাপস (পিডব্লিউএ) হলো এমন ওয়েব অ্যাপ যা কিছু নির্দিষ্ট নির্দেশিকা অনুসরণ করে, যার উদ্দেশ্য হলো আপনার ব্যবহারকারীদের একটি নির্ভরযোগ্য, দ্রুত এবং আকর্ষণীয় অভিজ্ঞতা নিশ্চিত করা।
ফায়ারবেস বেশ কিছু পরিষেবা প্রদান করে যা আপনাকে আপনার অ্যাপে দক্ষতার সাথে আধুনিক ফিচার যোগ করতে এবং PWA-এর অনেক সেরা অনুশীলন মেনে চলতে সাহায্য করতে পারে, যার মধ্যে রয়েছে:
| PWA সর্বোত্তম অনুশীলন | ফায়ারবেস পরিষেবাগুলি কীভাবে সাহায্য করতে পারে |
|---|---|
| নিরাপদ ও সুরক্ষিত |
|
| দ্রুত লোড হওয়ার সময় |
|
| নেটওয়ার্ক স্থিতিস্থাপকতা |
|
| ব্যবহারকারীদের সম্পৃক্ত করুন |
|
এই পৃষ্ঠায় একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে যে, কীভাবে আমাদের ক্রস-ব্রাউজার Firebase JavaScript এসডিকে ব্যবহার করে ফায়ারবেস প্ল্যাটফর্ম আপনাকে একটি আধুনিক ও উচ্চ-কর্মক্ষমতাসম্পন্ন পিডব্লিউএ (PWA) তৈরি করতে সাহায্য করতে পারে।
আপনার ওয়েব অ্যাপে Firebase যোগ করতে আমাদের গেটিং স্টার্টেড গাইডটি দেখুন।
নিরাপদ ও সুরক্ষিত
আপনার সাইট পরিবেশন করা থেকে শুরু করে প্রমাণীকরণ প্রক্রিয়া বাস্তবায়ন পর্যন্ত, আপনার PWA-এর জন্য একটি নিরাপদ ও বিশ্বস্ত কর্মপ্রবাহ নিশ্চিত করা অত্যন্ত গুরুত্বপূর্ণ।
আপনার PWA HTTPS এর মাধ্যমে পরিবেশন করুন
HTTPS আপনার ওয়েবসাইটের অখণ্ডতা এবং ব্যবহারকারীদের গোপনীয়তা ও নিরাপত্তা রক্ষা করে। PWA অবশ্যই HTTPS-এর মাধ্যমে পরিবেশন করতে হবে।
Firebase Hosting ডিফল্টরূপে আপনার অ্যাপের কন্টেন্ট HTTPS-এর মাধ্যমে পরিবেশন করে। আপনি আপনার কন্টেন্ট একটি বিনামূল্যের ফায়ারবেস-সাবডোমেইনে অথবা আপনার নিজস্ব কাস্টম ডোমেইনে পরিবেশন করতে পারেন। আমাদের হোস্টিং পরিষেবা আপনার কাস্টম ডোমেইনের জন্য স্বয়ংক্রিয়ভাবে এবং বিনামূল্যে একটি SSL সার্টিফিকেট প্রদান করে।
ফায়ারবেস প্ল্যাটফর্মে কীভাবে আপনার PWA হোস্ট করতে পারেন, তা জানতে Firebase Hosting এর গেটিং স্টার্টেড গাইডটি দেখুন।
একটি নিরাপদ প্রমাণীকরণ প্রবাহ প্রদান করুন
FirebaseUI Firebase Authentication উপর ভিত্তি করে একটি ড্রপ-ইন রেসপন্সিভ অথেন্টিকেশন ফ্লো প্রদান করে, যা আপনার অ্যাপকে স্বল্প পরিশ্রমে একটি অত্যাধুনিক ও সুরক্ষিত সাইন-ইন ফ্লো সংহত করার সুযোগ দেয়। FirebaseUI স্বয়ংক্রিয়ভাবে ব্যবহারকারীর ডিভাইসের স্ক্রিনের আকারের সাথে খাপ খাইয়ে নেয় এবং অথেন্টিকেশন ফ্লো-এর জন্য সর্বোত্তম অনুশীলনগুলো অনুসরণ করে।
FirebaseUI একাধিক সাইন-ইন প্রোভাইডার সমর্থন করে। সাইন-ইন প্রোভাইডারদের জন্য কনফিগার করা মাত্র কয়েকটি কোডের লাইনের মাধ্যমে আপনার অ্যাপে FirebaseUI অথেন্টিকেশন ফ্লো যোগ করুন:
// FirebaseUI config. var uiConfig = { signInSuccessUrl: 'URL', // the URL to direct to upon success signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.EmailAuthProvider.PROVIDER_ID ] }; // Initialize the FirebaseUI widget using Firebase. var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig);
FirebaseUI এর বিভিন্ন কনফিগারেশন অপশন সম্পর্কে আরও জানতে আমাদের GitHub ডকুমেন্টেশন দেখুন।
বিভিন্ন ডিভাইসে ব্যবহারকারীদের সাইন ইন করুন
FirebaseUI ব্যবহার করে ওয়ান-ট্যাপ সাইন-ইন ইন্টিগ্রেট করার মাধ্যমে, আপনার অ্যাপ ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে সাইন-ইন করাতে পারে, এমনকি তাদের সাইন-ইন ক্রেডেনশিয়াল দিয়ে সেট আপ করা বিভিন্ন ডিভাইসেও।
কনফিগারেশনের একটি লাইন পরিবর্তন করে FirebaseUI ব্যবহার করে এক-ট্যাপ সাইন-ইন চালু করুন:
// FirebaseUI config. var uiConfig = { signInSuccessUrl: 'URL', // the URL to direct to upon success authMethod: 'https://accounts.google.com', signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID, // Enable one-tap sign-in. credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO };
FirebaseUI এর বিভিন্ন কনফিগারেশন অপশন সম্পর্কে আরও জানতে আমাদের GitHub ডকুমেন্টেশন দেখুন।
দ্রুত লোড হওয়ার সময়
চমৎকার পারফরম্যান্স ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, ব্যবহারকারীদের ধরে রাখতে সাহায্য করে এবং কনভার্সন বাড়ায়। পিডব্লিউএ-এর জন্য চমৎকার পারফরম্যান্স, যেমন কম "টাইম টু ফার্স্ট মিনিংফুল পেইন্ট " এবং " টাইম টু ইন্টারঅ্যাক্টিভ ", একটি গুরুত্বপূর্ণ পূর্বশর্ত।
আপনার স্থির সম্পদগুলি দক্ষতার সাথে পরিবেশন করুন।
Firebase Hosting একটি গ্লোবাল সিডিএন-এর মাধ্যমে আপনার কন্টেন্ট পরিবেশন করে এবং এটি HTTP/2 কম্প্যাটিবল। আপনি যখন ফায়ারবেসে আপনার স্ট্যাটিক অ্যাসেট হোস্ট করেন, তখন আমরা আপনার জন্য এই সবকিছু কনফিগার করে দিই — এই পরিষেবাটির সুবিধা নিতে আপনাকে অতিরিক্ত কিছুই করতে হবে না।
আপনার ডাইনামিক কন্টেন্ট ক্যাশ করুন
Firebase Hosting এর মাধ্যমে, আপনার ওয়েব অ্যাপ Cloud Functions অথবা Cloud Run কন্টেইনারাইজড অ্যাপ দ্বারা সার্ভার-সাইডে তৈরি ডাইনামিক কন্টেন্টও পরিবেশন করতে পারে। এই পরিষেবাটি ব্যবহার করে, আপনি মাত্র এক লাইনের কোডের মাধ্যমে একটি শক্তিশালী গ্লোবাল CDN-এ আপনার ডাইনামিক কন্টেন্ট ক্যাশ করতে পারেন:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');এই পরিষেবাটি আপনাকে আপনার ব্যাক-এন্ডে অতিরিক্ত কল এড়াতে, প্রতিক্রিয়ার গতি বাড়াতে এবং খরচ কমাতে সাহায্য করে।
কীভাবে আপনি Cloud Functions বা Cloud Run দ্বারা চালিত ডাইনামিক কন্টেন্ট পরিবেশন করতে পারেন এবং Firebase Hosting মাধ্যমে সিডিএন-ক্যাশিং সক্রিয় করতে পারেন, তা জানতে আমাদের ডকুমেন্টেশন দেখুন।
শুধুমাত্র প্রয়োজনের সময়ই পরিষেবাগুলো লোড করুন।
প্রাথমিক ডাউনলোডের আকার ন্যূনতম রাখতে Firebase JavaScript এসডিকে আংশিকভাবে ইম্পোর্ট করা যেতে পারে। এই মডিউলার এসডিকে-র সুবিধা নিয়ে আপনার অ্যাপের প্রয়োজনীয় ফায়ারবেস সার্ভিসগুলো শুধুমাত্র প্রয়োজনের সময়ই ইম্পোর্ট করুন।
উদাহরণস্বরূপ, আপনার অ্যাপের প্রাথমিক পেইন্ট স্পিড বাড়ানোর জন্য, আপনার অ্যাপ প্রথমে Firebase Authentication লোড করতে পারে। তারপর, যখন আপনার অ্যাপের প্রয়োজন হবে, তখন আপনি Cloud Firestore মতো অন্যান্য ফায়ারবেস পরিষেবাগুলো লোড করতে পারেন।
webpack-এর মতো একটি প্যাকেজ ম্যানেজার ব্যবহার করে, আপনি প্রথমে Firebase Authentication লোড করতে পারেন:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
তারপর, যখন আপনার ডেটা লেয়ার অ্যাক্সেস করার প্রয়োজন হবে, তখন ডায়নামিক ইম্পোর্ট ব্যবহার করে Cloud Firestore লাইব্রেরিটি লোড করুন:
import('firebase/firestore').then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
নেটওয়ার্ক স্থিতিস্থাপকতা
আপনার ব্যবহারকারীদের নির্ভরযোগ্য ইন্টারনেট সংযোগ নাও থাকতে পারে। PWA-গুলোর আচরণ নেটিভ মোবাইল অ্যাপের মতোই হওয়া উচিত এবং সম্ভব হলে অফলাইনেও কাজ করা উচিত।
আপনার অ্যাপের ডেটা অফলাইনে অ্যাক্সেস করুন
Cloud Firestore অফলাইন ডেটা পার্সিস্টেন্স সমর্থন করে, যা আপনার অ্যাপের ডেটা লেয়ারকে স্বচ্ছভাবে অফলাইনে কাজ করতে সক্ষম করে। আপনার স্ট্যাটিক অ্যাসেটগুলো ক্যাশ করার জন্য সার্ভিস ওয়ার্কারের সাথে মিলিত হয়ে, আপনার PWA অফলাইনে সম্পূর্ণরূপে কাজ করতে পারে। আপনি এক লাইনের কোড দিয়েই অফলাইন ডেটা পার্সিস্টেন্স চালু করতে পারেন:
firebase.firestore().enablePersistence().then(() => { const firestore = app.firestore(); // Use Cloud Firestore ... });
প্রমাণীকরণ অবস্থা অফলাইনে বজায় রাখুন
Firebase Authentication সাইন-ইন ডেটার একটি লোকাল ক্যাশে রাখে, যার ফলে পূর্বে সাইন-ইন করা ব্যবহারকারী অফলাইনে থাকলেও অথেনটিকেটেড থাকতে পারেন। আপনার ব্যবহারকারী অফলাইনে থাকাকালীন অ্যাপটি রিলোড করলেও সাইন-ইন স্টেট অবজারভারটি স্বাভাবিকভাবে কাজ করবে এবং ট্রিগার হবে।
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});Cloud Firestore এবং Firebase Authentication শুরু করতে আমাদের ডকুমেন্টেশন দেখুন।
ব্যবহারকারীদের সম্পৃক্ত করুন
আপনার অ্যাপে নতুন ফিচার এলে ব্যবহারকারীরা তা জানতে চান এবং আপনিও ব্যবহারকারীদের সম্পৃক্ততা ধরে রাখতে চান। সক্রিয়ভাবে ও দায়িত্বের সাথে আপনার ব্যবহারকারীদের কাছে পৌঁছানোর জন্য আপনার PWA সেট আপ করুন।
আপনার ব্যবহারকারীদের পুশ নোটিফিকেশন প্রদর্শন করুন
Firebase Cloud Messaging এর মাধ্যমে, আপনি আপনার সার্ভার থেকে ব্যবহারকারীদের ডিভাইসে প্রাসঙ্গিক নোটিফিকেশন পাঠাতে পারেন। এই পরিষেবাটি আপনাকে অ্যাপ বন্ধ থাকা অবস্থাতেও ব্যবহারকারীদের সময়মতো নোটিফিকেশন দেখানোর সুযোগ দেয়।
ব্যবহারকারীদের পুনরায় যুক্ত করার প্রক্রিয়া স্বয়ংক্রিয় করুন
Cloud Functions for Firebase ব্যবহার করে, ক্লাউড ইভেন্টের উপর ভিত্তি করে আপনার ব্যবহারকারীদের পুনরায় যুক্ত হওয়ার বার্তা পাঠান, যেমন Cloud Firestore এ ডেটা লেখা বা ব্যবহারকারীর অ্যাকাউন্ট মুছে ফেলা । এছাড়াও, যখন কোনো ব্যবহারকারী নতুন ফলোয়ার পায়, তখন আপনি তাকে একটি পুশ নোটিফিকেশন পাঠাতে পারেন।
// Send push notification when user gets a new follower. exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}') .onWrite((change, context) => { const userUID = context.params.userUID; const followerUID = context.params.followerUID; const tokens = getUserDeviceTokens(userUID); const name = getUserDisplayName(followerUID); // Notification details. const payload = { notification: { title: 'You have a new follower!', body: `${name} is now following you.` } }; return admin.messaging().sendToDevice(tokens, payload); });