प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) ऐसे वेब ऐप्लिकेशन होते हैं जो कुछ दिशा-निर्देशों के मुताबिक बनाए जाते हैं. इन दिशा-निर्देशों का मकसद यह पक्का करना होता है कि आपके उपयोगकर्ताओं को भरोसेमंद, तेज़, और दिलचस्प अनुभव मिले.
Firebase कई ऐसी सेवाएं उपलब्ध कराता है जिनकी मदद से, आपके ऐप्लिकेशन में प्रोग्रेसिव सुविधाएं आसानी से जोड़ी जा सकती हैं. इससे, PWA के सबसे सही तरीकों को पूरा किया जा सकता है. इनमें ये शामिल हैं:
| PWA का सबसे सही तरीका | Firebase की सेवाएं कैसे मदद कर सकती हैं |
|---|---|
| पूरी तरह सुरक्षित |
|
| वेबसाइट का तेज़ी से लोड होना |
|
| नेटवर्क की क्वालिटी |
|
| लोगों को अपने कॉन्टेंट पर बनाए रखना |
|
इस पेज पर, यह जानकारी दी गई है कि Firebase प्लैटफ़ॉर्म, आधुनिक और बेहतर परफ़ॉर्मेंस वाला PWA बनाने में आपकी मदद कैसे कर सकता है. इसके लिए, हमारे क्रॉस-ब्राउज़र Firebase JavaScript SDK का इस्तेमाल किया जा सकता है.
अपने वेब ऐप्लिकेशन में Firebase जोड़ने के लिए, शुरू करने के लिए गाइड पर जाएं.
पूरी तरह सुरक्षित
अपनी साइट को दिखाने से लेकर, पुष्टि करने के फ़्लो को लागू करने तक, यह ज़रूरी है कि आपका PWA, सुरक्षित और भरोसेमंद वर्कफ़्लो उपलब्ध कराए.
अपने PWA को एचटीटीपीएस पर दिखाएं
एचटीटीपीएस आपकी वेबसाइट की अखंडता के साथ-साथ आपके उपयोगकर्ताओं की निजता और सुरक्षा को बनाए रखता है. PWA को एचटीटीपीएस पर दिखाना ज़रूरी है.
Firebase Hosting, डिफ़ॉल्ट रूप से, आपके ऐप्लिकेशन के कॉन्टेंट को एचटीटीपीएस पर दिखाता है. आपके पास, बिना किसी शुल्क के Firebase-सबडोमेन या अपने कस्टम डोमेन पर कॉन्टेंट दिखाने का विकल्प होता है. हमारी होस्टिंग सेवा, आपके कस्टम डोमेन के लिए एसएसएल सर्टिफ़िकेट अपने-आप और बिना किसी शुल्क के उपलब्ध कराती है.
Firebase प्लैटफ़ॉर्म पर अपने PWA को होस्ट करने का तरीका जानने के लिए, शुरू करने के लिए गाइड पर जाएंFirebase Hosting.
पुष्टि करने का सुरक्षित फ़्लो उपलब्ध कराएं
FirebaseUI, Firebase Authentication पर आधारित, ड्रॉप-इन रिस्पॉन्सिव पुष्टि करने का फ़्लो उपलब्ध कराता है. इससे, आपके ऐप्लिकेशन में कम मेहनत में, पुष्टि करने का बेहतर और सुरक्षित फ़्लो इंटिग्रेट किया जा सकता है. FirebaseUI उपयोगकर्ता के डिवाइसों की स्क्रीन साइज़ के हिसाब से अपने-आप अडजस्ट हो जाता है और यह पुष्टि करने के फ़्लो के लिए सबसे सही तरीकों का पालन करता है.
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);
GitHub पर हमारे दस्तावेज़ देखें ताकि आप अलग-अलग कॉन्फ़िगरेशन विकल्पों के बारे में ज़्यादा जान सकें जो FirebaseUI उपलब्ध कराता है.
उपयोगकर्ताओं को अलग-अलग डिवाइसों पर साइन इन करने की अनुमति देना
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 };
GitHub पर हमारे दस्तावेज़ देखें ताकि आप अलग-अलग कॉन्फ़िगरेशन विकल्पों के बारे में ज़्यादा जान सकें जो FirebaseUI उपलब्ध कराता है.
वेबसाइट का तेज़ी से लोड होना
बेहतर परफ़ॉर्मेंस से उपयोगकर्ता अनुभव बेहतर होता है, उपयोगकर्ताओं को बनाए रखने में मदद मिलती है, और कन्वर्ज़न बढ़ता है. बेहतर परफ़ॉर्मेंस, जैसे कि " फ़र्स्ट मीनिंगफ़ुल पेंट" और "टाइम टू इंटरैक्टिव", PWA के लिए एक ज़रूरी शर्त है.
अपनी स्टैटिक ऐसेट को बेहतर तरीके से दिखाएं
Firebase Hosting आपके कॉन्टेंट को ग्लोबल सीडीएन पर दिखाता है. साथ ही, यह एचटीटीपी/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 को आंशिक तौर पर इंपोर्ट किया जा सकता है , ताकि शुरुआती डाउनलोड का साइज़ कम से कम रहे. इस मॉड्यूलर एसडीके का फ़ायदा लें, ताकि Firebase की उन सेवाओं को इंपोर्ट किया जा सके जिनकी आपके ऐप्लिकेशन को सिर्फ़ तब ज़रूरत हो, जब उनकी ज़रूरत हो.
उदाहरण के लिए, अपने ऐप्लिकेशन की शुरुआती पेंट स्पीड बढ़ाने के लिए, आपका ऐप्लिकेशन सबसे पहले Firebase Authentication लोड कर सकता है. इसके बाद, जब आपके ऐप्लिकेशन को इनकी ज़रूरत हो, तब Firebase की अन्य सेवाओं को लोड किया जा सकता है. जैसे, 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); });