从预留网址加载 Firebase SDK

Firebase Hosting 会在您的网站中预留以 /__ 开头的网址。这个预留的命名空间可让您更轻松地将其他 Firebase 产品与 Firebase Hosting 配合使用。

部署到 Firebase (firebase deploy) 或在本地服务器 (firebase serve) 上运行应用时,这些预留网址都是可用的。

为预留网址添加脚本

由于 Firebase Hosting 在部署后通过 HTTP/2 传输内容,您可以从同一来源加载文件,以提高性能。Firebase Hosting 通过特殊格式的网址提供版本 8 的 Firebase JavaScript SDK,具体格式如下:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

我们强烈建议您仅加载您在应用中使用的。例如,若要仅添加 AuthenticationCloud 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 Client 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.appfirebaseapp.com 子网域)。如需详细了解如何使用自定义网域,请参阅使用 signInWithRedirect 的最佳实践

预留的网址和 Service Worker

如果您正在构建渐进式 Web 应用 (PWA),可能会创建一个具有“导航回退”功能的 Service Worker,以便在网址与预先缓存的条目列表不匹配时默认呈现指定的网址。

如果您使用的是 sw-precache 库,则可以添加相应的导航回退白名单设置,以排除预留的命名空间:

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

总之,双下划线命名空间是预留给 Firebase 使用的,不应在 Service Worker 中拦截这些请求。