支援的環境
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 產品 |
---|---|---|
|
fetch |
|
|
擷取 |
|
|
base-64 |
|
建議的 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,導致網頁重量增加,進而延長網頁載入時間。