प्रगतिशील वेब ऐप (PWA) में फायरबेस का उपयोग करें

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

फायरबेस कई सेवाएँ प्रदान करता है जो कई PWA सर्वोत्तम प्रथाओं को पूरा करने के लिए आपके ऐप में प्रगतिशील सुविधाओं को कुशलतापूर्वक जोड़ने में आपकी मदद कर सकते हैं, जिनमें शामिल हैं:

PWA सर्वोत्तम अभ्यास फायरबेस सेवाएँ कैसे मदद कर सकती हैं
सुरक्षित
  • फायरबेस होस्टिंग आपके कस्टम डोमेन और डिफ़ॉल्ट फायरबेस उपडोमेन के लिए बिना किसी कीमत के एसएसएल प्रमाणपत्र प्रदान करता है।
  • फायरबेस प्रमाणीकरण आपको सभी डिवाइसों में उपयोगकर्ताओं को सुरक्षित रूप से साइन इन करने में सक्षम बनाता है।
  • फायरबेसयूआई प्रमाणीकरण प्रवाह के लिए सर्वोत्तम प्रथाओं को लागू करता है।
तेज़ लोड समय
  • फायरबेस होस्टिंग HTTP/2 का समर्थन करता है और आपकी स्थिर और गतिशील दोनों सामग्री को वैश्विक CDN पर कैश कर सकता है।
  • फायरबेस जावास्क्रिप्ट एसडीके मॉड्यूलर है, और जरूरत पड़ने पर आप लाइब्रेरी को गतिशील रूप से आयात कर सकते हैं।
नेटवर्क लचीलापन
  • क्लाउड फायरस्टोर के साथ, आप वास्तविक समय और ऑफ़लाइन में डेटा संग्रहीत और एक्सेस कर सकते हैं।
  • फायरबेस प्रमाणीकरण उपयोगकर्ता की प्रमाणीकरण स्थिति को ऑफ़लाइन भी बनाए रखता है।
उपयोगकर्ताओं को संलग्न करें
  • फायरबेस क्लाउड मैसेजिंग आपको अपने उपयोगकर्ताओं के उपकरणों पर पुश संदेश भेजने में सक्षम बनाता है।
  • फायरबेस के लिए क्लाउड फ़ंक्शंस के साथ, आप क्लाउड इवेंट के आधार पर री-एंगेजमेंट संदेशों को स्वचालित कर सकते हैं।

यह पृष्ठ इस बात का अवलोकन प्रदान करता है कि कैसे फायरबेस प्लेटफॉर्म हमारे क्रॉस-ब्राउज़र फायरबेस जावास्क्रिप्ट एसडीके का उपयोग करके एक आधुनिक, उच्च-प्रदर्शन पीडब्ल्यूए बनाने में आपकी मदद कर सकता है।

अपने वेब ऐप में फ़ायरबेस जोड़ने के लिए हमारी आरंभिक मार्गदर्शिका पर जाएँ।

सुरक्षित

आपकी साइट की सेवा से लेकर प्रमाणीकरण प्रवाह लागू करने तक, यह महत्वपूर्ण है कि आपका PWA एक सुरक्षित और विश्वसनीय वर्कफ़्लो प्रदान करे।

अपने PWA को HTTPS पर परोसें

निष्पादक होस्टिंग सेवा

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

फायरबेस होस्टिंग , डिफ़ॉल्ट रूप से, आपके ऐप की सामग्री को HTTPS पर परोसता है। आप अपनी सामग्री को निःशुल्क फ़ायरबेस-उपडोमेन या अपने स्वयं के कस्टम डोमेन पर प्रस्तुत कर सकते हैं। हमारी होस्टिंग सेवा आपके कस्टम डोमेन के लिए स्वचालित रूप से और बिना किसी लागत के एक एसएसएल प्रमाणपत्र प्रदान करती है।

आप फायरबेस प्लेटफॉर्म पर अपने पीडब्ल्यूए को कैसे होस्ट कर सकते हैं, यह जानने के लिए फायरबेस होस्टिंग के लिए शुरुआती मार्गदर्शिका पर जाएं।

एक सुरक्षित प्रमाणीकरण प्रवाह प्रदान करें

ड्रॉप-इन प्रतिक्रियाशील प्रमाणीकरण प्रवाह

फायरबेसयूआई फायरबेस प्रमाणीकरण के आधार पर एक ड्रॉप-इन प्रतिक्रियाशील प्रमाणीकरण प्रवाह प्रदान करता है, जो आपके ऐप को कम प्रयास के साथ एक परिष्कृत और सुरक्षित साइन-इन प्रवाह को एकीकृत करने की अनुमति देता है। फायरबेसयूआई स्वचालित रूप से उपयोगकर्ता के उपकरणों के स्क्रीन आकार के अनुकूल हो जाता है और प्रमाणीकरण प्रवाह के लिए सर्वोत्तम प्रथाओं का पालन करता है।

फायरबेसयूआई एकाधिक साइन-इन प्रदाताओं का समर्थन करता है। साइन-इन प्रदाताओं के लिए कॉन्फ़िगर किए गए कोड की कुछ पंक्तियों के साथ अपने ऐप में 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 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 में हमारे दस्तावेज़ पर जाएँ।

तेज़ लोड समय

बेहतरीन प्रदर्शन से उपयोगकर्ता अनुभव में सुधार होता है, उपयोगकर्ताओं को बनाए रखने में मदद मिलती है और रूपांतरण बढ़ता है। शानदार प्रदर्शन, जैसे कम " पहली सार्थक पेंटिंग के लिए समय" और " इंटरैक्टिव के लिए समय ", पीडब्ल्यूए के लिए एक महत्वपूर्ण आवश्यकता है।

अपनी स्थिर संपत्तियों की कुशलतापूर्वक सेवा करें

निष्पादक होस्टिंग सेवा

फायरबेस होस्टिंग आपकी सामग्री को वैश्विक सीडीएन पर परोसता है और HTTP/2 संगत है। जब आप अपनी स्थिर संपत्तियों को फायरबेस के साथ होस्ट करते हैं, तो हम आपके लिए यह सब कॉन्फ़िगर करते हैं - इस सेवा का लाभ उठाने के लिए आपको कुछ भी अतिरिक्त करने की आवश्यकता नहीं है।

अपनी गतिशील सामग्री को कैश करें

फायरबेस होस्टिंग के साथ, आपका वेब ऐप गतिशील सामग्री भी प्रदान कर सकता है जो क्लाउड फ़ंक्शंस या क्लाउड रन कंटेनरीकृत ऐप द्वारा सर्वर-साइड जेनरेट किया जाता है। इस सेवा का उपयोग करके, आप कोड की एक पंक्ति के साथ अपनी गतिशील सामग्री को एक शक्तिशाली वैश्विक सीडीएन पर कैश कर सकते हैं:

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

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

यह जानने के लिए हमारे दस्तावेज़ पर जाएँ कि आप गतिशील सामग्री (क्लाउड फ़ंक्शंस या क्लाउड रन द्वारा संचालित) कैसे परोस सकते हैं और फायरबेस होस्टिंग के साथ सीडीएन-कैशिंग सक्षम कर सकते हैं।

सेवाएँ तभी लोड करें जब उनकी आवश्यकता हो

प्रारंभिक डाउनलोड आकार को न्यूनतम रखने के लिए फायरबेस जावास्क्रिप्ट एसडीके को आंशिक रूप से आयात किया जा सकता है। फायरबेस सेवाओं को आयात करने के लिए इस मॉड्यूलर एसडीके का लाभ उठाएं जिनकी आपके ऐप को केवल तभी आवश्यकता होती है जब उनकी आवश्यकता होती है।

उदाहरण के लिए, आपके ऐप की प्रारंभिक पेंट गति को बढ़ाने के लिए आपका ऐप पहले फायरबेस प्रमाणीकरण लोड कर सकता है। फिर, जब आपके ऐप को उनकी आवश्यकता हो, तो आप क्लाउड फायरस्टोर जैसी अन्य फायरबेस सेवाओं को लोड कर सकते हैं।

वेबपैक जैसे पैकेज मैनेजर का उपयोग करके, आप पहले फायरबेस प्रमाणीकरण लोड कर सकते हैं:

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.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

क्लाउड फायरस्टोर और फायरबेस प्रमाणीकरण के साथ आरंभ करने के लिए हमारे दस्तावेज़ पर जाएँ।

उपयोगकर्ताओं को संलग्न करें

आपके उपयोगकर्ता जानना चाहते हैं कि आप अपने ऐप के लिए नई सुविधाएँ कब जारी करते हैं, और आप उपयोगकर्ता सहभागिता को उच्च रखना चाहते हैं। सक्रिय रूप से और जिम्मेदारी से अपने उपयोगकर्ताओं तक पहुंचने के लिए अपना PWA सेट करें।

अपने उपयोगकर्ताओं को पुश सूचनाएँ प्रदर्शित करें

फायरबेस क्लाउड मैसेजिंग के साथ, आप अपने सर्वर से प्रासंगिक सूचनाओं को अपने उपयोगकर्ताओं के डिवाइस पर भेज सकते हैं। यह सेवा आपको ऐप बंद होने पर भी अपने उपयोगकर्ताओं को समय पर सूचनाएं प्रदर्शित करने की अनुमति देती है।

उपयोगकर्ता पुनः सहभागिता को स्वचालित करें

फायरबेस के लिए क्लाउड फ़ंक्शंस का उपयोग करके, अपने उपयोगकर्ताओं को क्लाउड इवेंट के आधार पर पुनः जुड़ाव संदेश भेजें, उदाहरण के लिए क्लाउड फायरस्टोर को डेटा लिखना या उपयोगकर्ता खाता हटाना । आप किसी उपयोगकर्ता को नया अनुयायी मिलने पर उसे एक पुश सूचना भी भेज सकते हैं:

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