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

Comme Firebase Hosting est diffusé via HTTP/2 lors du déploiement, vous pouvez booster en chargeant des fichiers de la même origine. Firebase Hosting propose la version 8 du SDK JavaScript Firebase à 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 (tels que développement, préproduction et production) à partir d'un seul codebase. En vous appuyant sur l'URL Hosting réservée, vous pouvez déployer le même code sur plusieurs projets.

En plus d'héberger les SDK eux-mêmes, l'espace de noms réservé fournit toute la configuration nécessaire à l'initialisation du SDK pour Firebase projet 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 s'affiche automatiquement configure le SDK JavaScript Firebase pour projet Firebase actif et initialise le SDK.

Si vous préférez contrôler vous-même l'initialisation, 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 Hosting réservées)

Produit Firebase Référence de la 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>

Assistants d'authentification

Firebase Authentication utilise l'espace de noms réservé pour fournir du code JavaScript et HTML spécial afin d'effectuer l'authentification auprès des fournisseurs via OAuth. Ainsi, chaque projet Firebase dispose d'une Sous-domaine Firebase, ce qui renforce la sécurité de Firebase Authentication.

De plus, cela vous permet d'utiliser votre propre domaine personnalisé pour authDomain l'option firebase.initializeApp(). Si vous configurer un domaine personnalisé pour Firebase Hosting, vous pouvez alors spécifier ce domaine personnalisé de votre sous-domaine web.app ou firebaseapp.com) lors de l'initialisation de Firebase SDK. Pour en savoir plus sur l'utilisation d'un domaine personnalisé, consultez les bonnes pratiques d'utilisation de signInWithRedirect.

URL et service workers réservés

Si vous développez une progressive web app (PWA), vous pouvez créer un service avec une "navigation de remplacement" et affiche par défaut une URL spécifique s'il ne correspond pas à une liste d'éléments mis en pré-cache.

Si vous utilisez la fonctionnalité sw-precache vous pouvez ajouter un paramètre de liste blanche de remplacement pour la navigation qui exclut le espace de noms réservé:

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

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