Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

WebとFirebaseの詳細

Firebaseを使用してWebアプリを開発しているときに、見慣れない概念や、プロジェクトの正しい決定を行うためにより多くの情報が必要な領域に遭遇する可能性があります。このページは、これらの質問に答えたり、詳細を知るためのリソースを紹介したりすることを目的としています。

このページでカバーされていないトピックについて質問がある場合は、私たちの1訪問オンラインコミュニティを。また、このページは定期的に新しいトピックで更新されるため、学習したいトピックが追加されているかどうかを確認してください。

SDKバージョン8および9

FirebaseはWebアプリ用に2つのSDKバージョンを提供しており、そのうちの1つは現在ベータ版です。

  • バージョン8これはFirebaseは数年のために維持し、既存のFirebaseアプリケーションとWeb開発者にはよく知られていることをJavaScriptのインタフェースです。
  • モジュラーバージョン9(ベータ版)。このSDKは、次のような近代的なJavaScriptのビルドツールで還元SDKのサイズと大きな効率を提供モジュラーアプローチ紹介WebPACKのか、ロールアップを

バージョン9は、アプリで使用されていないコードを取り除くビルドツールとうまく統合されます。これは「ツリーシェイク」と呼ばれるプロセスです。このSDKで構築されたアプリは、サイズのフットプリントが大幅に削減されるというメリットがあります。バージョン8はモジュールとして入手可能ですが、厳密にモジュール化された構造を持たず、同程度のサイズ縮小を提供しません。

バージョン9SDKの大部分はバージョン8と同じパターンに従いますが、コードの構成は異なります。一般に、バージョン8は名前空間とサービスパターンを対象としていますが、バージョン9は個別の機能を対象としています。例えば、バージョン8つのドット・チェーンなど、 firebaseApp.auth() 、単一によってバージョン9で置換されgetAuth()とる関数firebaseAppし、認証インスタンスを返します。

つまり、バージョン8以前で作成されたWebアプリは、バージョン9のモジュラーアプローチを利用するためにリファクタリングが必要です。 Firebaseは、その移行を容易にする互換ライブラリを提供します。参照アップグレードガイド詳細については、を。

何がサポートされていますか?

バージョン8とバージョン9(ベータ版)のコードスタイルは異なりますが、Firebaseの機能とオプションについては非常によく似たサポートを提供します。このガイドで詳しく説明するように、両方のSDKバージョンは、SDKを追加/インストールするためのいくつかのオプションとともにJavaScriptとNode.jsのバリアントをサポートしています。

SDKを追加する8.0(名前空間) 9.0(モジュラーベータ)
npm
  • JavaScriptの場合
  • Node.jsの場合
  • JavaScriptの場合
  • Node.jsの場合
CDN(コンテンツ配信ネットワーク)
  • JavaScriptの場合
  • JavaScriptの場合
ホスティングURL
  • JavaScriptの場合
  • Node.jsの場合

詳細については、あなたのアプリケーションへのWeb SDKを追加する方法をしてFirebaseのWeb SDKは、変異体は、このページに後で。

新しいアプリのバージョン9

あなたはFirebaseとの新しい統合を開始している場合は、とき、あなたはバージョン9のベータ版SDKに選ぶことができます追加して、SDKを初期化します

あなたのアプリを開発する際、あなたのコードが機能を中心に、主に開催されることに注意してください。バージョン9では、サービスが最初の引数として渡され、関数はサービスの詳細を使用して残りを実行します。例えば:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

以上の実施例および詳細については、各製品領域のためのガイドとしてだけでなく、参照バージョン9参照ドキュメントを

アプリにWebSDKを追加する方法

Firebaseは、Remote Config、FCMなどを含むほとんどのFirebase製品にJavaScriptライブラリを提供します。 Firebase SDKをWebアプリに追加する方法は、アプリにFirebase Hostingを使用することを選択したかどうか、アプリで使用しているツール(モジュールバンドラーなど)、またはアプリがブラウザー以外で実行されているかどうかによって異なります。 Node.jsなどの環境。

あなたは、任意の追加することができます使用可能なライブラリをサポートする方法のうちの1つを介して、あなたのアプリに:

  • npm(モジュールバンドラーおよびNode.js用)
  • CDN(コンテンツ配信ネットワーク)
  • FirebaseホスティングURL

各メソッドの詳細な設定手順については、 JavaScriptのアプリケーションにFirebaseを追加します。このセクションの残りの部分には、使用可能なオプションから選択するのに役立つ情報が含まれています。

npm

Firebase npmパッケージ(ブラウザとNode.jsバンドルの両方を含む)をダウンロードすると、Firebase SDKのローカルコピーが提供されます。これは、Node.jsアプリ、React Native、Electronなどの非ブラウザアプリケーションに必要な場合があります。ダウンロードには、一部のパッケージのオプションとしてNode.jsとReactNativeのバンドルが含まれています。 Node.jsバンドルは、SSRフレームワークのサーバー側レンダリング(SSR)ステップに必要です。

バンドラのようなモジュールでNPMを使用してWebPACKのか、ロールアップ「ツリー・シェイク」の未使用コードに最適化オプションを提供し、大幅にアプリのサイズのフットプリントを減らすことができます対象polyfillsを、適用します。これらの機能を実装すると、構成とビルドチェーンが複雑になる可能性がありますが、さまざまな主流のCLIツールがそれを軽減するのに役立ちます。これらのツールは、角度リアクトVueの次の、そして他の人を。

要約すれば:

  • 貴重なアプリサイズの最適化を提供します
  • モジュールを管理するための堅牢なツールが利用可能です
  • Node.jsを使用したSSRに必要

CDN(コンテンツ配信ネットワーク)

FirebaseのCDNに保存されているライブラリを追加することは、多くの開発者に馴染みのある単純なSDKセットアップ方法です。 CDNを使用してSDKを追加する場合、ビルドツールは必要ありません。また、ビルドチェーンは、モジュールバンドラーと比較して、よりシンプルで操作しやすい傾向があります。アプリのインストールサイズを特に気にせず、TypeScriptからのトランスパイルなどの特別な要件がない場合は、CDNが適しています。

要約すれば:

  • なじみのあるシンプルな
  • アプリのサイズが大きな問題ではない場合に適切
  • Webサイトがビルドツールを使用していない場合に適しています。

ホスティングURL

Firebase Hostingは、同じオリジンからファイルを読み込むことでパフォーマンスを向上させる予約済みURLを提供します。アプリでFirebaseHostingをすでに使用している、または使用する予定がある場合は、ホスティングURLを介してJavaScript SDKを追加し、このパフォーマンスの向上を活用できます。さらに、このメソッドはSDKの自動初期化をサポートしているため、開発、ステージング、本番などの複数の環境の管理を簡素化できます。詳細情報予約ホスティングURLを介して、SDKを追加します

要約すれば:

  • CDNよりもわずかにパフォーマンスが優れています
  • 複数の開発環境での作業を簡素化できます
  • すでにFirebaseHostingを使用しているアプリに便利

Firebase WebSDKの亜種

現在、Firebaseは2つのWebSDKバリアントを提供しています。

  • ブラウザで使用するすべてのFirebase機能をサポートするJavaScriptバンドル。
  • すべてではありませんが、多くのFirebase機能をサポートするクライアント側のNode.jsバンドル。リストを参照してください。サポートされる環境を

これらのSDKバリアントはどちらも、Node.jsデスクトップやIoTアプリケーションなど、エンドユーザーアクセス用のWebアプリまたはクライアントアプリの構築を支援するように設計されています。あなたの目標は、使用します(サーバなど)、特権の環境からの管理アクセスを設定する場合はFirebase管理SDKを代わりに。

バンドラーとフレームワークによる環境検出

npmを使用してFirebaseWeb SDKをインストールすると、JavaScriptバージョンとNode.jsバージョンの両方がインストールされます。このパッケージは、アプリケーションに適切なバンドルを有効にするための詳細な環境検出を提供します。

Node.jsのは、あなたのコードが使用されている場合はrequire書類を、SDKには、ノード固有のバンドルを検索します。そうでない場合は、お使いのバンドラの設定が正しく右エントリポイントフィールドを検出するために考え出ししなければならないpackage.jsonファイル(例えば、 mainbrowser 、またはmodule )。 SDKでランタイムエラーが発生した場合は、ご使​​用の環境に適したタイプのバンドルを優先するようにバンドラーが構成されていることを確認してください。

利用可能なライブラリ

追加のセットアップオプション

Firebase SDKの読み込みを遅らせる(CDNから)

ページ全体が読み込まれるまで、FirebaseSDKの組み込みを遅らせることができます。

  1. 追加defer毎にフラグをscript次に、例えば、第二のスクリプトを使用してFirebaseの初期化を遅らせる、FirebaseのSDKのタグ:

    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. 作成init-firebase.jsファイルを、そのファイルに次のものがあります。

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

1つのアプリで複数のFirebaseプロジェクトを使用する

ほとんどの場合、Firebaseを初期化する必要があるのは単一のデフォルトアプリだけです。そのアプリからFirebaseにアクセスするには、次の2つの方法があります。

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

ただし、複数のFirebaseプロジェクトに同時にアクセスする必要がある場合もあります。たとえば、あるFirebaseプロジェクトのデータベースからデータを読み取り、別のFirebaseプロジェクトにファイルを保存したい場合があります。または、2番目のプロジェクトを認証せずに、1つのプロジェクトを認証することもできます。

Firebase JavaScript SDKを使用すると、1つのアプリで複数のFirebaseプロジェクトを同時に初期化して使用でき、各プロジェクトは独自のFirebase構成情報を使用します。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

開発用にローカルWebサーバーを実行する

ウェブアプリを構築している場合、Firebase JavaScript SDKの一部では、ローカルファイルシステムからではなくサーバーからウェブアプリを提供する必要があります。あなたは使用することができますFirebase CLIをローカルサーバを実行します。

アプリにFirebaseHostingを既に設定している場合は、以下のいくつかの手順をすでに完了している可能性があります。

ウェブアプリを提供するには、コマンドラインツールであるFirebaseCLIを使用します。

  1. する方法を学ぶためにFirebase CLIのドキュメントをご覧くださいCLIのインストールまたはその最新バージョンにアップデートを

  2. Firebaseプロジェクトを初期化します。ローカルアプリディレクトリのルートから次のコマンドを実行します。

    firebase init

  3. ローカルサーバーを起動発展のために。ローカルアプリディレクトリのルートから次のコマンドを実行します。

    firebase serve

Firebase JavaScriptSDKのオープンソースリソース

Firebaseはオープンソース開発をサポートしており、コミュニティの貢献とフィードバックを奨励しています。

Firebase JavaScript SDK

ほとんどのFirebaseのJavaScriptのSDKは、当社の公共の場でのオープンソースライブラリとして開発されているFirebase GitHubのリポジトリ

クイックスタートサンプル

Firebaseは、Web上のほとんどのFirebaseAPIのクイックスタートサンプルのコレクションを維持しています。私たちの公共の場でこれらのクイックスタートを探すFirebase GitHubのクイックスタートリポジトリ。これらのクイックスタートは、FirebaseSDKを使用するためのサンプルコードとして使用できます。