Firebase Hosting 会在您的网站中预留以 /__
开头的网址。这个预留的命名空间可让您更轻松地将 Firebase Hosting 与其他 Firebase 产品配合使用。
部署到 Firebase (firebase deploy
) 或在本地服务器 (firebase serve
) 上运行应用时,这些预留网址都是可用的。
为预留网址添加脚本
由于 Firebase Hosting 在部署后通过 HTTP/2 传输内容,您可以从同一来源加载文件,以提高性能。Firebase Hosting 通过特殊格式的网址提供版本 8 的 Firebase JavaScript SDK,具体格式如下:
/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js
我们强烈建议您仅加载您在应用中使用的库。例如,若要仅添加 Authentication 和 Cloud Firestore,请在使用任何 Firebase 服务之前将以下脚本添加到 <body>
标记的最下面:
<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>
SDK 自动配置
自动 SDK 配置让您可以通过单个代码库轻松管理多个环境(如开发、预演和生产)。依靠预留的 Hosting 网址,您可以将相同的代码部署到多个 Firebase 项目。
除了托管 SDK 自身之外,预留的命名空间还提供了为与 Hosting 网站相关联的 Firebase 项目进行 SDK 初始化所需的所有配置。此 Firebase 配置和 SDK 初始化由您可以直接包含的脚本提供:
<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>
当您部署到 Firebase 或在本地测试您的应用时,此脚本会自动为活跃的 Firebase 项目配置 Firebase JavaScript SDK,并初始化 SDK。
如果您喜欢自己控制初始化,也有 JSON 形式的 Firebase 配置值可供您使用:
fetch('/__/firebase/init.json').then(async response => {
firebase.initializeApp(await response.json());
});
可用的 Firebase JS SDK(来自预留的 Hosting 网址)
Firebase 产品 | 库引用(预留网址) |
---|---|
Firebase 核心 (必需) |
<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 客户端 SDK | <script src="/__/firebase/8.10.1/firebase-functions.js"></script> |
Firebase 安装 | <script src="/__/firebase/8.10.1/firebase-installations.js"></script> |
Cloud Messaging | <script src="/__/firebase/8.10.1/firebase-messaging.js"></script> 为获得理想的 Cloud Messaging 使用体验,还需要添加 Firebase SDK for Analytics。 |
Cloud Storage | <script src="/__/firebase/8.10.1/firebase-storage.js"></script> |
Performance Monitoring (Beta 版) |
<script src="/__/firebase/8.10.1/firebase-performance.js"></script> |
Realtime Database | <script src="/__/firebase/8.10.1/firebase-database.js"></script> |
Remote Config
(Beta 版) |
<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script> 为获得理想的 Remote Config 使用体验,还需要添加 Firebase SDK for Analytics。 |
Firebase JavaScript SDK (整个 SDK) |
<script src="/__/firebase/8.10.1/firebase.js"></script> |
Authentication 助手
Firebase Authentication 使用预留的命名空间来提供特殊的 JavaScript 和 HTML,以通过 OAuth 帮助提供方完成身份验证。这样,每个 Firebase 项目都可以拥有一个唯一的 Firebase 子网域,从而提高 Firebase Authentication 的安全性。
此外,您还可以针对 firebase.initializeApp()
的 authDomain
选项使用自己的自定义网域。如果您为 Firebase Hosting 配置自定义网域,则还可以在初始化 Firebase SDK 时指定该自定义网域(而不是 web.app
或 firebaseapp.com
子网域)。 如需详细了解如何使用自定义网域,请参阅使用 signInWithRedirect 的最佳实践。
预留的网址和 Service Worker
如果您正在构建渐进式 Web 应用 (PWA),可能会创建一个具有“导航回退”功能的 Service Worker,以便在网址与预先缓存的条目列表不匹配时默认呈现指定的网址。
如果您使用的是 sw-precache 库,则可以添加相应的导航回退白名单设置,以排除预留的命名空间:
{
navigateFallbackWhitelist: [/^(?!\/__).*/]
}
总之,双下划线命名空间是预留给 Firebase 使用的,不应在 Service Worker 中拦截这些请求。