サポートされる環境
Firebase JavaScript SDK は、次の環境で正式にサポートされています。
ブラウザ
Firebase プロダクト | 角 | ファイアフォックス | クロム | iOS サファリ | サファリ |
---|---|---|---|---|---|
分析 | |||||
認証 | |||||
クラウド ファイアストア | (を除外する 永続性) | (を除外する 持続性 iOS < 10 の場合) | |||
クラウド機能 | |||||
Firebase のインストール | |||||
クラウド メッセージング | (Edge 17+、モバイルを除く) | ||||
クラウドストレージ | |||||
パフォーマンス監視 | |||||
リアルタイム データベース | |||||
リモート設定 |
その他の環境
Firebase プロダクト | リアクトネイティブ | Node.js | クロム 拡張機能 | コルドバ |
---|---|---|---|---|
分析 | ||||
認証 | (注を参照) | (注を参照) | (注を参照) | (注を参照) |
クラウド ファイアストア | (を除外する 永続性) | (を除外する 永続性) | ||
クラウド機能 | ||||
Firebase のインストール | ||||
クラウド メッセージング | ||||
クラウドストレージ | (を除外する アップロード) | |||
パフォーマンス監視 | ||||
リアルタイム データベース | ||||
リモート設定 |
ポリフィル
Firebase JavaScript SDK は、ウェブ プラットフォームの最新の標準に基づいて構築されています。古いブラウザや JavaScript 環境の中には、Firebase に必要なすべての機能をサポートしていないものがあります。これらのブラウザ/環境をサポートする必要がある場合は、それに応じてポリフィルをロードする必要があります。
以下のセクションでは、必要なポリフィルのほとんどを特定しています。
必要なポリフィル
環境 | ポリフィル |
---|---|
サファリ 7 & 8 & 9 | ES安定 |
ノード < 6.5 | ES安定 |
オプションのポリフィル
環境 | ポリフィル | Firebase プロダクト |
---|---|---|
| フェッチ |
|
| base-64 |
|
推奨されるポリフィル
ポリフィル | ライセンス |
---|---|
ES安定 | MIT |
フェッチ | MIT |
base-64 | MIT |
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;
}
アプリケーションにポリフィルを追加する
オプション 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 を使用しない場合にポリフィルを管理するのに便利な方法です。ただし、本番アプリではこのオールインワン オプションはお勧めしません。不要なポリフィルが含まれる可能性が高く、ページの重量が増加し、ページの読み込み時間が長くなるからです。