प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), वेब ऐप्लिकेशन होते हैं. ये दिशा-निर्देशों के एक सेट का पालन करते हैं. इनका मकसद यह पक्का करना है कि आपके उपयोगकर्ताओं को भरोसेमंद, तेज़, और दिलचस्प अनुभव मिले.
Firebase कई ऐसी सेवाएं उपलब्ध कराता है जिनकी मदद से, अपने ऐप्लिकेशन में प्रोग्रेसिव सुविधाएं आसानी से जोड़ी जा सकती हैं. इससे PWA के कई सबसे सही तरीकों को पूरा किया जा सकता है. जैसे:
| PWA के लिए सबसे सही तरीका | Firebase की सेवाएं कैसे मदद कर सकती हैं |
|---|---|
| सुरक्षित और भरोसेमंद |
|
| तेज़ी से लोड होने वाला समय |
|
| नेटवर्क की विश्वसनीयता |
|
| उपयोगकर्ताओं से जुड़ना |
|
इस पेज पर, इस बारे में खास जानकारी दी गई है कि Firebase प्लैटफ़ॉर्म, हमारे क्रॉस-ब्राउज़र Firebase JavaScript SDK का इस्तेमाल करके, आधुनिक और बेहतर परफ़ॉर्मेंस वाला PWA बनाने में आपकी कैसे मदद कर सकता है.
अपने वेब ऐप्लिकेशन में Firebase जोड़ने के लिए, शुरू करने से जुड़ी गाइड पढ़ें.
पूरी तरह सुरक्षित
आपकी साइट को सेवा देने से लेकर पुष्टि करने का फ़्लो लागू करने तक, यह ज़रूरी है कि आपका PWA एक सुरक्षित और भरोसेमंद वर्कफ़्लो उपलब्ध कराए.
अपने PWA को एचटीटीपीएस पर दिखाएं
एचटीटीपीएस आपकी वेबसाइट की अखंडता के साथ-साथ आपके उपयोगकर्ताओं की निजता और सुरक्षा को बनाए रखता है. PWAs को एचटीटीपीएस पर दिखाया जाना चाहिए.
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 में मौजूद हमारे दस्तावेज़ पर जाएं.
तेज़ी से लोड होने में लगने वाला समय
बेहतरीन परफ़ॉर्मेंस से, उपयोगकर्ता अनुभव बेहतर होता है. साथ ही, इससे उपयोगकर्ताओं को जोड़े रखने और कन्वर्ज़न बढ़ाने में मदद मिलती है. PWAs के लिए, अच्छी परफ़ॉर्मेंस ज़रूरी है. जैसे, "फ़र्स्ट मीनिंगफ़ुल पेंट में लगने वाला समय" और "इंटरैक्टिव में लगने वाला समय" कम होना चाहिए.
अपनी स्टैटिक ऐसेट को असरदार तरीके से दिखाना
Firebase Hosting, आपके कॉन्टेंट को ग्लोबल सीडीएन पर दिखाता है. साथ ही, यह HTTP/2 के साथ काम करता है. Firebase के साथ अपनी स्टैटिक ऐसेट होस्ट करने पर, हम आपके लिए यह सब कॉन्फ़िगर करते हैं. इस सेवा का फ़ायदा पाने के लिए, आपको कुछ भी अतिरिक्त करने की ज़रूरत नहीं है.
डाइनैमिक कॉन्टेंट को कैश करना
Firebase Hosting की मदद से, आपका वेब ऐप्लिकेशन डाइनैमिक कॉन्टेंट भी दिखा सकता है. यह कॉन्टेंट, सर्वर साइड पर Cloud Functions या Cloud Run कंटेनर वाले ऐप्लिकेशन से जनरेट होता है. इस सेवा का इस्तेमाल करके, एक लाइन के कोड की मदद से, अपने डाइनैमिक कॉन्टेंट को दुनिया भर में मौजूद एक पावरफ़ुल सीडीएन पर कैश किया जा सकता है:
res.set('Cache-Control', 'public, max-age=300, s-maxage=600');इस सेवा की मदद से, बैक-एंड को किए जाने वाले अतिरिक्त कॉल से बचा जा सकता है. साथ ही, जवाबों को तेज़ी से प्रोसेस किया जा सकता है और लागत को कम किया जा सकता है.
हमारे दस्तावेज़ पर जाएं. इससे आपको यह पता चलेगा कि Firebase Hosting की मदद से, Cloud Functions या Cloud Run की मदद से तैयार किया गया डाइनैमिक कॉन्टेंट कैसे दिखाया जा सकता है. साथ ही, सीडीएन-कैशिंग को कैसे चालू किया जा सकता है.
सेवाओं को सिर्फ़ तब लोड करें, जब उनकी ज़रूरत हो
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); });