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