गूगल काले समुदायों के लिए जातीय इक्विटी को आगे बढ़ाने के लिए प्रतिबद्ध है। देखो कैसे।
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

प्रगतिशील वेब Apps में उपयोग में Firebase

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

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

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

यह पृष्ठ प्रस्तावों कैसे Firebase मंच एक आधुनिक, उच्च प्रदर्शन PWA हमारे पार ब्राउज़र का उपयोग कर निर्माण करने के लिए मदद कर सकता है के एक सिंहावलोकन Firebase जावास्क्रिप्ट एसडीके

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

सकुशल और सुरक्षित

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

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

Performant होस्टिंग सेवा

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

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

यात्रा होस्टिंग Firebase के लिए आरंभ करने की मार्गदर्शिका जानने के लिए कैसे आप Firebase मंच पर अपने PWA होस्ट कर सकते हैं।

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

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

ड्रॉप-इन उत्तरदायी प्रमाणीकरण प्रवाह

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 द्वारा की पेशकश की विभिन्न विन्यास विकल्पों के बारे में अधिक जानने के लिए।

तेजी से लोड भी

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

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

Performant होस्टिंग सेवा

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

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

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

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

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

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

लोड सेवाओं केवल जब वे आवश्यकता हो

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

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

इस तरह के webpack के रूप में एक पैकेज प्रबंधक का उपयोग करना, आप पहली बार में Firebase प्रमाणीकरण लोड कर सकते हैं:

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

तब, जब आप का उपयोग करने के लिए अपने डेटा परत की जरूरत है, का उपयोग करते हुए बादल Firestore लाइब्रेरी लोड गतिशील आयात :

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

नेटवर्क लचीलापन

आपके उपयोगकर्ताओं को भरोसेमंद इंटरनेट एक्सेस न हो। PWAs स्थानीय मोबाइल एप्लिकेशन पर समान व्यवहार करना चाहिए और जब भी संभव हो ऑफ़लाइन कार्य करना चाहिए।

अपने एप्लिकेशन डेटा ऑफ़लाइन एक्सेस करें

बादल के firestore का समर्थन करता है ऑफ़लाइन डेटा हठ जो करने के लिए पारदर्शी रूप से काम ऑफ़लाइन आपके ऐप का डेटा परत सक्षम बनाता है। के लिए सेवा कार्यकर्ता के साथ संयुक्त अपने स्थिर संपत्ति कैश , अपने PWA पूरी तरह से ऑफ़लाइन कार्य कर सकते हैं। आप कोड की एक लाइन के साथ ऑफ़लाइन डेटा हठ सक्षम कर सकते हैं:

firebase.firestore().enablePersistance().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

प्रमाणन राज्य ऑफ़लाइन बनाए रखें

Firebase प्रमाणीकरण साइन-इन डेटा की एक स्थानीय कैश रहता है, एक पहले से प्रवेश किए हुए उपयोगकर्ता हैं, ऑफ़लाइन प्रमाणीकृत रहने के लिए भी जब वे अनुमति देता है। राज्य साइन-इन पर्यवेक्षक सामान्य रूप से कार्य करेंगे और ट्रिगर यहां तक ​​कि अपने उपयोगकर्ता पुनः लोड करता है, तो अनुप्रयोग ऑफ़लाइन रहते हुए:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

हमारे दस्तावेज़ पर जाएं साथ आरंभ करने के लिए बादल Firestore और Firebase प्रमाणीकरण

उपयोगकर्ताओं को आकृष्ट

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

अपने उपयोगकर्ताओं के लिए पुश नोटिफिकेशन प्रदर्शित करें

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

स्वचालित उपयोगकर्ता फिर से सहभागिता

का उपयोग करते हुए Firebase के लिए बादल कार्य , एक उदाहरण के लिए, बादल घटनाओं के आधार पर अपने उपयोगकर्ताओं को पुनः सहभागिता संदेश भेजने बादल 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);
    });