Firebase JavaScript SDK 支援的環境

支援的環境

Firebase JavaScript SDK 在下列環境中獲得正式支援。

瀏覽器

Firebase 產品 Edge Firefox Chrome iOS Safari Safari
Firebase AI Logic 1
Analytics
App Check
Authentication
Cloud Firestore
(
持久性除外)

(如果 iOS 版本低於 10,則不包含
persistence
)
Cloud Functions
Firebase 安裝次數
Cloud Messaging
(Edge 17 以上版本,行動裝置除外)
Cloud Storage
Data Connect
Performance Monitoring
Realtime Database
Remote Config

1 Firebase AI Logic 之前稱為「Vertex AI in Firebase」。

其他環境

Firebase 產品 React Native Node.js (18 以上) Chrome
擴充功能
Cordova
Firebase AI Logic 1
App Check
(使用自訂提供者執行原生裝置認證)

(使用自訂提供者)
Analytics
Authentication
(請參閱附註)

(請參閱附註)

(請參閱附註)

(請參閱附註)
Cloud Firestore
(
持久性除外)

(
持久性除外)
Cloud Functions
Data Connect
Firebase 安裝次數
Cloud Messaging
Cloud Storage
(
上傳內容除外)
Performance Monitoring
Realtime Database
Remote Config

1 Firebase AI Logic 之前稱為「Vertex AI in Firebase」。

填充物

Firebase JavaScript SDK 是根據網頁平台的最新標準建構而成。部分舊版瀏覽器和 JavaScript 環境不支援 Firebase 所需的所有功能。如果您必須支援這些瀏覽器/環境,就必須相應載入 polyfill。

以下各節會說明您可能需要的大部分 polyfill。

必要的 polyfill

環境 Polyfills
Safari 7、8 和 9 ES 穩定版
節點 < 10 ES 穩定版

選用 polyfill

環境 Polyfills Firebase 產品
  • Safari < 10.1
  • iOS 10.3 以下
fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Performance Monitoring
  • 節點 < 18
fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Cloud Storage
  • React Native 和 Expo
base-64
  • Cloud Storage

建議的 polyfill

Polyfills 授權
ES Stable 麻省理工學院
fetch - `cross-fetch` - 適用於舊版瀏覽器 麻省理工學院
fetch - `undici` - 最適合 Node.js 麻省理工學院
base-64 麻省理工學院

React Native 和 Expo 的必要 Polyfill 設定

如果您要上傳以 Base64 編碼的字串,請針對 React Native 和 Expo 執行下列操作:

從 npm 安裝 base-64

npm install base-64

base-64 匯入 decode,並將其附加至全域範圍,做為 atob,以便 Cloud Storage 存取。

import { decode } from 'base-64';

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

在應用程式中新增 polyfill

選項 1(建議) 使用與 Babel 整合的 bundler

如果您使用的是 bundler,請整合 Babel@babel/preset-env,以便取得 polyfill。

請參閱 Babel 的互動式設定指南,瞭解如何將 Babel 與 Bundler 整合。

使用 Babel 時,您不必擔心要納入哪些 polyfill。而是指定您需要支援的最小瀏覽器環境。接著,Babel 會為您新增必要的 polyfill。即使 Firebase 或您自己的程式碼開始使用新的 ES 功能,Babel 也會確保您對瀏覽器支援的要求一律能滿足。

@babel/preset-env 提供詳細資訊,說明可用於指定環境目標 (選項 targets) 和新增 polyfill (選項 useBuiltIns) 的可用設定選項。

選項 2(不建議使用) 手動新增 polyfill

您可以使用所需的 polyfill 程式庫 (例如 core-js) 手動新增 polyfill。

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

core-js 也提供一體式填充檔案,可直接納入 HTML 頁面。

如果您不使用 Babel,這個選項可方便管理 polyfill。不過,我們不建議在正式版應用程式中使用這項綜合選項,因為這可能會包含不必要的 polyfill,導致網頁重量增加,進而延長網頁載入時間。