Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Pelajari lebih lanjut tentang Web dan Firebase

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Saat Anda mengembangkan aplikasi Web menggunakan Firebase, Anda mungkin menemukan konsep asing, atau area di mana Anda membutuhkan lebih banyak informasi untuk membuat keputusan yang tepat untuk proyek Anda. Halaman ini bertujuan untuk menjawab pertanyaan tersebut atau mengarahkan Anda ke sumber daya untuk mempelajari lebih lanjut.

Jika Anda memiliki pertanyaan tentang topik yang tidak dibahas di laman ini, kunjungi salah satu komunitas daring kami . Kami juga akan memperbarui halaman ini dengan topik baru secara berkala, jadi periksa kembali untuk melihat apakah kami telah menambahkan topik yang ingin Anda pelajari.

SDK versi 8 dan 9

Firebase menyediakan dua versi SDK untuk aplikasi Web:

  • Versi 8. Ini adalah antarmuka JavaScript yang telah dipertahankan Firebase selama beberapa tahun dan akrab bagi pengembang Web dengan aplikasi Firebase yang ada. Karena Firebase akan menghapus dukungan untuk versi ini setelah satu siklus rilis utama, aplikasi baru sebaiknya mengadopsi versi 9.
  • Versi modular 9 . SDK ini memperkenalkan pendekatan modular yang memberikan pengurangan ukuran SDK dan efisiensi yang lebih besar dengan alat pembuatan JavaScript modern seperti webpack atau Rollup .

Versi 9 terintegrasi dengan baik dengan alat build yang menghapus kode yang tidak digunakan di aplikasi Anda, sebuah proses yang dikenal sebagai "tree-shaking". Aplikasi yang dibuat dengan SDK ini mendapat manfaat dari jejak ukuran yang jauh lebih kecil. Versi 8, meskipun tersedia sebagai modul, tidak memiliki struktur modular yang ketat dan tidak memberikan tingkat pengurangan ukuran yang sama.

Meskipun sebagian besar SDK versi 9 mengikuti pola yang sama dengan versi 8, pengaturan kodenya berbeda. Secara umum, versi 8 berorientasi pada ruang nama dan pola layanan, sedangkan versi 9 berorientasi pada fungsi diskrit. Misalnya, dot-chaining versi 8, seperti firebaseApp.auth() , diganti di versi 9 dengan satu fungsi getAuth() yang menggunakan firebaseApp dan mengembalikan instance Authentication.

Ini berarti bahwa aplikasi Web yang dibuat dengan versi 8 atau sebelumnya memerlukan pemfaktoran ulang untuk memanfaatkan pendekatan modular versi 9. Firebase menyediakan pustaka compat untuk memudahkan transisi tersebut; lihat panduan pemutakhiran untuk perincian lebih lanjut.

Apa yang didukung?

Meskipun versi 8 dan versi 9 memiliki gaya kode yang berbeda, keduanya memberikan dukungan yang sangat mirip untuk fitur dan opsi Firebase. Seperti yang akan kami jelaskan secara mendetail dalam panduan ini, kedua versi SDK mendukung varian JavaScript dan Node.js beserta beberapa opsi untuk menambahkan/memasang SDK.

Tambahkan SDK dengan 8.0 (Spasi nama) 9.0 (Modular)
npm
  • Untuk JavaScript
  • Untuk Node.js
  • Untuk JavaScript
  • Untuk Node.js
CDN (Jaringan Pengiriman Konten)
  • Untuk JavaScript
  • Untuk JavaScript
URL hosting
  • Untuk JavaScript
  • Untuk Node.js

Untuk informasi selengkapnya, lihat Cara menambahkan Web SDK ke aplikasi Anda dan varian Firebase Web SDK nanti di halaman ini.

Versi 9 untuk aplikasi baru

Jika Anda memulai integrasi baru dengan Firebase, Anda dapat ikut serta dalam SDK versi 9 saat menambahkan dan menginisialisasi SDK .

Saat Anda mengembangkan aplikasi, ingatlah bahwa kode Anda akan diatur terutama di seputar fungsi . Di versi 9, layanan diteruskan sebagai argumen pertama, dan fungsi kemudian menggunakan detail layanan untuk melakukan sisanya. Sebagai contoh:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Untuk contoh dan detail selengkapnya, lihat panduan untuk setiap area produk serta dokumentasi referensi versi 9 .

Cara menambahkan Web SDK ke aplikasi Anda

Firebase menyediakan pustaka JavaScript untuk sebagian besar produk Firebase, termasuk Remote Config, FCM, dan lainnya. Bagaimana Anda menambahkan Firebase SDK ke aplikasi Web bergantung pada alat apa yang Anda gunakan dengan aplikasi Anda (seperti bundler modul), atau jika aplikasi Anda berjalan di lingkungan non-browser seperti Node.js.

Anda bisa menambahkan salah satu pustaka yang tersedia ke aplikasi Anda melalui salah satu metode yang didukung:

  • npm (untuk pemaket modul dan Node.js)
  • CDN (jaringan pengiriman konten)

Untuk petunjuk penyiapan mendetail, lihat Menambahkan Firebase ke Aplikasi JavaScript Anda . Bagian selanjutnya berisi informasi untuk membantu Anda memilih dari opsi yang tersedia.

npm

Mengunduh paket npm Firebase (yang mencakup bundel browser dan Node.js) memberi Anda salinan lokal SDK Firebase, yang mungkin diperlukan untuk aplikasi non-browser seperti aplikasi Node.js, React Native, atau Electron. Unduhan menyertakan bundel Node.js dan React Native sebagai opsi untuk beberapa paket. Bundel Node.js diperlukan untuk langkah pembuatan sisi server (SSR) dari kerangka kerja SSR.

Menggunakan npm dengan bundler modul seperti webpack atau Rollup menyediakan opsi pengoptimalan untuk "tree-shake" kode yang tidak digunakan dan menerapkan polyfill yang ditargetkan, yang dapat sangat mengurangi jejak ukuran aplikasi Anda. Mengimplementasikan fitur-fitur ini dapat menambah kerumitan pada konfigurasi dan rantai build Anda, tetapi berbagai alat CLI arus utama dapat membantu menguranginya. Alat-alat ini termasuk Angular , React , Vue , Next , dan lainnya.

Kesimpulan:

  • Memberikan pengoptimalan ukuran aplikasi yang berharga
  • Alat yang kuat tersedia untuk mengelola modul
  • Diperlukan untuk SSR dengan Node.js

CDN (jaringan pengiriman konten)

Menambahkan pustaka yang disimpan di CDN Firebase adalah metode penyiapan SDK sederhana yang mungkin sudah tidak asing lagi bagi banyak pengembang. Dengan menggunakan CDN untuk menambahkan SDK, Anda tidak memerlukan alat build, dan rantai build Anda mungkin cenderung lebih sederhana dan mudah digunakan dibandingkan dengan pemaket modul. Jika Anda tidak terlalu mengkhawatirkan ukuran pemasangan aplikasi Anda dan tidak memiliki persyaratan khusus seperti mentranspilasi dari TypeScript, maka CDN bisa menjadi pilihan yang baik.

Kesimpulan:

  • Akrab dan sederhana
  • Cocok jika ukuran aplikasi tidak menjadi perhatian utama
  • Cocok bila website Anda tidak menggunakan build tools.

Varian Firebase Web SDK

Saat ini, Firebase menyediakan dua varian Web SDK:

  • Paket JavaScript yang mendukung semua fitur Firebase untuk digunakan di browser.
  • Paket Node.js sisi klien yang mendukung banyak—tetapi tidak semua— fitur Firebase. Lihat daftar lingkungan yang didukung .

Kedua varian SDK ini dirancang untuk membantu membangun aplikasi web atau aplikasi klien untuk akses pengguna akhir, seperti di desktop Node.js atau aplikasi IoT. Jika tujuan Anda adalah menyiapkan akses administratif dari lingkungan istimewa (seperti server), gunakan Firebase Admin SDK sebagai gantinya.

Deteksi lingkungan dengan bundler dan framework

Saat Anda menginstal Firebase Web SDK menggunakan npm, versi JavaScript dan Node.js akan diinstal. Paket ini menyediakan deteksi lingkungan mendetail untuk mengaktifkan bundel yang tepat untuk aplikasi Anda.

Jika kode Anda menggunakan pernyataan Node.js require , SDK akan menemukan bundel khusus Node. Jika tidak, pengaturan bundler Anda harus diatur dengan benar untuk mendeteksi kolom titik masuk yang tepat di file package.json Anda (misalnya, main , browser , atau module ). Jika Anda mengalami kesalahan runtime dengan SDK, periksa untuk memastikan pemaket Anda dikonfigurasi untuk memprioritaskan jenis bundel yang benar untuk lingkungan Anda.

Pelajari tentang objek konfigurasi Firebase

Untuk menginisialisasi Firebase di aplikasi Anda, Anda perlu menyediakan konfigurasi proyek Firebase aplikasi Anda. Anda bisa mendapatkan objek konfigurasi Firebase Anda kapan saja.

  • Kami tidak menyarankan untuk mengedit objek konfigurasi Anda secara manual, terutama "Opsi Firebase" yang diperlukan berikut ini: apiKey , projectId , dan appID . Jika Anda menginisialisasi aplikasi dengan nilai yang tidak valid atau tidak ada untuk "opsi Firebase" yang diperlukan ini, pengguna aplikasi Anda mungkin mengalami masalah serius.

  • Jika Anda mengaktifkan Google Analytics di proyek Firebase, objek konfigurasi Anda berisi kolom measurementId . Pelajari lebih lanjut bidang ini di halaman memulai Analytics .

  • Jika Anda mengaktifkan Google Analytics atau Realtime Database setelah membuat Aplikasi Web Firebase, pastikan objek konfigurasi Firebase yang Anda gunakan di aplikasi diperbarui dengan nilai konfigurasi terkait ( measurementId dan databaseURL , masing-masing). Anda bisa mendapatkan objek konfigurasi Firebase Anda kapan saja.

Inilah format objek konfigurasi dengan semua layanan diaktifkan (nilai-nilai ini diisi secara otomatis):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Pustaka yang tersedia

Opsi penyiapan tambahan

Menunda pemuatan Firebase SDK (dari CDN)

Anda dapat menunda penyertaan Firebase SDK hingga seluruh halaman dimuat. Jika Anda menggunakan skrip CDN versi 9 dengan <script type="module"> , ini adalah perilaku default. Jika Anda menggunakan skrip CDN versi 8 sebagai modul, selesaikan langkah-langkah berikut untuk menunda pemuatan:

  1. Tambahkan flag defer ke setiap tag script untuk Firebase SDK, lalu tunda inisialisasi Firebase menggunakan skrip kedua, misalnya:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Buat file init-firebase.js , lalu sertakan berikut ini di dalam file:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Gunakan beberapa proyek Firebase dalam satu aplikasi

Dalam kebanyakan kasus, Anda hanya perlu menginisialisasi Firebase dalam satu aplikasi default. Anda dapat mengakses Firebase dari aplikasi tersebut dengan dua cara yang setara:

Web version 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();

Web version 8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

Namun terkadang, Anda perlu mengakses beberapa proyek Firebase secara bersamaan. Misalnya, Anda mungkin ingin membaca data dari database satu project Firebase, tetapi menyimpan file di project Firebase yang berbeda. Atau Anda mungkin ingin mengautentikasi satu proyek sambil membiarkan proyek kedua tidak diautentikasi.

Firebase JavaScript SDK memungkinkan Anda menginisialisasi dan menggunakan beberapa proyek Firebase dalam satu aplikasi secara bersamaan, dengan setiap proyek menggunakan informasi konfigurasi Firebase-nya sendiri.

Web version 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);

Web version 8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();

Jalankan server web lokal untuk pengembangan

Jika Anda membuat aplikasi web, beberapa bagian dari Firebase JavaScript SDK mengharuskan Anda menayangkan aplikasi web dari server, bukan dari sistem file lokal. Anda dapat menggunakan Firebase CLI untuk menjalankan server lokal.

Jika sudah menyiapkan Firebase Hosting untuk aplikasi, Anda mungkin telah menyelesaikan beberapa langkah di bawah.

Untuk melayani aplikasi web Anda, Anda akan menggunakan Firebase CLI, alat baris perintah.

  1. Kunjungi dokumentasi Firebase CLI untuk mempelajari cara memasang CLI atau mengupdate ke versi terbarunya .

  2. Inisialisasi proyek Firebase Anda. Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase init

  3. Mulai server lokal untuk pengembangan. Jalankan perintah berikut dari root direktori aplikasi lokal Anda:

    firebase serve

Resource open source untuk Firebase JavaScript SDK

Firebase mendukung pengembangan sumber terbuka, dan kami mendorong kontribusi dan masukan dari komunitas.

Firebase JavaScript SDK

Sebagian besar Firebase JavaScript SDK dikembangkan sebagai pustaka open source di repositori publik Firebase GitHub kami.

Sampel quickstart

Firebase menyimpan kumpulan contoh quickstart untuk sebagian besar API Firebase di Web. Temukan quickstart ini di repositori quickstart Firebase GitHub publik kami. Anda dapat menggunakan quickstart ini sebagai kode contoh untuk menggunakan Firebase SDK.