Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Charger les SDK Firebase à partir d'URL réservées

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Firebase Hosting réserve les URL de votre site commençant par /__ . Cet espace de noms réservé facilite l'utilisation d'autres produits Firebase avec Firebase Hosting.

Ces URL réservées sont disponibles à la fois lorsque vous déployez sur Firebase ( firebase deploy ) ou lorsque vous exécutez votre application sur un serveur local ( firebase serve ).

Ajouter des scripts pour les URL réservées

Étant donné que Firebase Hosting est servi sur HTTP/2 lors du déploiement, vous pouvez améliorer les performances en chargeant des fichiers de la même origine. Firebase Hosting sert toutes les versions du SDK JavaScript Firebase à partir d'URL spéciales formatées comme suit :

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Nous vous recommandons vivement de ne charger que les bibliothèques que vous utilisez dans votre application. Par exemple, pour inclure uniquement Authentication et Cloud Firestore, ajoutez les scripts suivants au bas de votre <body> , mais avant d'utiliser les services Firebase :

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/8.10.1/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.10.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
</body>

Configuration automatique du SDK

La configuration automatique du SDK facilite la gestion de plusieurs environnements (tels que le développement, la mise en scène et la production) à partir d'une seule base de code. En vous appuyant sur l'URL d'hébergement réservée, vous pouvez déployer le même code sur plusieurs projets Firebase.

En plus d'héberger les SDK eux-mêmes, l'espace de noms réservé fournit également toute la configuration nécessaire pour initialiser le SDK pour le projet Firebase associé au site d'hébergement. Cette configuration Firebase et l'initialisation du SDK sont fournies par un script que vous pouvez inclure directement :

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

Lorsque vous déployez sur Firebase ou testez votre application localement, ce script configure automatiquement le SDK JavaScript Firebase pour le projet Firebase actif et initialise le SDK.

Si vous préférez contrôler vous-même l'initialisation, les valeurs de configuration Firebase sont également disponibles au format JSON :

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

SDK Firebase JS disponibles (à partir d'URL d'hébergement réservées)

Produit Firebase Référence de la bibliothèque (URL réservée)
Noyau Firebase
(obligatoire)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytique
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
Vérification de l'application
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentification
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud Functions pour le SDK client Firebase
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Installations Firebase
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Messagerie en nuage
<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

Pour une expérience optimale avec Cloud Messaging, ajoutez également le SDK Firebase pour Analytics.

Stockage en ligne
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Suivi de la performance
( version bêta )
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Base de données en temps réel
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Configuration à distance
( version bêta )
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

Pour une expérience optimale avec Remote Config, ajoutez également le SDK Firebase pour Analytics.

SDK JavaScript Firebase
(SDK complet)
<script src="/__/firebase/8.10.1/firebase.js"></script>

Assistants d'authentification

Firebase Authentication utilise l'espace de noms réservé pour fournir du code JavaScript et HTML spécial afin de compléter l'authentification auprès des fournisseurs via OAuth. Cela permet à chaque projet Firebase d'avoir un sous-domaine Firebase unique, ce qui augmente la sécurité de Firebase Authentication.

De plus, cela vous permet d'utiliser votre propre domaine personnalisé pour l'option authDomain de firebase.initializeApp() . Si vous configurez un domaine personnalisé pour Firebase Hosting, vous pouvez également spécifier ce domaine personnalisé (au lieu de votre sous-domaine web.app ou firebaseapp.com ) lors de l'initialisation des SDK Firebase.

URL réservées et service workers

Si vous créez une application Web progressive (PWA), vous pouvez créer un agent de service doté d'un "repli de navigation" et restituant une URL spécifique par défaut si elle ne correspond pas à une liste d'éléments mis en cache.

Si vous utilisez la bibliothèque sw-precache , vous pouvez ajouter un paramètre de liste blanche de secours de navigation qui exclut l'espace de noms réservé :

{
  navigateFallbackWhitelist: [/^(?!\/__).*/]
}

En général, rappelez-vous simplement que l'espace de noms à double trait de soulignement est réservé à l'utilisation de Firebase et que vous ne devez pas intercepter ces requêtes dans votre service worker.