Google 致力于为黑人社区推动种族平等。查看具体举措

En savoir plus sur Web et Firebase

Lorsque vous développez une application Web à l'aide de Firebase, vous pouvez rencontrer des concepts inconnus ou des domaines dans lesquels vous avez besoin de plus d'informations pour prendre les bonnes décisions pour votre projet. Cette page vise à répondre à ces questions ou à vous orienter vers des ressources pour en savoir plus.

Si vous avez des questions sur un sujet ne sont pas couverts sur cette page, visitez l' un de nos communautés en ligne . Nous mettrons également à jour cette page avec de nouveaux sujets périodiquement, alors revenez voir si nous avons ajouté le sujet sur lequel vous souhaitez en savoir plus.

SDK versions 8 et 9

Firebase propose deux versions du SDK pour les applications Web :

  • Version 8. Ceci est l'interface JavaScript qui Firebase a maintenu pendant plusieurs années et est familière aux développeurs Web avec des applications existantes Firebase. Étant donné que Firebase supprimera la prise en charge de cette version après un cycle de publication majeur, les nouvelles applications devraient plutôt adopter la version 9.
  • Version modulaire 9. Ce SDK introduit une approche modulaire qui fournit réduit la taille du SDK et une plus grande efficacité avec des outils de construction JavaScript modernes tels que webpack ou Rollup .

La version 9 s'intègre bien aux outils de construction qui suppriment le code qui n'est pas utilisé dans votre application, un processus appelé "tree-shaking". Les applications créées avec ce SDK bénéficient d'un encombrement considérablement réduit. La version 8, bien que disponible sous forme de module, n'a pas une structure strictement modulaire et n'offre pas le même degré de réduction de taille.

Bien que la majorité du SDK de la version 9 suive les mêmes modèles que la version 8, l'organisation du code est différente. Généralement, la version 8 est orientée vers un espace de noms et un modèle de service, tandis que la version 9 est orientée vers des fonctions discrètes. Par exemple, la version 8 de chaînage de points, tels que firebaseApp.auth() , est remplacé dans la version 9 par un seul getAuth() fonction qui prend firebaseApp et renvoie une instance d' authentification.

Cela signifie que les applications Web créées avec la version 8 ou une version antérieure nécessitent une refactorisation afin de tirer parti de l'approche modulaire de la version 9. Firebase fournit des bibliothèques compatibles pour faciliter cette transition ; voir le guide de mise à niveau pour plus de détails.

Qu'est-ce qui est pris en charge ?

Bien que les versions 8 et 9 aient des styles de code différents, elles offrent une prise en charge très similaire des fonctionnalités et options de Firebase. Comme nous le décrirons en détail dans ce guide, les deux versions du SDK prennent en charge les variantes JavaScript et Node.js ainsi que plusieurs options pour ajouter/installer les SDK.

Ajouter des SDK avec 8.0 (espace de noms) 9.0 (Modulaire)
npm
  • Pour JavaScript
  • Pour Node.js
  • Pour JavaScript
  • Pour Node.js
CDN (réseau de diffusion de contenu)
  • Pour JavaScript
  • Pour JavaScript
URL d'hébergement
  • Pour JavaScript
  • Pour Node.js

Pour plus d' informations, voir façons d'ajouter les SDKs Web à votre application et Firebase Web SDK variantes plus tard sur cette page.

Version 9 pour les nouvelles applications

Si vous commencez une nouvelle intégration avec Firebase, vous pouvez choisir dans la version 9 SDK lorsque vous ajoutez et initialiser le SDK .

Comme vous développez votre application, gardez à l' esprit que votre code sera organisé principalement autour des fonctions. Dans la version 9, les services sont passés en premier argument, et la fonction utilise ensuite les détails du service pour faire le reste. Par exemple:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Pour plus d' exemples et de détails, consultez les guides pour chaque zone de produit, ainsi que la version 9 documentation de référence .

Façons d'ajouter les SDK Web à votre application

Firebase fournit des bibliothèques JavaScript pour la plupart des produits Firebase, y compris Remote Config, FCM, etc. La manière dont vous ajoutez les SDK Firebase à votre application Web dépend des outils que vous utilisez avec votre application (comme un bundler de modules) ou si votre application s'exécute dans un environnement sans navigateur tel que Node.js.

Vous pouvez ajouter des bibliothèques disponibles à votre application via l' une des méthodes prises en charge:

  • npm (pour les bundlers de modules et Node.js)
  • CDN (réseau de diffusion de contenu)

Pour obtenir des instructions de configuration détaillées, voir Ajouter Firebase à votre application JavaScript . Le reste de cette section contient des informations pour vous aider à choisir parmi les options disponibles.

npm

Le téléchargement du package Firebase npm (qui comprend à la fois les bundles navigateur et Node.js) vous fournit une copie locale du SDK Firebase, qui peut être nécessaire pour les applications sans navigateur telles que les applications Node.js, React Native ou Electron. Le téléchargement inclut les bundles Node.js et React Native en option pour certains packages. Les bundles Node.js sont nécessaires pour l'étape de rendu côté serveur (SSR) des frameworks SSR.

En utilisant NPM avec un module Bundler tel que webpack ou Rollup offre des options d'optimisation pour code inutilisé « tree-shake » et appliquer polyfills ciblées, ce qui peut réduire considérablement l'empreinte de la taille de votre application. La mise en œuvre de ces fonctionnalités peut ajouter une certaine complexité à votre configuration et à votre chaîne de construction, mais divers outils CLI traditionnels peuvent aider à atténuer cela. Ces outils comprennent angulaire , React , Vue , Next , et d' autres.

En résumé:

  • Fournit une optimisation précieuse de la taille de l'application
  • Un outillage robuste est disponible pour gérer les modules
  • Requis pour SSR avec Node.js

CDN (réseau de diffusion de contenu)

L'ajout de bibliothèques stockées sur le CDN de Firebase est une méthode de configuration SDK simple qui peut être familière à de nombreux développeurs. En utilisant le CDN pour ajouter les SDK, vous n'aurez pas besoin d'un outil de génération, et votre chaîne de génération peut avoir tendance à être plus simple et plus facile à utiliser que les bundlers de modules. Si vous n'êtes pas particulièrement préoccupé par la taille installée de votre application et que vous n'avez pas d'exigences particulières telles que la transpilation à partir de TypeScript, alors CDN pourrait être un bon choix.

En résumé:

  • Familier et simple
  • Approprié lorsque la taille de l'application n'est pas une préoccupation majeure
  • Approprié lorsque votre site Web n'utilise pas d'outils de construction.

Variantes du SDK Web Firebase

Actuellement, Firebase propose deux variantes de SDK Web :

  • Un ensemble JavaScript prenant en charge toutes les fonctionnalités de Firebase à utiliser dans le navigateur.
  • Un ensemble Node.js côté client qui prend en charge de nombreuses fonctionnalités Firebase, mais pas toutes. Voir la liste des environnements pris en charge .

Ces deux variantes de SDK sont conçues pour aider à créer des applications Web ou des applications clientes pour l'accès des utilisateurs finaux, comme dans une application de bureau ou IoT Node.js. Si votre objectif est de mettre en place un accès administratif des environnements privilégiés (tels que les serveurs) utiliser le Firebase Administrateur SDK à la place.

Détection d'environnement avec des bundlers et des frameworks

Lorsque vous installez le SDK Web Firebase à l'aide de npm, les versions JavaScript et Node.js sont toutes deux installées. Le package fournit une détection d'environnement détaillée pour activer les bons bundles pour votre application.

Si votre code utilise Node.js require des déclarations, le SDK trouve le faisceau spécifique au nœud. Dans le cas contraire, les paramètres de votre Bundler doivent être correctement cernées pour détecter le champ de point d'entrée droit dans votre package.json fichier (par exemple, main , browser , ou le module ). Si vous rencontrez des erreurs d'exécution avec le SDK, vérifiez que votre bundler est configuré pour donner la priorité au type de bundle correct pour votre environnement.

En savoir plus sur l'objet de configuration Firebase

Pour initialiser Firebase dans votre application, vous devez fournir la configuration du projet Firebase de votre application. Vous pouvez obtenir votre objet config Firebase à tout moment.

  • Nous ne recommandons pas modifier manuellement votre objet de configuration, en particulier les suivantes nécessaires « options » Firebase: apiKey , projectId et appID . Si vous initialisez votre application avec des valeurs non valides ou manquantes pour ces "options Firebase" requises, les utilisateurs de votre application peuvent rencontrer de sérieux problèmes.

  • Si vous avez activé Google Analytics dans votre projet Firebase, votre objet de configuration contient le champ measurementId . En savoir plus sur ce domaine dans le Analytics page Mise en route .

Voici le format d'un objet de configuration avec tous les services activés (ces valeurs sont automatiquement renseignées) :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Bibliothèques disponibles

Options de configuration supplémentaires

Retarder le chargement des SDK Firebase (à partir du CDN)

Vous pouvez retarder l'inclusion des SDK Firebase jusqu'à ce que la page entière soit chargée. Si vous utilisez la version 9 scripts CDN <script type="module"> , c'est le comportement par défaut. Si vous utilisez des scripts CDN version 8 en tant que module, procédez comme suit pour différer le chargement :

  1. Ajouter un defer drapeau à chaque script balise pour la Firebase SDKs, puis reporter l'initialisation de Firebase à l' aide d' un second script, par exemple:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Créer un init-firebase.js fichier, puis inclure les éléments suivants dans le fichier:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Utiliser plusieurs projets Firebase dans une seule application

Dans la plupart des cas, vous n'avez qu'à initialiser Firebase dans une seule application par défaut. Vous pouvez accéder à Firebase à partir de cette application de deux manières équivalentes :

Web version 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();

Web version 8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

Parfois, cependant, vous devez accéder à plusieurs projets Firebase en même temps. Par exemple, vous souhaiterez peut-être lire les données de la base de données d'un projet Firebase mais stocker les fichiers dans un autre projet Firebase. Ou vous pouvez vouloir authentifier un projet tout en gardant un deuxième projet non authentifié.

Le SDK JavaScript Firebase vous permet d'initialiser et d'utiliser plusieurs projets Firebase dans une seule application en même temps, chaque projet utilisant ses propres informations de configuration Firebase.

Web version 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);

Web version 8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();

Exécuter un serveur Web local pour le développement

Si vous créez une application Web, certaines parties du SDK JavaScript Firebase nécessitent que vous diffusiez votre application Web à partir d'un serveur plutôt que du système de fichiers local. Vous pouvez utiliser la CLI Firebase pour exécuter un serveur local.

Si vous avez déjà configuré Firebase Hosting pour votre application, vous avez peut-être déjà effectué plusieurs des étapes ci-dessous.

Pour diffuser votre application Web, vous utiliserez l'interface de ligne de commande Firebase, un outil en ligne de commande.

  1. Visitez la documentation Firebase CLI pour savoir comment installer la CLI ou mise à jour à sa dernière version .

  2. Initialisez votre projet Firebase. Exécutez la commande suivante à partir de la racine de votre répertoire d'applications local :

    firebase init

  3. Démarrez le serveur local pour le développement. Exécutez la commande suivante à partir de la racine de votre répertoire d'applications local :

    firebase serve

Ressources open source pour les SDK JavaScript Firebase

Firebase prend en charge le développement open source, et nous encourageons les contributions et les commentaires de la communauté.

SDK JavaScript Firebase

La plupart Firebase JavaScript sont développés SDKs bibliothèques open source dans notre publique dépôt Firebase GitHub .

Exemples de démarrage rapide

Firebase gère une collection d'exemples de démarrage rapide pour la plupart des API Firebase sur le Web. Retrouvez ces QuickStart dans notre publique dépôt QuickStart Firebase GitHub . Vous pouvez utiliser ces guides de démarrage rapide comme exemple de code pour l'utilisation des SDK Firebase.