Comprendre Firebase pour le Web

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

Si vous avez des questions sur un sujet qui n'est pas abordé sur cette page, visitez l'une de nos communautés en ligne. Nous mettrons également cette page à jour régulièrement avec de nouveaux sujets, alors n'hésitez pas à revenir consulter les nouveautés pour voir si nous avons ajouté le sujet qui vous intéresse.

Versions du SDK : avec espace de noms et modulaires

Firebase fournit deux surfaces d'API pour les applications Web :

  • JavaScript : espace de noms. Il s'agit de l'interface JavaScript que Firebase a gérée pendant de nombreuses années et que les développeurs Web connaissent bien avec les anciennes applications Firebase. Étant donné que l'API avec espace de noms ne bénéficie pas de la prise en charge continue des nouvelles fonctionnalités, la plupart des nouvelles applications doivent plutôt adopter l'API modulaire.
  • JavaScript - modulaire. Ce SDK est basé sur une approche modulaire qui permet de réduire la taille du SDK et d'obtenir une plus grande efficacité avec les outils de construction JavaScript modernes tels que webpack ou Rollup.

L'API modulaire s'intègre bien aux outils de compilation qui suppriment le code inutilisé dans votre application, un processus appelé "tree-shaking". Les applications développées avec ce SDK bénéficient d'une empreinte mémoire considérablement réduite. L'API à espaces de noms, bien que disponible sous forme de module, ne possède pas une structure strictement modulaire et n'offre pas le même degré de réduction de taille.

Bien que la majorité de l'API modulaire suive les mêmes modèles que l'API avec espace de noms, l'organisation du code est différente. De manière générale, l'API à espaces de noms est orientée vers un modèle d'espaces de noms et de services, tandis que l'API modulaire est orientée vers des fonctions discrètes. Par exemple, le chaînage de points de l'API à espace de noms, tel que firebaseApp.auth(), est remplacé dans l'API modulaire par une seule fonction getAuth() qui prend firebaseApp et renvoie une instance Authentication.

Cela signifie que les applications web créées avec l'API à espaces de noms nécessitent une refactorisation afin de tirer parti de la conception modulaire des applications. Consultez le guide de mise à niveau pour plus de détails.

JavaScript - API modulaire pour les nouvelles applications

Si vous commencez une nouvelle intégration avec Firebase, vous pouvez opter pour l'API modulaire lorsque vous ajoutez et initialisez le SDK.

Lorsque vous développez votre application, gardez à l'esprit que votre code sera principalement organisé autour des fonctions. Dans l'API modulaire, les services sont passés en premier argument, et la fonction utilise ensuite les détails du service pour effectuer le reste. 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 relatifs à chaque gamme de produits ainsi que lesla documentation de référence de l'API modulaire.

Méthodes d'ajout des SDK Web à votre application

Firebase fournit des bibliothèques JavaScript pour la plupart des produits Firebase, y compris Remote Config, FCM et plus encore. La façon dont vous ajoutez les SDK Firebase à votre application Web dépend des outils que vous utilisez avec votre application (comme un bundler de modules).

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

  • npm (pour les bundlers de modules)
  • CDN (réseau de diffusion de contenu)

Pour des instructions de configuration détaillées, consultez 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 npm Firebase (qui inclut à la fois des bundles pour navigateur et Node.js) vous fournit une copie locale du SDK Firebase, qui peut être nécessaire pour les applications non-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.

Utiliser npm avec un outil de regroupement de modules tel quewebpack ouRollup Il offre des options d'optimisation pour supprimer le code inutilisé et appliquer des polyfills ciblés, ce qui peut réduire considérablement la taille de votre application. L'implémentation de ces fonctionnalités peut complexifier votre configuration et votre chaîne de compilation, mais divers outils CLI courants peuvent vous aider à atténuer ce problème. Ces outils incluent Angular, React, Vue, Next et d'autres.

En résumé :

  • Offre une optimisation précieuse de la taille de l'application
  • Des outils robustes sont disponibles pour gérer les modules.
  • Obligatoire pour le rendu côté serveur 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 simple du SDK que de nombreux développeurs connaissent peut-être. En utilisant le CDN pour ajouter les SDK, vous n'aurez pas besoin d'outil de compilation, et votre chaîne de compilation sera probablement plus simple et plus facile à utiliser comparée aux outils de regroupement de modules. Si la taille installée de votre application ne vous préoccupe pas particulièrement et que vous n'avez pas d'exigences particulières telles que la transpilation depuis TypeScript, alors un CDN pourrait être un bon choix.

En résumé :

  • Simple et intuitif
  • Convient lorsque la taille de l'application n'est pas un problème majeur
  • Convient lorsque votre site web n'utilise pas d'outils de construction.

variantes du SDK Web Firebase

Le SDK Web de Firebase peut être utilisé dans les applications de navigateur et Node. Toutefois, plusieurs produits ne sont pas disponibles dans les environnements Node. Consultez la liste des environnements compatibles.

Certains SDK de produits fournissent des variantes distinctes pour le navigateur et Node, chacune étant disponible aux formats ESM et CJS. Certains SDK de produits fournissent même des variantes Cordova ou React Native. Le SDK Web est configuré pour fournir la variante appropriée en fonction de la configuration de votre outil ou de votre environnement. Dans la plupart des cas, vous n'aurez pas besoin de la sélectionner manuellement. Toutes les variantes du SDK sont conçues pour vous aider à créer des applications Web ou des applications clientes pour l'accès des utilisateurs finaux, par exemple dans une application Node.js pour ordinateur ou IoT. Si votre objectif est de configurer un accès administrateur à partir d'environnements privilégiés (tels que des serveurs), utilisez plutôt Firebase Admin SDK.

Détection de l'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étaillée de l'environnement pour activer les bons bundles pour votre application.

Si votre code utilise des instructions require Node.js, le SDK trouve le bundle spécifique à Node. Sinon, les paramètres de votre bundler doivent être correctement configurés pour détecter le bon champ de point d'entrée dans votre fichier package.json (par exemple, main, browser ou module). Si vous rencontrez des erreurs d'exécution avec le SDK, vérifiez que votre bundler est configuré pour donner la priorité au bon type de bundle pour votre environnement.

En savoir plus sur l'objet de configuration Firebase

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

  • Nous vous déconseillons de modifier manuellement votre objet de configuration, en particulier les "options Firebase" requises suivantes : 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 graves problèmes. La seule exception est authDomain, qui peut être mis à jour en suivant les bonnes pratiques pour l'utilisation de signInWithRedirect.

  • Si vous avez activé Google Analytics dans votre projet Firebase, votre objet de configuration contient le champ measurementId. Apprenez-en davantage sur ce domaine dans la page de démarrage Analytics.

  • Si vous activez Google Analytics ou Realtime Database après avoir créé votre application Web Firebase, assurez-vous que l'objet de configuration Firebase que vous utilisez dans votre application est mis à jour avec les valeurs de configuration associées (measurementId et databaseURL, respectivement). Vous pouvez obtenir votre objet de configuration Firebase à tout moment.

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

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Bibliothèques disponibles

Options de configuration supplémentaires

Retarder le chargement des SDK Firebase (depuis le CDN)

Vous pouvez retarder l'inclusion des SDK Firebase jusqu'à ce que la page entière soit chargée. Si vous utilisez des scripts CDN d'API modulaires avec <script type="module">, il s'agit du comportement par défaut. Si vous utilisez des scripts CDN avec espace de noms en tant que module, suivez ces étapes pour différer le chargement :

  1. Ajoutez un indicateur defer à chaque balise script pour les SDK Firebase, puis reportez l'initialisation de Firebase à l'aide d'un deuxième script, par exemple :

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

  2. Créez un fichier init-firebase.js, puis incluez-y les éléments suivants :

    // TODO: Replace the following with your app's Firebase configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Utilisez 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 depuis cette application de deux manières équivalentes :

Web

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();
app_default_init_options.js

Web

// 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();
firebaseapp.js

Cependant, il arrive parfois que vous ayez besoin d'accéder à plusieurs projets Firebase simultanément. Par exemple, vous pourriez vouloir lire des données à partir de la base de données d'un projet Firebase, mais stocker des fichiers dans un autre projet Firebase. Vous pouvez également authentifier un projet tout en gardant un deuxième projet non authentifié.

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

Web

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);
app_multi_project_init_options.js

Web

// 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();
firebaseapp.js

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

Si vous développez une application web, certaines parties du SDK Firebase JavaScript exigent que vous serviez votre application web à partir d'un serveur plutôt qu'à partir 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 la CLI Firebase, un outil de ligne de commande.

  1. Consultez la documentation de la CLI Firebase pour savoir comment installer la CLI ou passer à sa dernière version.

  2. Initialisez votre projet Firebase. Exécutez la commande suivante à partir de la racine du répertoire de votre application locale :

    firebase init

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

    firebase serve

Ressources open source pour les SDK JavaScript de Firebase

Firebase est compatible avec le développement Open Source. Nous encourageons les contributions et les commentaires de la communauté.

SDK JavaScript Firebase

La plupart des SDK JavaScript Firebase sont développés en tant que bibliothèques Open Source dans notre dépôt GitHub Firebase public.

Exemples de démarrage rapide

Firebase propose une collection d'exemples de démarrage rapide pour la plupart des API Firebase sur le Web. Retrouvez ces guides de démarrage rapide dans notre dépôt public Firebase GitHub quickstart. Vous pouvez utiliser ces guides de démarrage rapide comme exemples de code pour utiliser les SDK Firebase.