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

Pelajari lebih lanjut tentang Web dan Firebase

Saat Anda 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 komunitas online kami. Kami juga akan memperbarui halaman ini dengan topik baru secara berkala, jadi periksa kembali untuk mengetahui apakah kami telah menambahkan topik yang ingin Anda pelajari.

SDK versi 8 dan 9

Firebase menyediakan dua versi SDK untuk aplikasi Web, salah satunya saat ini dalam Beta:

  • Versi 8. Ini adalah antarmuka JavaScript yang dipertahankan Firebase selama beberapa tahun dan familiar bagi pengembang Web dengan aplikasi Firebase yang ada.
  • Versi modular 9 (Beta) . SDK ini memperkenalkan pendekatan modular yang mengurangi 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 "gemetar pohon". Aplikasi yang dibuat dengan SDK ini mendapatkan keuntungan 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, pengaturan kodenya berbeda. Umumnya, versi 8 berorientasi pada namespace dan pola layanan, sedangkan versi 9 berorientasi pada fungsi diskrit. Misalnya, dot-chaining versi 8, seperti firebaseApp.auth() , di versi 9 diganti dengan satu fungsi getAuth() yang menggunakan firebaseApp dan menampilkan instance Authentication.

Artinya, aplikasi Web yang dibuat dengan versi 8 atau yang lebih lama memerlukan pemfaktoran ulang untuk memanfaatkan pendekatan modular versi 9. Firebase menyediakan pustaka compat untuk memudahkan transisi itu; lihat panduan peningkatan untuk detail lebih lanjut.

Apa yang didukung?

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

Tambahkan SDK dengan 8.0 (Namespaced) 9.0 (Modular Beta)
npm
  • Untuk JavaScript
  • Untuk Node.js
  • Untuk JavaScript
  • Untuk Node.js
CDN (Jaringan Pengiriman Konten)
  • Untuk JavaScript
  • Segera hadir untuk JavaScript
URL hosting
  • Untuk JavaScript
  • Untuk Node.js
  • Segera hadir untuk JavaScript dan Node.js

Untuk informasi selengkapnya, lihat Cara menambahkan SDK Web 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 ke dalam versi 9 Beta SDK saat Anda menambahkan dan menginisialisasi SDK .

Saat Anda mengembangkan aplikasi, perlu diingat bahwa kode Anda akan diatur 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 detail selengkapnya, lihat panduan untuk setiap area produk serta dokumentasi referensi versi 9 .

Cara menambahkan SDK Web ke aplikasi Anda

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

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

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

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

npm

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

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

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 pemaket modul. Jika Anda tidak terlalu khawatir tentang ukuran terinstal aplikasi Anda dan tidak memiliki persyaratan khusus seperti transpiling dari TypeScript, CDN bisa menjadi pilihan yang baik.

Singkatnya:

  • Akrab dan sederhana
  • Sesuai jika ukuran aplikasi bukan menjadi perhatian utama
  • Sesuai jika situs Anda tidak menggunakan alat pembuat.

URL hosting

Firebase Hosting menyediakan URL khusus yang memungkinkan Anda meningkatkan performa dengan memuat file dari sumber yang sama. Jika Anda sudah menggunakan atau berencana untuk menggunakan Firebase Hosting di aplikasi Anda, Anda dapat menambahkan JavaScript SDK melalui URL Hosting dan mendapatkan keuntungan dari perolehan performa ini. Selain itu, metode ini mendukung inisialisasi otomatis SDK, yang dapat menyederhanakan pengelolaan berbagai lingkungan seperti dev, staging, dan produksi. Pelajari lebih lanjut tentang menambahkan SDK melalui URL Hosting yang dicadangkan .

Singkatnya:

  • Memberikan sedikit keunggulan kinerja dibandingkan CDN
  • Dapat menyederhanakan bekerja di berbagai lingkungan pengembangan
  • Nyaman untuk aplikasi yang sudah menggunakan Firebase Hosting

Varian Firebase Web SDK

Saat ini, Firebase menyediakan dua varian SDK Web:

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

Deteksi lingkungan dengan bundler dan kerangka kerja

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 require Node.js, SDK menemukan paket khusus Node. Jika tidak, pengaturan bundler Anda harus diatur dengan benar untuk mendeteksi bidang titik masuk yang benar dalam file package.json Anda (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.

Perpustakaan yang tersedia

Opsi penyiapan tambahan

Penundaan pemuatan SDK Firebase (dari CDN)

Anda dapat menunda penyertaan SDK Firebase hingga seluruh halaman telah dimuat.

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

    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Buat file init-firebase.js , lalu sertakan yang berikut ini di 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:

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

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

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var 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 membiarkan 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.

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

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var 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 Anda 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 melayani aplikasi web Anda, Anda akan menggunakan Firebase CLI, alat baris perintah.

  1. Kunjungi dokumentasi Firebase CLI untuk mempelajari cara menginstal 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

Sumber daya sumber terbuka untuk Firebase JavaScript SDK

Firebase mendukung pengembangan open source, dan kami mendorong kontribusi dan umpan balik komunitas.

Firebase JavaScript SDK

Sebagian besar Firebase JavaScript SDK dikembangkan sebagai pustaka sumber terbuka di repositori Firebase GitHub publik kami.

Contoh panduan mulai cepat

Firebase menyimpan kumpulan sampel panduan mulai cepat untuk sebagian besar API Firebase di Web. Temukan panduan memulai ini di repositori panduan memulai GitHub Firebase publik kami. Anda dapat menggunakan panduan memulai ini sebagai kode contoh untuk menggunakan SDK Firebase.