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

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Nous vous recommandons fortement de charger uniquement les bibliothèques que vous utilisez dans votre application. Par exemple, pour inclure uniquement l'authentification et Cloud Firestore, ajoutez les scripts suivants au bas de votre balise <body> , mais avant d'utiliser des 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 préparation 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 du projet Firebase associé au site d'hébergement. 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 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 sous forme 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 de base de feu
(requis)
<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>
Fonctions Cloud pour le SDK client Firebase
<script src="/__/firebase/8.10.1/firebase-functions.js"></script>
Installations de base de feu
<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Messagerie cloud
<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

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

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 service worker doté d'un « secours de navigation » et restituer une URL spécifique par défaut si elle ne correspond pas à une liste d'éléments pré-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.