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

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 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 diffusé sur HTTP/2 lors du déploiement, vous pouvez améliorer les performances en chargeant les fichiers à partir de la même origine. Firebase Hosting diffuse la version 8 du SDK Firebase JavaScript à partir d'URL spéciales au format suivant :

/__/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 n'inclure que Authentication et Cloud Firestore, ajoutez les scripts suivants en bas de votre balise <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 (développement, préproduction et production, par exemple) à partir d'un seul codebase. En vous appuyant sur l'URL Hosting réservée, vous pouvez déployer le même code dans 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 Hosting. Cette configuration Firebase et cette 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 en local, ce script configure automatiquement le SDK Firebase JavaScript pour le projet Firebase actif et l'initialise.

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 JS Firebase disponibles (à partir des URL Hosting réservées)

Produit Firebase Référence de bibliothèque (URL réservée)
Firebase Core
(obligatoire)
<script src="/__/firebase/8.10.1/firebase-app.js"></script>
Analytics
<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>
App Check
<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>
Authentication
<script src="/__/firebase/8.10.1/firebase-auth.js"></script>
Cloud Firestore
<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>
Cloud Functions for Firebase Client SDK
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Firebase installations
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging
<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.

Cloud Storage
<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring
(version bêta)
<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database
<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote Config
(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.

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

Assistance pour l'authentification

Firebase Authentication utilise l'espace de noms réservé pour fournir du code JavaScript et HTML spécial permettant d'effectuer l'authentification auprès des fournisseurs via OAuth. Cela permet à chaque projet Firebase d'avoir un sous-domaine Firebase unique, ce qui renforce 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. Pour en savoir plus sur l'utilisation d'un domaine personnalisé, consultez Bonnes pratiques pour l'utilisation de signInWithRedirect.

URL réservées et service workers

Si vous créez une progressive web app (PWA), vous pouvez créer un service worker qui comporte une "navigation de secours" et qui affiche une URL spécifique par défaut si elle ne correspond pas à une liste d'éléments pré-cachés.

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

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

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