Firebase JavaScript SDK 支援的環境

支援的環境

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

瀏覽器

Firebase 產品 Edge Firefox Chrome iOS Safari Safari
App Check
Analytics
Authentication
Cloud Firestore
(保留
除外)

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

其他環境

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

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

(請參閱附註)

(請參閱附註)

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

(保留
除外)
Cloud Functions
Firebase 安裝
Cloud Messaging
Cloud Storage
(
上傳內容除外)
Performance Monitoring
Realtime Database
Remote Config
Vertex AI in Firebase

填充

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

以下各節說明您可能會需要的多數 polyfill。

必要的 polyfill

環境 聚合物
Safari 7、8 和 9 西班牙穩定版
節點 < 10 ES 穩定版

選用 polyfill

環境 Polyfills Firebase 產品
  • Safari 10.1 以下版本
  • iOS 10.3 以下版本
fetch
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Performance Monitoring
  • 節點 < 18
擷取
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Cloud Storage
  • React Native and Expo (反應 Native 和展覽會)
base-64
  • Cloud Storage

建議的 polyfill

Polyfills 授權
ES 穩定版 麻省理工學院
擷取 -「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,導致網頁重量增加,進而延長網頁載入時間。