Jika Anda membangun aplikasi Angular atau Next.js yang dirender server, lihat Firebase App Hosting generasi berikutnya, sebuah solusi full stack untuk framework web modern.

Memuat Firebase SDK dari URL yang dicadangkan

Firebase Hosting mencadangkan URL di situs Anda dengan awalan /__. Namespace yang dicadangkan ini memudahkan penggunaan produk Firebase lain bersama dengan Firebase Hosting.

URL yang dicadangkan ini tersedia saat Anda men-deploy ke Firebase (firebase deploy) atau menjalankan aplikasi di server lokal (firebase serve).

Menambahkan skrip untuk URL yang dicadangkan

Karena Firebase Hosting disalurkan melalui HTTP/2 ketika di-deploy, Anda dapat meningkatkan performa dengan memuat file dari asal yang sama. Firebase Hosting menyalurkan Firebase JavaScript SDK versi 8 dari URL khusus yang diformat seperti berikut:

/__/firebase/JS_SDK_VERSION/FIREBASE_SDK_NAME.js

Sebaiknya muat library yang digunakan di aplikasi Anda saja. Misalnya, untuk hanya menyertakan Authentication dan Cloud Firestore, tambahkan skrip berikut ke bagian bawah tag <body>, tetapi sebelum Anda menggunakan layanan Firebase apa pun:

<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>

Konfigurasi otomatis SDK

Konfigurasi SDK otomatis memudahkan pengelolaan beberapa lingkungan (seperti pengembangan, staging, dan produksi) dari satu codebase. Dengan mengandalkan URL Hosting yang dicadangkan, Anda dapat men-deploy kode yang sama ke beberapa project Firebase.

Selain menghosting SDK itu sendiri, namespace yang dicadangkan juga menyediakan semua konfigurasi yang diperlukan guna menginisialisasi SDK untuk project Firebase yang terkait dengan situs Hosting. Konfigurasi Firebase dan inisialisasi SDK ini disediakan oleh skrip yang dapat Anda sertakan secara langsung:

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

Ketika Anda men-deploy ke Firebase atau menguji aplikasi secara lokal, skrip ini otomatis mengonfigurasi Firebase JavaScript SDK untuk project Firebase yang aktif dan menginisialisasi SDK.

Jika Anda lebih suka mengontrol sendiri proses inisialisasi, nilai konfigurasi Firebase juga tersedia dalam format JSON:

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

Firebase JS SDK yang tersedia (dari URL Hosting yang dicadangkan)

Produk Firebase	Referensi library (URL yang dicadangkan)
Firebase core (wajib)	<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>
Penginstalan Firebase	<script src="/__/firebase/8.10.1/firebase-installations.js"></script>
Cloud Messaging	<script src="/__/firebase/8.10.1/firebase-messaging.js"></script> Untuk mendapatkan pengalaman optimal menggunakan Cloud Messaging, tambahkan juga Firebase SDK untuk Analytics.
Cloud Storage	<script src="/__/firebase/8.10.1/firebase-storage.js"></script>
Performance Monitoring (rilis 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 (rilis beta)	<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script> Untuk memperoleh pengalaman optimal menggunakan Remote Config, tambahkan juga Firebase SDK untuk Analytics.
Firebase JavaScript SDK (seluruh SDK)	<script src="/__/firebase/8.10.1/firebase.js"></script>

Penunjang Auth

Firebase Authentication menggunakan namespace yang dicadangkan untuk menyediakan JavaScript dan HTML khusus, guna menyelesaikan autentikasi dengan penyedia melalui OAuth. Dengan begitu, setiap project Firebase dapat memiliki subdomain Firebase yang unik, sehingga meningkatkan keamanan Firebase Authentication.

Selain itu, Anda dapat menggunakan domain kustom Anda sendiri untuk opsi authDomain dari firebase.initializeApp(). Jika mengonfigurasi domain kustom untuk Firebase Hosting, Anda juga bisa menentukan domain kustom tersebut (alih-alih subdomain web.app atau firebaseapp.com Anda) saat menginisialisasi Firebase SDK. Lihat Praktik terbaik untuk menggunakan signInWithRedirect untuk mengetahui detail selengkapnya tentang cara menggunakan domain kustom.

URL yang dicadangkan dan pekerja layanan

Jika mem-build Progressive Web App (PWA), Anda dapat membuat pekerja layanan yang memiliki "fallback navigasi" dan merender URL tertentu secara default jika tidak cocok dengan daftar item yang telah masuk cache sebelumnya.

Jika menggunakan library sw-precache, Anda dapat menambahkan setelan fallback navigasi yang diizinkan, yang tidak mencakup namespace yang dicadangkan:

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

Secara umum, ingatlah bahwa namespace dengan garis bawah ganda dicadangkan untuk penggunaan Firebase, dan sebaiknya jangan menangkap permintaan ini di pekerja layanan Anda.