একটি প্রগতিশীল ওয়েব অ্যাপে (PWA) Firebase ব্যবহার করুন

প্রোগ্রেসিভ ওয়েব অ্যাপস (PWAs) হল এমন ওয়েব অ্যাপ যা আপনার ব্যবহারকারীদের একটি নির্ভরযোগ্য, দ্রুত এবং আকর্ষণীয় অভিজ্ঞতা নিশ্চিত করার জন্য তৈরি নির্দেশিকাগুলির একটি সেট অনুসরণ করে।

ফায়ারবেস বেশ কিছু পরিষেবা প্রদান করে যা আপনাকে আপনার অ্যাপে প্রগতিশীল বৈশিষ্ট্যগুলি দক্ষতার সাথে যোগ করতে সাহায্য করতে পারে যাতে অনেক PWA সেরা অনুশীলনগুলি পূরণ করা যায়, যার মধ্যে রয়েছে:

এই পৃষ্ঠাটি আমাদের ক্রস-ব্রাউজার Firebase JavaScript SDK ব্যবহার করে একটি আধুনিক, উচ্চ-কার্যক্ষমতাসম্পন্ন PWA তৈরিতে Firebase প্ল্যাটফর্ম কীভাবে আপনাকে সাহায্য করতে পারে তার একটি সারসংক্ষেপ প্রদান করে।

আপনার ওয়েব অ্যাপে Firebase যোগ করতে আমাদের শুরু করার নির্দেশিকাটি দেখুন।

নিরাপদ এবং সুরক্ষিত

আপনার সাইট পরিবেশন করা থেকে শুরু করে একটি প্রমাণীকরণ প্রবাহ বাস্তবায়ন করা পর্যন্ত, আপনার PWA একটি নিরাপদ এবং বিশ্বস্ত কর্মপ্রবাহ প্রদান করা অত্যন্ত গুরুত্বপূর্ণ।

HTTPS এর মাধ্যমে আপনার PWA পরিষেবা প্রদান করুন

HTTPS আপনার ওয়েবসাইটের অখণ্ডতা রক্ষা করে এবং আপনার ব্যবহারকারীদের গোপনীয়তা এবং সুরক্ষা রক্ষা করে। PWA গুলি HTTPS এর মাধ্যমে পরিবেশিত হতে হবে।

Firebase Hosting , ডিফল্টরূপে, HTTPS এর মাধ্যমে আপনার অ্যাপের কন্টেন্ট পরিবেশন করে। আপনি আপনার কন্টেন্ট বিনামূল্যে Firebase-সাবডোমেইন অথবা আপনার নিজস্ব কাস্টম ডোমেইন ব্যবহার করে পরিবেশন করতে পারেন। আমাদের হোস্টিং পরিষেবা আপনার কাস্টম ডোমেইনটির জন্য স্বয়ংক্রিয়ভাবে এবং বিনামূল্যে একটি 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-এ আমাদের ডকুমেন্টেশন দেখুন।

দ্রুত লোড সময়

দুর্দান্ত পারফরম্যান্স থাকা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে, ব্যবহারকারীদের ধরে রাখতে সাহায্য করে এবং রূপান্তর বৃদ্ধি করে। দুর্দান্ত পারফরম্যান্স, যেমন " প্রথমে অর্থপূর্ণ রঙ করার সময় কম" এবং " ইন্টারেক্টিভ করার সময় ", PWA-এর জন্য একটি গুরুত্বপূর্ণ প্রয়োজনীয়তা।

আপনার স্ট্যাটিক সম্পদ দক্ষতার সাথে পরিবেশন করুন

Firebase Hosting আপনার কন্টেন্টকে একটি গ্লোবাল CDN এর মাধ্যমে পরিবেশন করে এবং 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 মাধ্যমে CDN-ক্যাশিং সক্ষম করতে পারেন তা জানতে আমাদের ডকুমেন্টেশন দেখুন।

শুধুমাত্র যখন প্রয়োজন হবে তখনই পরিষেবা লোড করুন

প্রাথমিক ডাউনলোডের আকার ন্যূনতম রাখার জন্য Firebase JavaScript SDK আংশিকভাবে আমদানি করা যেতে পারে। আপনার অ্যাপের প্রয়োজনীয় Firebase পরিষেবাগুলি আমদানি করতে এই মডুলার SDK ব্যবহার করুন, শুধুমাত্র যখন প্রয়োজন হবে।

উদাহরণস্বরূপ, আপনার অ্যাপের প্রাথমিক পেইন্ট স্পিড বাড়ানোর জন্য আপনার অ্যাপ প্রথমে Firebase Authentication লোড করতে পারে। তারপর, যখন আপনার অ্যাপের প্রয়োজন হবে, তখন আপনি অন্যান্য Firebase পরিষেবা লোড করতে পারেন, যেমন Cloud Firestore ।

ওয়েবপ্যাকের মতো প্যাকেজ ম্যানেজার ব্যবহার করে, আপনি প্রথমে Firebase Authentication লোড করতে পারেন:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

তারপর, যখন আপনার ডেটা লেয়ার অ্যাক্সেস করার প্রয়োজন হবে, তখন dynamic imports ব্যবহার করে 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);
    });