Catch up on everthing we announced at this year's Firebase Summit. Learn more

Pelajari lebih lanjut tentang Web dan Firebase

Saat mengembangkan aplikasi Web menggunakan Firebase, Anda mungkin menemukan konsep yang tidak dikenal, atau area di mana Anda memerlukan 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 tercakup di halaman ini, kunjungi salah satu dari kami komunitas online . 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 Firebase telah dipertahankan 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 harus mengadopsi versi 9.
  • Modular versi 9. SDK ini memperkenalkan pendekatan modular yang menyediakan mengurangi ukuran SDK dan efisiensi yang lebih besar dengan yang modern JavaScript membangun alat-alat seperti Webpack atau Rollup .

Versi 9 terintegrasi dengan baik dengan alat pembangunan yang menghapus kode yang tidak digunakan di aplikasi Anda, sebuah proses yang dikenal sebagai "pengguncangan pohon". Aplikasi yang dibuat dengan SDK ini mendapat manfaat dari ukuran footprint yang sangat berkurang. 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 seperti versi 8, organisasi kodenya berbeda. Umumnya, versi 8 berorientasi pada namespace dan pola layanan, sedangkan versi 9 berorientasi pada fungsi diskrit. Sebagai contoh, versi 8 ini dot-chaining, seperti firebaseApp.auth() , diganti dalam versi 9 oleh satu getAuth() fungsi yang mengambil firebaseApp dan kembali sebuah contoh Authentication.

Ini berarti bahwa aplikasi Web yang dibuat dengan versi 8 atau yang lebih lama memerlukan pemfaktoran ulang untuk memanfaatkan pendekatan modular versi 9. Firebase menyediakan perpustakaan yang kompatibel untuk memudahkan transisi itu; lihat panduan peningkatan untuk rincian 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 bersama dengan beberapa opsi untuk menambahkan/memasang SDK.

Tambahkan SDK dengan 8.0 (Berspasi 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 lebih lanjut, lihat Cara untuk menambahkan SDK Web untuk aplikasi Anda dan Firebase Web SDK varian nanti halaman ini.

Versi 9 untuk aplikasi baru

Jika Anda mulai pada integrasi baru dengan Firebase, Anda dapat memilih ke versi 9 SDK ketika Anda menambahkan dan menginisialisasi SDK .

Ketika Anda mengembangkan aplikasi Anda, perlu diingat bahwa kode Anda akan diselenggarakan terutama di sekitar 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 rincian, lihat panduan untuk setiap area produk serta dokumentasi referensi versi 9 .

Cara menambahkan SDK Web ke aplikasi Anda

Firebase menyediakan library JavaScript untuk sebagian besar produk Firebase, termasuk Remote Config, FCM, dan lainnya. Cara Anda menambahkan SDK Firebase ke aplikasi Web Anda 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 dapat menambahkan salah satu perpustakaan yang tersedia untuk aplikasi Anda melalui salah satu metode yang didukung:

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

Untuk instruksi pengaturan rinci, lihat Tambah Firebase ke App JavaScript Anda . Sisa bagian ini berisi informasi untuk membantu Anda memilih dari opsi yang tersedia.

npm

Mengunduh paket Firebase npm (yang mencakup browser dan bundel 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 rendering sisi server (SSR) dari kerangka kerja SSR.

Menggunakan NPM dengan modul bundler seperti Webpack atau Rollup menyediakan pilihan optimasi untuk "pohon-goyang" kode yang tidak digunakan dan menerapkan polyfills ditargetkan, yang dapat sangat mengurangi ukuran jejak dari aplikasi Anda. Menerapkan fitur-fitur ini dapat menambah beberapa kerumitan pada konfigurasi dan rantai pembangunan Anda, tetapi berbagai alat CLI utama dapat membantu menguranginya. Alat-alat ini termasuk sudut , Bereaksi , Vue , Berikutnya , dan lain-lain.

Singkatnya:

  • Memberikan pengoptimalan ukuran aplikasi yang berharga
  • Perkakas 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 tidak asing bagi banyak pengembang. Dengan menggunakan CDN untuk menambahkan SDK, Anda tidak memerlukan alat build, dan rantai build Anda mungkin cenderung lebih sederhana dan lebih mudah digunakan dibandingkan dengan bundler modul. Jika Anda tidak terlalu peduli dengan ukuran aplikasi yang diinstal dan tidak memiliki persyaratan khusus seperti transpiling dari TypeScript, maka CDN bisa menjadi pilihan yang baik.

Singkatnya:

  • Akrab dan sederhana
  • Sesuai ketika ukuran aplikasi bukan masalah utama
  • Sesuai 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.
  • Bundel Node.js sisi klien yang mendukung banyak—tetapi tidak semua— fitur Firebase. Lihat daftar lingkungan 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 untuk mengatur akses administratif dari lingkungan istimewa (seperti server) menggunakan Firebase Admin SDK sebagai gantinya.

Deteksi lingkungan dengan bundler dan kerangka kerja

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

Jika kode Anda menggunakan Node.js require pernyataan, SDK menemukan bundel Node-spesifik. Jika tidak, pengaturan bundler Anda harus benar pikir untuk mendeteksi kanan lapangan entry point di Anda package.json file (misalnya, main , browser , atau module ). Jika Anda mengalami kesalahan waktu proses dengan SDK, periksa untuk memastikan bundler Anda dikonfigurasi untuk memprioritaskan jenis bundel yang benar untuk lingkungan Anda.

Pelajari tentang objek konfigurasi Firebase

Untuk menginisialisasi Firebase di aplikasi Anda, Anda harus menyediakan konfigurasi proyek Firebase aplikasi Anda. Anda dapat memperoleh Anda Firebase konfigurasi objek setiap saat.

  • Kami tidak menyarankan manual mengedit objek konfigurasi Anda, terutama berikut diperlukan "Pilihan Firebase": 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 dalam proyek Firebase Anda, objek konfigurasi Anda berisi bidang measurementId . Pelajari lebih lanjut tentang bidang ini di Analytics mendapatkan halaman dimulai .

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

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

Perpustakaan yang tersedia

Opsi pengaturan tambahan

Penundaan pemuatan Firebase SDK (dari CDN)

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

  1. Tambahkan defer bendera untuk setiap script tag untuk Firebase SDK, kemudian menunda inisialisasi Firebase menggunakan script kedua, misalnya:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Buat init-firebase.js file, kemudian termasuk berikut 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 itu dengan dua cara yang setara:

Versi web 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();

versi web 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 proyek Firebase tetapi menyimpan file di proyek Firebase yang berbeda. Atau Anda mungkin ingin mengautentikasi satu proyek sambil menjaga proyek kedua tidak diautentikasi.

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

Versi web 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);

versi web 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 menyajikan aplikasi web dari server, bukan dari sistem file lokal. Anda dapat menggunakan Firebase CLI untuk menjalankan server lokal.

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

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

  1. Kunjungi dokumentasi Firebase CLI untuk belajar bagaimana untuk menginstal CLI atau update ke versi terbaru .

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

    firebase init

  3. Mulai server lokal untuk pembangunan. Jalankan perintah berikut dari akar direktori aplikasi lokal Anda:

    firebase serve

Sumber daya sumber terbuka untuk Firebase JavaScript SDK

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

SDK JavaScript Firebase

Kebanyakan Firebase SDK JavaScript dikembangkan sebagai perpustakaan open source di masyarakat kita repositori Firebase GitHub .

Sampel memulai cepat

Firebase mengelola kumpulan contoh panduan memulai untuk sebagian besar Firebase API di Web. Cari QuickStarts ini di depan umum kami Firebase GitHub quickstart repositori . Anda dapat menggunakan panduan memulai ini sebagai kode contoh untuk menggunakan SDK Firebase.