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 的
持續性
除外)
Cloud Functions
Cloud Messaging
(Edge 17 以上版本，不含行動裝置)
Cloud Storage
Firebase 次安裝
Performance Monitoring
Realtime Database
Remote Config
SQL Connect

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
Cloud Messaging
Cloud Storage
(上傳內容
除外)
Firebase 次安裝
Performance Monitoring
Realtime Database
Remote Config
SQL Connect

1 Firebase AI Logic 舊稱為「Vertex AI in Firebase」。

Polyfill

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

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

必要的 Polyfill

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

選用 polyfill

環境 Polyfill 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 和 Expo
 base-64
  • Cloud Storage

建議的 Polyfill

Polyfill 授權
ES 穩定版 麻省理工學院
fetch - `cross-fetch` - 最適合舊版瀏覽器 麻省理工學院
fetch - `undici` - 最適合 Node.js 麻省理工學院
base-64 麻省理工學院

React Native 和 Expo 的必要 Polyfill 設定

如果是 React Native 和 Expo，上傳以 Base-64 編碼的字串時，請按照下列步驟操作：

從 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

如果您使用套件組合器，請與 Babel 和 @babel/preset-env 整合，以取得 polyfill。

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

有了 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 也提供多合一 polyfill 檔案，可直接加入 HTML 網頁。

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