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) et 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é 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 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>
Auto-configuration du SDK
La configuration automatique du SDK permet de gérer facilement plusieurs environnements (tels que le développement, la préproduction et la production) à 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 du 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 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 l'initialisation vous-même, les valeurs de configuration Firebase sont également disponibles au format JSON:
fetch('/__/firebase/init.json').then(async response => {
firebase.initializeApp(await response.json());
});
SDK JavaScript Firebase 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> |
| Installations Firebase | <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 SDK JavaScript (SDK complet) |
<script src="/__/firebase/8.10.1/firebase.js"></script> |
Aides 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. Chaque projet Firebase peut ainsi disposer d'un sous-domaine Firebase unique, ce qui renforce la sécurité de Firebase Authentication.
De plus, vous pouvez 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 les bonnes pratiques d'utilisation de signInWithRedirect.
URL réservées et service workers
Si vous développez une progressive web app (PWA), vous pouvez créer un service worker doté d'un "fallback de navigation" et qui affiche une URL spécifique par défaut s'il 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 remplacement de navigation qui exclut l'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.