予約済み URL から Firebase SDK を読み込む

Firebase Hosting は、/__ で始まるサイトの URL を予約します。この予約された名前空間により、Firebase Hosting と他の Firebase プロダクトを簡単に利用できるようになります。

この予約済み URL は、Firebase にデプロイするとき（firebase deploy）と、ローカルサーバー上でアプリを実行するとき（firebase serve）の両方で利用できます。

予約済み URL のスクリプトを追加する

Firebase Hosting ではデプロイ後 HTTP/2 経由でサービスが提供されるため、同じ場所からファイルを読み込むとパフォーマンスが向上します。Firebase Hosting は、次のような特別な URL から Firebase JavaScript SDK のバージョン 8 を提供します。

/__/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 URL を使用することで、同じコードを複数の 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 を初期化します。

初期化を制御するには、Firebase の構成値を JSON 形式で指定します。

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});

利用可能な Firebase JS SDK（予約済み Hosting URL から）

Firebase プロダクト	ライブラリリファレンス（予約済み URL）
Firebase Core （必須）	<script src="/__/firebase/8.10.1/firebase-app.js"></script>
アナリティクス	<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 を最適な環境で使用するには、Google アナリティクス用の Firebase SDK も追加します。
Cloud Storage	<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring （ベータ版リリース）	<script src="/__/firebase/8.10.1/firebase-performance.js"></script>
Realtime Database	<script src="/__/firebase/8.10.1/firebase-database.js"></script>
Remote Config （ベータ版リリース）	<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script> Remote Config を最適な環境で使用するには、Google アナリティクス用の Firebase SDK も追加します。
Firebase JavaScript SDK （SDK 全体）	<script src="/__/firebase/8.10.1/firebase.js"></script>

Auth ヘルパー

Firebase Authentication は予約済みの名前空間を使用し、OAuth 経由でプロバイダとの認証を完了するために特別な JavaScript と HTML を提供します。これにより、Firebase の各プロジェクトが独自の Firebase サブドメインを持つようになり、Firebase Authentication のセキュリティが強化されます。

さらに、firebase.initializeApp() の authDomain オプションに独自のカスタムドメインを使用することもできます。Firebase Hosting にカスタムドメインを構成している場合、Firebase SDK の初期化で web.app または firebaseapp.com サブドメインではなく、このカスタムドメインを指定できます。

予約済みの URL と Service Worker

プログレッシブウェブアプリ（PWA）を構築する場合、ナビゲーションフォールバックのある Service Worker を作成できます。これにより、キャッシュ内の項目リストに一致しない場合にデフォルトで特定の URL をレンダリングできます。

sw-precache ライブラリを使用している場合、ナビゲーションフォールバックのホワイトリストに、予約済みの名前空間を除外する設定を追加できます。

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

通常、連続する 2 つのアンダースコアを含む名前空間は Firebase 用に予約されているため、Service Worker でこれらのリクエストをインターセプトしないでください。