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 自体をホストするだけでなく、予約済みの名前空間は、ホスティング サイトに関連付けられた 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 (予約済みホスティング URL から)
| Firebase プロダクト | ライブラリ参照 (予約済み URL) |
|---|---|
| Firebase コア （必要） | <script src="/__/firebase/8.10.1/firebase-app.js"></script> |
| 分析 | <script src="/__/firebase/8.10.1/firebase-analytics.js"></script> |
| アプリチェック | <script src="/__/firebase/8.10.1/firebase-app-check.js"></script> |
| 認証 | <script src="/__/firebase/8.10.1/firebase-auth.js"></script> |
| クラウド ファイアストア | <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> |
| クラウド メッセージング | <script src="/__/firebase/8.10.1/firebase-messaging.js"></script> Cloud Messaging を使用して最適なエクスペリエンスを得るには、Firebase SDK for Analytics も追加してください。 |
| クラウドストレージ | <script src="/__/firebase/8.10.1/firebase-storage.js"></script> |
| パフォーマンス監視 (ベータ版リリース) | <script src="/__/firebase/8.10.1/firebase-performance.js"></script> |
| リアルタイム データベース | <script src="/__/firebase/8.10.1/firebase-database.js"></script> |
| リモート設定 (ベータ版リリース) | <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> |
認証ヘルパー
Firebase Authenticationは予約済みの名前空間を使用して特別な JavaScript と HTML を提供し、OAuth を介してプロバイダーとの認証を完了します。これにより、各 Firebase プロジェクトが一意の Firebase サブドメインを持つことができ、Firebase Authentication のセキュリティが向上します。
さらに、これにより、 firebase.initializeApp firebase.initializeApp()のauthDomainオプションに独自のカスタム ドメインを使用できます。 Firebase Hostingのカスタム ドメインを構成する場合、Firebase SDK を初期化するときに、( web.appまたはfirebaseapp.comサブドメインの代わりに) そのカスタム ドメインを指定することもできます。
予約済み URL と Service Worker
プログレッシブ Web アプリ (PWA) を構築している場合は、"ナビゲーション フォールバック" を備えた Service Worker を作成し、事前にキャッシュされたアイテムのリストと一致しない場合に特定の URL をデフォルトでレンダリングすることがあります。
sw-precacheライブラリを使用している場合は、予約された名前空間を除外するナビゲーション フォールバック ホワイトリスト設定を追加できます。
{
navigateFallbackWhitelist: [/^(?!\/__).*/]
}
一般に、ダブル アンダースコアの名前空間は Firebase で使用するために予約されており、Service Worker でこれらのリクエストをインターセプトしないでください。