Lingkungan yang didukung untuk Firebase JavaScript SDK

Lingkungan yang didukung

Firebase JavaScript SDK secara resmi didukung di lingkungan berikut.

Penting: Anda masih perlu menyertakan polyfill untuk lingkungan yang tidak mendukung fitur yang diperlukan oleh Firebase.

Browser

Produk Firebase	Edge	Firefox	Chrome	iOS Safari	Safari
Firebase AI Logic ^1
Analytics
App Check
Authentication
Cloud Firestore	(kecuali persistensi)			(kecuali persistensi jika iOS < 10)
Cloud Functions
Penginstalan Firebase
Cloud Messaging	(Edge 17+, kecuali perangkat seluler)
Cloud Storage
Data Connect
Performance Monitoring
Realtime Database
Remote Config

^{1 Firebase AI Logic sebelumnya disebut "Vertex AI in Firebase".}

Lingkungan lain

Produk Firebase	React Native	Node.js (18+)	Ekstensi Chrome	Cordova
Firebase AI Logic ^1
App Check	(menggunakan penyedia kustom untuk melakukan pengesahan perangkat native)	(menggunakan penyedia kustom)
Analytics
Authentication	(lihat Catatan)	(lihat Catatan)	(lihat Catatan)	(lihat Catatan)
Cloud Firestore	(kecuali persistensi)	(kecuali persistensi)
Cloud Functions
Data Connect
Penginstalan Firebase
Cloud Messaging
Cloud Storage	(kecuali upload)
Performance Monitoring
Realtime Database
Remote Config

^{1 Firebase AI Logic sebelumnya disebut "Vertex AI in Firebase".}

Catatan: Semua fitur Authentication didukung, kecuali autentikasi ponsel dan operasi OAuth popup/pengalihan.

Polyfill

Firebase JavaScript SDK dibuat berdasarkan standar platform web terbaru. Beberapa browser yang lebih lama dan lingkungan JavaScript tidak mendukung semua fitur yang diperlukan oleh Firebase. Jika Anda harus mendukung browser/lingkungan ini, Anda perlu memuat polyfill.

Bagian di bawah mengidentifikasi sebagian besar polyfill yang mungkin Anda butuhkan.

Polyfill yang dibutuhkan

Lingkungan	Polyfill
Safari 7 & 8 & 9	ES Stable
Node < 10	ES Stable

Polyfill opsional

Lingkungan	Polyfill	Produk Firebase
Safari < 10.1 iOS < 10.3	fetch	Authentication Cloud Firestore Cloud Functions Performance Monitoring
Node < 18	fetch	Authentication Cloud Firestore Cloud Functions Cloud Storage
React Native dan Expo	base-64	Cloud Storage

Polyfill yang disarankan

Polyfill	Lisensi
ES Stable	MIT
fetch - `cross-fetch` - paling cocok untuk browser lama	MIT
fetch - `undici` - paling cocok untuk Node.js	MIT
base-64	MIT

Penyiapan Polyfill yang diperlukan untuk React Native dan Expo

Untuk React Native dan Expo, jika Anda mengupload string berenkode base-64, lakukan langkah berikut:

Instal base-64 dari npm:

npm install base-64

Impor decode dari base-64 dan lampirkan ke cakupan global sebagai atob agar Cloud Storage dapat mengaksesnya.

import { decode } from 'base-64';

if(typeof atob === 'undefined') {
  global.atob = decode;
}

Menambahkan polyfill di aplikasi Anda

Opsi 1: (Direkomendasikan) Menggunakan bundler yang terintegrasi dengan Babel

Jika Anda menggunakan pemaket, integrasikan dengan Babel dan @babel/preset-env untuk mendapatkan polyfill.

Gunakan panduan penyiapan Babel yang interaktif untuk mempelajari cara mengintegrasikan Babel dengan bundler Anda.

Dengan Babel, Anda tidak perlu khawatir tentang polyfill mana yang harus disertakan. Sebaliknya, Anda dapat menentukan lingkungan browser minimal yang perlu didukung. Kemudian, Babel akan menambahkan polyfill yang diperlukan untuk Anda. Babel akan memastikan bahwa persyaratan Anda untuk dukungan browser selalu terpenuhi, meskipun Firebase atau kode Anda sendiri mulai menggunakan fitur ES baru.

@babel/preset-env memiliki informasi mendetail mengenai opsi konfigurasi yang tersedia untuk menentukan target lingkungan (opsi targets) dan menambahkan polyfill (opsi useBuiltIns).

Catatan: Jika Anda menggunakan framework, tugas untuk mengonfigurasi Babel dan menambahkan polyfill dapat berbeda atau sebenarnya sudah ditangani untuk Anda. Pelajari panduan penyiapan Babel yang interaktif untuk mengetahui informasi lebih lanjut.

Opsi 2: (Tidak Direkomendasikan) Menambahkan polyfill secara manual

Anda dapat menambahkan polyfill secara manual menggunakan library polyfill favorit (misalnya, core-js).

import 'core-js/stable'
import 'cross-fetch/polyfill';

core-js juga menyediakan file polyfill all-in-one yang dapat Anda sertakan secara langsung di halaman HTML.

Opsi ini bisa menjadi cara yang praktis untuk mengelola polyfill jika Anda tidak menggunakan Babel. Namun, sebaiknya jangan gunakan opsi all-in-one ini untuk aplikasi produksi karena kemungkinan akan menyertakan polyfill yang tidak perlu. Hal ini menyebabkan peningkatan berat halaman dan waktu muat halaman.