サポートされる環境
Firebase JavaScript SDK は次の環境で正式にサポートされています。
ブラウザ
| Firebase プロダクト | Edge | Firefox | Chrome | iOS Safari | Safari |
|---|---|---|---|---|---|
| App Check | |||||
| アナリティクス | |||||
| Authentication | |||||
| Cloud Firestore | （永続性 は除く） |
（iOS 10 未満の場合、 永続性 は除く） |
|||
| Cloud Functions | |||||
| Firebase インストール | |||||
| Cloud Messaging | （Edge 17 以降、モバイルを除く） |
||||
| Cloud Storage | |||||
| Performance Monitoring | |||||
| Realtime Database | |||||
| Remote Config |
その他の環境
| Firebase プロダクト | React Native | Node.js | Chrome 拡張機能 |
Cordova |
|---|---|---|---|---|
| App Check | （ネイティブ デバイスの認証にカスタム プロバイダを使用） |
（カスタム プロバイダを使用） |
||
| アナリティクス | ||||
| Authentication | （注を参照） |
（注を参照） |
（注を参照） |
（注を参照） |
| Cloud Firestore | （永続性 は除く） |
（永続性 は除く） |
||
| Cloud Functions | ||||
| Firebase インストール | ||||
| Cloud Messaging | ||||
| Cloud Storage | （アップロード は除く） |
|||
| Performance Monitoring | ||||
| Realtime Database | ||||
| Remote Config |
ポリフィル
Firebase JavaScript SDK は、最新のウェブ プラットフォーム標準に基づいて構築されています。古いブラウザや JavaScript 環境の中には、Firebase に必要なすべての機能をサポートしていないものがあります。そのようなブラウザや環境をサポートする必要がある場合は、適宜ポリフィルを読み込む必要があります。
必要になる可能性があるポリフィルを以下のセクションに示します。
必須のポリフィル
| 環境 | ポリフィル |
|---|---|
| Safari 7、8、9 | ES Stable |
| Node 6.5 未満 | ES Stable |
任意のポリフィル
| 環境 | ポリフィル | Firebase プロダクト |
|---|---|---|
|
fetch |
|
|
Base64 |
|
推奨されるポリフィル
| ポリフィル | ライセンス |
|---|---|
| ES Stable | MIT |
| fetch | MIT |
| Base64 | MIT |
React Native と Expo に必須のポリフィルの設定
React Native と Expo では、Base64 でエンコードされた文字列をアップロードする場合、次のことを行う必要があります。
npm から Base64 をインストールします。
npm install base-64
base-64 から decode をインポートし、atob としてグローバル スコープに接続して、Cloud Storage がアクセスできるようにします。
import { decode } from 'base-64';
if(typeof atob === 'undefined') {
global.atob = decode;
}
アプリケーションにポリフィルを追加する
オプション 1: （推奨）Babel と統合されたバンドラを使用する
バンドラを使用している場合は、Babel や @babel/preset-env と統合してポリフィルを取得します。
Babel をバンドラと統合する方法については、Babel のインタラクティブな設定ガイドをご覧ください。
Babel を使うと、含める必要のあるポリフィルについて細かく気にする必要がなくなります。サポートする必要がある最小限のブラウザ環境を指定するだけで済みます。あとは Babel が必要なポリフィルを追加してくれます。Firebase や独自のコードが新しい ES の機能を使い始めても、Babel によってブラウザ サポートの要件が常に満たされることが保証されます。
@babel/preset-env には構成オプションに関する詳しい情報が記載されています。環境ターゲットの指定（オプション targets）や、ポリフィルの追加（オプション useBuiltIns）などのオプションがあります。
オプション 2: （非推奨）ポリフィルを手動で追加する
お気に入りのポリフィル ライブラリ（core-js など）を使用して、ポリフィルを手動で追加できます。
import 'core-js/stable'
import 'cross-fetch/polyfill';
core-js には、HTML ページに直接含めることができるオールインワンのポリフィル ファイルも用意されています。
Babel を使用しない場合、このオプションはポリフィルを管理するのに便利な方法です。ただし、このオールインワン オプションを本番環境用アプリに使用することはおすすめしません。これには不要なポリフィルが含まれる可能性が高く、ページが重くなって読み込み時間が長くなるためです。