প্রগ্রেসিভ ওয়েব অ্যাপস (PWAs) হল ওয়েব অ্যাপ যা আপনার ব্যবহারকারীদের একটি নির্ভরযোগ্য, দ্রুত এবং আকর্ষক অভিজ্ঞতা নিশ্চিত করার জন্য নির্দেশিকাগুলির একটি সেট অনুসরণ করে।
ফায়ারবেস অনেকগুলি পরিষেবা অফার করে যা আপনাকে অনেকগুলি PWA সেরা অনুশীলনগুলি পূরণ করতে দক্ষতার সাথে আপনার অ্যাপে প্রগতিশীল বৈশিষ্ট্যগুলি যোগ করতে সহায়তা করতে পারে, যার মধ্যে রয়েছে:
| PWA সেরা অনুশীলন | ফায়ারবেস পরিষেবাগুলি কীভাবে সাহায্য করতে পারে৷ |
|---|---|
| নিরাপদ এবং সুরক্ষিত |
|
| দ্রুত লোড সময় |
|
| নেটওয়ার্ক স্থিতিস্থাপকতা |
|
| ব্যবহারকারীদের নিযুক্ত করুন |
|
আমাদের ক্রস-ব্রাউজার Firebase JavaScript SDK ব্যবহার করে একটি আধুনিক, উচ্চ-পারফরম্যান্স PWA তৈরি করতে Firebase প্ল্যাটফর্ম কীভাবে আপনাকে সাহায্য করতে পারে তার একটি সংক্ষিপ্ত বিবরণ এই পৃষ্ঠাটি অফার করে।
আপনার ওয়েব অ্যাপে Firebase যোগ করতে আমাদের শুরু করার নির্দেশিকা দেখুন।
নিরাপদ এবং সুরক্ষিত
আপনার সাইট পরিবেশন করা থেকে শুরু করে একটি প্রমাণীকরণ প্রবাহ বাস্তবায়ন পর্যন্ত, এটি গুরুত্বপূর্ণ যে আপনার PWA একটি নিরাপদ এবং বিশ্বস্ত কর্মপ্রবাহ প্রদান করে।
HTTPS এর মাধ্যমে আপনার PWA পরিবেশন করুন
HTTPS আপনার ওয়েবসাইটের অখণ্ডতা রক্ষা করে এবং আপনার ব্যবহারকারীদের গোপনীয়তা ও নিরাপত্তা রক্ষা করে। পিডব্লিউএ অবশ্যই HTTPS এর মাধ্যমে পরিবেশন করা উচিত।
Firebase হোস্টিং , ডিফল্টরূপে, HTTPS-এর মাধ্যমে আপনার অ্যাপের সামগ্রী পরিবেশন করে। আপনি আপনার সামগ্রী বিনা খরচে Firebase-সাবডোমেনে বা আপনার নিজস্ব কাস্টম ডোমেনে পরিবেশন করতে পারেন। আমাদের হোস্টিং পরিষেবা স্বয়ংক্রিয়ভাবে এবং কোনো খরচ ছাড়াই আপনার কাস্টম ডোমেনের জন্য একটি SSL শংসাপত্রের ব্যবস্থা করে।
আপনি কিভাবে Firebase প্ল্যাটফর্মে আপনার PWA হোস্ট করতে পারেন তা শিখতে Firebase হোস্টিং-এর শুরুর নির্দেশিকা দেখুন।
একটি নিরাপদ প্রমাণীকরণ প্রবাহ অফার
FirebaseUI Firebase প্রমাণীকরণের উপর ভিত্তি করে একটি ড্রপ-ইন প্রতিক্রিয়াশীল প্রমাণীকরণ প্রবাহ প্রদান করে, যা আপনার অ্যাপকে কম প্রচেষ্টায় একটি পরিশীলিত এবং নিরাপদ সাইন-ইন প্রবাহকে সংহত করতে দেয়। 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-এ আমাদের ডকুমেন্টেশন দেখুন।
দ্রুত লোড সময়
দুর্দান্ত পারফরম্যান্স ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, ব্যবহারকারীদের ধরে রাখতে সহায়তা করে এবং রূপান্তর বাড়ায়। দুর্দান্ত পারফরম্যান্স, যেমন কম " প্রথম অর্থপূর্ণ পেইন্টে সময়" এবং " ইন্টারেক্টিভ করার সময় ", PWA-এর জন্য একটি গুরুত্বপূর্ণ প্রয়োজন।
দক্ষতার সাথে আপনার স্ট্যাটিক সম্পদ পরিবেশন করুন
ফায়ারবেস হোস্টিং একটি বিশ্বব্যাপী CDN এর মাধ্যমে আপনার সামগ্রী পরিবেশন করে এবং এটি HTTP/2 সামঞ্জস্যপূর্ণ। আপনি যখন Firebase-এর সাথে আপনার স্ট্যাটিক সম্পদগুলি হোস্ট করেন, তখন আমরা আপনার জন্য এইগুলি কনফিগার করি -- এই পরিষেবাটির সুবিধা নিতে আপনাকে অতিরিক্ত কিছু করতে হবে না৷
আপনার গতিশীল বিষয়বস্তু ক্যাশে
Firebase হোস্টিং এর সাথে, আপনার ওয়েব অ্যাপটি ক্লাউড ফাংশন বা ক্লাউড রান কন্টেইনারাইজড অ্যাপ দ্বারা সার্ভার-সাইড জেনারেট করা গতিশীল সামগ্রীও পরিবেশন করতে পারে। এই পরিষেবাটি ব্যবহার করে, আপনি কোডের একটি লাইন সহ একটি শক্তিশালী বিশ্বব্যাপী CDN-এ আপনার গতিশীল সামগ্রী ক্যাশে করতে পারেন:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
এই পরিষেবাটি আপনাকে আপনার ব্যাক-এন্ডে অতিরিক্ত কল এড়াতে, প্রতিক্রিয়ার গতি বাড়াতে এবং খরচ কমাতে দেয়।
আপনি কীভাবে গতিশীল সামগ্রী (ক্লাউড ফাংশন বা ক্লাউড রান দ্বারা চালিত) পরিবেশন করতে পারেন এবং Firebase হোস্টিংয়ের সাথে CDN-ক্যাশিং সক্ষম করতে পারেন তা জানতে আমাদের ডকুমেন্টেশন দেখুন।
তাদের প্রয়োজন হলেই পরিষেবাগুলি লোড করুন৷
ফায়ারবেস জাভাস্ক্রিপ্ট SDK প্রাথমিক ডাউনলোডের আকার ন্যূনতম রাখতে আংশিকভাবে আমদানি করা যেতে পারে। ফায়ারবেস পরিষেবাগুলি আমদানি করতে এই মডুলার SDK-এর সুবিধা নিন যেগুলি আপনার অ্যাপের প্রয়োজন শুধুমাত্র তখনই।
উদাহরণস্বরূপ, আপনার অ্যাপের প্রাথমিক পেইন্টের গতি বাড়ানোর জন্য আপনার অ্যাপটি প্রথমে Firebase প্রমাণীকরণ লোড করতে পারে। তারপর, যখন আপনার অ্যাপের প্রয়োজন হয়, তখন আপনি ক্লাউড ফায়ারস্টোরের মতো অন্যান্য ফায়ারবেস পরিষেবা লোড করতে পারেন।
একটি প্যাকেজ ম্যানেজার যেমন ওয়েবপ্যাক ব্যবহার করে, আপনি প্রথমে ফায়ারবেস প্রমাণীকরণ লোড করতে পারেন:
import firebase from 'firebase/app'; import 'firebase/auth'; // Load Firebase project configuration. const app = firebase.initializeApp(firebaseConfig);
তারপর, যখন আপনার ডেটা স্তর অ্যাক্সেস করতে হবে, তখন গতিশীল আমদানি ব্যবহার করে ক্লাউড ফায়ারস্টোর লাইব্রেরি লোড করুন:
import('firebase/firestore').then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
নেটওয়ার্ক স্থিতিস্থাপকতা
আপনার ব্যবহারকারীদের নির্ভরযোগ্য ইন্টারনেট অ্যাক্সেস নাও থাকতে পারে। PWA গুলি নেটিভ মোবাইল অ্যাপের মতো আচরণ করা উচিত এবং যখনই সম্ভব অফলাইনে কাজ করা উচিত৷
অফলাইনে আপনার অ্যাপ ডেটা অ্যাক্সেস করুন
ক্লাউড ফায়ারস্টোর অফলাইন ডেটা স্থিরতা সমর্থন করে যা আপনার অ্যাপের ডেটা স্তরকে অফলাইনে স্বচ্ছভাবে কাজ করতে সক্ষম করে। আপনার স্ট্যাটিক সম্পদ ক্যাশ করতে পরিষেবা কর্মীদের সাথে মিলিত, আপনার PWA সম্পূর্ণরূপে অফলাইনে কাজ করতে পারে। আপনি কোডের একটি লাইন দিয়ে অফলাইন ডেটা স্থিরতা সক্ষম করতে পারেন:
firebase.firestore().enablePersistence().then(() => {
const firestore = app.firestore();
// Use Cloud Firestore ...
});
অফলাইনে অনুমোদনের অবস্থা বজায় রাখুন
Firebase প্রমাণীকরণ সাইন-ইন ডেটার একটি স্থানীয় ক্যাশে রাখে, যা পূর্বে সাইন-ইন করা ব্যবহারকারীকে অফলাইনে থাকা অবস্থায়ও প্রমাণীকরণ করতে দেয়। সাইন-ইন স্টেট পর্যবেক্ষক স্বাভাবিকভাবে কাজ করবে এবং অফলাইনে থাকা অবস্থায় আপনার ব্যবহারকারী অ্যাপ রিলোড করলেও ট্রিগার করবে:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// User is signed-in ...
} else {
// User is signed out ...
}
});
Cloud Firestore এবং Firebase প্রমাণীকরণের সাথে শুরু করতে আমাদের ডকুমেন্টেশন দেখুন।
ব্যবহারকারীদের নিযুক্ত করুন
আপনি কখন আপনার অ্যাপের জন্য নতুন বৈশিষ্ট্য প্রকাশ করেন তা আপনার ব্যবহারকারীরা জানতে চান এবং আপনি ব্যবহারকারীর ব্যস্ততা উচ্চ রাখতে চান। সক্রিয়ভাবে এবং দায়িত্বশীলভাবে আপনার ব্যবহারকারীদের কাছে পৌঁছানোর জন্য আপনার PWA সেট আপ করুন।
আপনার ব্যবহারকারীদের পুশ বিজ্ঞপ্তি প্রদর্শন করুন
Firebase ক্লাউড মেসেজিং এর মাধ্যমে, আপনি আপনার সার্ভার থেকে আপনার ব্যবহারকারীদের ডিভাইসে প্রাসঙ্গিক বিজ্ঞপ্তিগুলি পুশ করতে পারেন৷ এই পরিষেবাটি আপনাকে অ্যাপটি বন্ধ থাকা অবস্থায়ও আপনার ব্যবহারকারীদের সময়মত বিজ্ঞপ্তিগুলি প্রদর্শন করতে দেয়৷
স্বয়ংক্রিয়ভাবে ব্যবহারকারীর পুনঃনিযুক্তি
Firebase-এর জন্য ক্লাউড ফাংশন ব্যবহার করে, ক্লাউড ইভেন্টের উপর ভিত্তি করে আপনার ব্যবহারকারীদের পুনঃনিযুক্তি বার্তা পাঠান, উদাহরণস্বরূপ ক্লাউড ফায়ারস্টোরে ডেটা লেখা বা ব্যবহারকারীর অ্যাকাউন্ট মুছে ফেলা । আপনি একজন ব্যবহারকারীকে একটি পুশ বিজ্ঞপ্তি পাঠাতে পারেন যখন সেই ব্যবহারকারী একটি নতুন অনুসরণকারী পায় :
// 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);
});