प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) में Firebase का इस्तेमाल करना

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), वेब ऐप्लिकेशन होते हैं जो दिशा-निर्देशों के एक सेट का पालन करते हैं. इनका मकसद यह पक्का करना होता है कि आपके उपयोगकर्ताओं को भरोसेमंद, तेज़, और दिलचस्प अनुभव मिले.

Firebase कई सेवाएं उपलब्ध कराता है. इनकी मदद से, अपने ऐप्लिकेशन में प्रोग्रेसिव ऐप्लिकेशन की कई सुविधाएं जोड़ी जा सकती हैं. इससे, PWA के कई सबसे सही तरीकों का पालन किया जा सकता है. इनमें ये शामिल हैं:

पीडब्ल्यूए के लिए सबसे सही तरीका Firebase की सेवाएं कैसे मदद कर सकती हैं
पूरी तरह सुरक्षित
  • Firebase Hosting आपके कस्टम डोमेन और डिफ़ॉल्ट Firebase सबडोमेन के लिए, बिना किसी शुल्क के एसएसएल सर्टिफ़िकेट उपलब्ध कराता है.
  • Firebase Authentication की मदद से, उपयोगकर्ताओं को सभी डिवाइसों पर सुरक्षित तरीके से साइन इन कराया जा सकता है.
  • FirebaseUI, पुष्टि करने के तरीकों के लिए सबसे सही तरीके लागू करता है.
कॉन्टेंट लोड होने में कम समय लगना
  • Firebase Hosting, एचटीटीपी/2 के साथ काम करता है. साथ ही, यह ग्लोबल सीडीएन पर आपके स्टैटिक और डाइनैमिक, दोनों तरह के कॉन्टेंट को कैश मेमोरी में सेव कर सकता है.
  • Firebase JavaScript SDK टूल मॉड्यूलर है. साथ ही, ज़रूरत पड़ने पर, लाइब्रेरी को डाइनैमिक तौर पर इंपोर्ट किया जा सकता है.
नेटवर्क के साथ काम करने की क्षमता
  • Cloud Firestore की मदद से, रीयल टाइम और ऑफ़लाइन में डेटा को सेव और ऐक्सेस किया जा सकता है.
  • Firebase Authentication, उपयोगकर्ता की पुष्टि की स्थिति को बनाए रखता है. भले ही, वह ऑफ़लाइन हो.
उपयोगकर्ताओं से जुड़ना
  • Firebase Cloud Messaging की मदद से, अपने उपयोगकर्ताओं के डिवाइसों पर पुश मैसेज भेजे जा सकते हैं.
  • Cloud Functions for Firebase की मदद से, क्लाउड इवेंट के आधार पर, उपयोगकर्ताओं को फिर से जोड़ने वाले मैसेज अपने-आप भेजे जा सकते हैं.

इस पेज पर, इस बारे में खास जानकारी दी गई है कि Firebase प्लैटफ़ॉर्म, क्रॉस-ब्राउज़र Firebase JavaScript SDK टूल का इस्तेमाल करके, बेहतर परफ़ॉर्मेंस वाला आधुनिक PWA बनाने में आपकी मदद कैसे कर सकता है.

अपने वेब ऐप्लिकेशन में Firebase जोड़ने के लिए, शुरू करने से जुड़ी गाइड पर जाएं.

पूरी तरह सुरक्षित

आपकी साइट को दिखाने से लेकर पुष्टि करने के फ़्लो को लागू करने तक, यह ज़रूरी है कि आपका PWA सुरक्षित और भरोसेमंद वर्कफ़्लो उपलब्ध कराए.

अपने PWA को एचटीटीपीएस पर दिखाना

बेहतर परफ़ॉर्मेंस वाली होस्टिंग सेवा

एचटीटीपीएस आपकी वेबसाइट की अखंडता के साथ-साथ आपके उपयोगकर्ताओं की निजता और सुरक्षा को बनाए रखता है. PWA को एचटीटीपीएस पर दिखाया जाना चाहिए.

Firebase Hosting, डिफ़ॉल्ट रूप से, आपके ऐप्लिकेशन का कॉन्टेंट एचटीटीपीएस पर दिखाता है. अपना कॉन्टेंट, बिना किसी शुल्क के Firebase सबडोमेन या अपने कस्टम डोमेन पर दिखाया जा सकता है. हमारी होस्टिंग सेवा, आपके कस्टम डोमेन के लिए एसएसएल सर्टिफ़िकेट अपने-आप और बिना किसी शुल्क के उपलब्ध कराती है.

Firebase प्लैटफ़ॉर्म पर अपने 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, आपके कॉन्टेंट को ग्लोबल सीडीएन पर दिखाता है. साथ ही, यह HTTP/2 के साथ काम करता है. Firebase की मदद से स्टैटिक एसेट होस्ट करने पर, हम यह सब आपके लिए कॉन्फ़िगर करते हैं. इस सेवा का फ़ायदा पाने के लिए, आपको कुछ और करने की ज़रूरत नहीं है.

अपने डाइनैमिक कॉन्टेंट को कैश मेमोरी में सेव करना

Firebase Hosting की मदद से, आपका वेब ऐप्लिकेशन डाइनैमिक कॉन्टेंट भी दिखा सकता है. यह कॉन्टेंट, Cloud Functions या Cloud Run कंटेनर वाले ऐप्लिकेशन से सर्वर साइड पर जनरेट होता है. इस सेवा का इस्तेमाल करके, एक लाइन कोड की मदद से अपने डाइनैमिक कॉन्टेंट को किसी बेहतरीन ग्लोबल सीडीएन पर कैश मेमोरी में सेव किया जा सकता है:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

इस सेवा की मदद से, अपने बैक-एंड को अतिरिक्त कॉल से बचाया जा सकता है. साथ ही, अनुरोधों के जवाब देने में लगने वाले समय को कम किया जा सकता है और लागत को कम किया जा सकता है.

Cloud Functions या Cloud Run की मदद से, डाइनैमिक कॉन्टेंट दिखाने और Firebase Hosting की मदद से सीडीएन-कैश मेमोरी चालू करने का तरीका जानने के लिए, हमारे दस्तावेज़ पर जाएं.

सेवाओं को सिर्फ़ तब लोड करें, जब उनकी ज़रूरत हो

Firebase JavaScript SDK टूल को कुछ हद तक इंपोर्ट किया जा सकता है, ताकि डाउनलोड किए जाने वाले ऐप्लिकेशन का साइज़ कम से कम रहे. इस मॉड्यूलर SDK टूल का फ़ायदा लें, ताकि आपके ऐप्लिकेशन को सिर्फ़ ज़रूरत पड़ने पर Firebase की सेवाएं इंपोर्ट की जा सकें.

उदाहरण के लिए, अपने ऐप्लिकेशन की शुरुआती पेंट स्पीड बढ़ाने के लिए, आपका ऐप्लिकेशन पहले Firebase Authentication लोड कर सकता है. इसके बाद, जब आपके ऐप्लिकेशन को Cloud Firestore जैसी Firebase की अन्य सेवाओं की ज़रूरत पड़ेगी, तब उन्हें लोड किया जा सकता है.

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);
    });