プログレッシブ ウェブアプリで Firebase を使用する

プログレッシブ ウェブアプリ(PWA)とは、信頼性が高く、高速で魅力的なユーザー エクスペリエンスを実現するための一連のガイドラインに従っているウェブアプリです。

Firebase では、PWA のベスト プラクティスを実装できるように、プログレッシブ機能をアプリに効率的に追加するためのいくつかのサービスを提供しています。

PWA のベスト プラクティス Firebase サービスでできること
安全性
  • Firebase Hosting: カスタム ドメインとデフォルトの Firebase サブドメインのための無料の SSL 証明書をプロビジョニングします。
  • Firebase Authentication: ユーザーが複数のデバイスで安全にログインできるようにします。
  • FirebaseUI: 認証フローに関するベスト プラクティスを実装します。
高速な読み込み時間
  • Firebase Hosting: HTTP/2 をサポートし、静的コンテンツと動的コンテンツの両方をグローバル CDN にキャッシュします。
  • Firebase JavaScript SDK: モジュール形式であり、必要に応じてライブラリを動的にインポートできます。
ネットワークの耐障害性
  • Cloud Firestore: データの保存とアクセスをリアルタイムとオフラインの両方で可能にします。
  • Firebase Authentication: ユーザーの認証状態をオフラインでも維持します。
ユーザーを引きつける
  • Firebase Cloud Messaging: プッシュ通知をユーザーのデバイスに送信できるようにします。
  • Cloud Functions for Firebase: クラウド イベントに基づいた再エンゲージメント メッセージを自動化できます。

このページでは、クロスブラウザの Firebase JavaScript SDK を使用して Firebase プラットフォームで最新の高性能 PWA を構築する方法について説明します。

Firebase を使用して PWA を作成する例については、オープンソースのサンプル アプリケーション FriendlyPix をご覧ください。Firebase をウェブアプリに追加する方法についてはスタートガイドをご覧ください。

安全性

サイトの提供から認証フローの実装まで、PWA によって安全かつ信頼できるワークフローが提供されることは非常に重要です。

HTTPS 経由での PWA の提供

高性能なホスティング サービス

HTTPS はウェブサイトの完全性を確保し、ユーザーのプライバシーとセキュリティを保護します。PWA は HTTPS 経由で提供する必要があります。

Firebase Hosting は、デフォルトでアプリのコンテンツを HTTPS 経由で提供します。コンテンツは無料の Firebase サブドメイン、または独自のカスタム ドメインから提供できます。このホスティング サービスでは、カスタム ドメイン用の SSL 証明書を無料で自動的にプロビジョニングできます。

Firebase プラットフォームで PWA をホストする方法については、Firebase Hosting のスタートガイドをご覧ください。

安全な認証フローの提供

FirebaseUI では、Firebase Authentication に基づいたすぐに使えるレスポンシブ認証フローが提供されています。これにより、安全で洗練されたログインフローをアプリに簡単に統合できます。FirebaseUI は、認証フローのベスト プラクティスに従っており、ユーザーのデバイスの画面サイズに合わせて自動的に調整されます。

すぐに使えるレスポンシブ認証フロー

FirebaseUI は複数のログイン プロバイダをサポートしています。以下のように、ログイン プロバイダ用に構成された数行のコードを指定するだけで、FirebaseUI 認証フローをアプリに追加できます。

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
};

// Initialize the FirebaseUI widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);

FirebaseUI で提供されている各種構成オプションの詳細については、GitHub にあるドキュメントをご覧ください。

複数のデバイスでのユーザー ログイン

複数のデバイスでのログイン

FirebaseUI を使用してワンタップ ログインを統合すると、ユーザーはログイン認証情報を設定した別のデバイスからでも自動的にアプリにログインできます。

FirebaseUI を使用してワンタップ ログインを有効にするには、構成内の 1 行を次のように変更します。

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-success',
  authMethod: 'https://accounts.google.com',
  signInOptions: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  // Enable one-tap sign-in.
  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
};

FirebaseUI で提供されている各種構成オプションの詳細については、GitHub にあるドキュメントをご覧ください。

高速な読み込み時間

優れたパフォーマンスを実現することによって、ユーザー エクスペリエンスが向上し、ユーザーの維持やコンバージョンの増大につながります。優れたパフォーマンスの基準として、First Meaningful Paint(最初の有意義な描画)が行われるまでの時間や、操作可能になるまでの時間が短いことなどが挙げられます。これらは PWA にとって重要な要件です。

静的アセットの効率的な提供

高性能なホスティング サービス

Firebase Hostingグローバル CDN 経由でコンテンツを配信し、HTTP/2 と互換性があります。静的アセットを Firebase でホストする場合、そのすべての構成は Google によって行われます。このサービスを利用するにあたり、ユーザーが特別に行う必要のある操作はありません。

動的コンテンツのキャッシュ

Firebase Hosting では、Cloud Functions によってサーバー側で生成された動的コンテンツもウェブアプリで提供できます。このサービスを使用すると、次の 1 行のコードを追加するだけで強力なグローバル CDN で動的コンテンツをキャッシュできます。

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

このサービスを使用すると、バックエンドに対する余計な呼び出しが回避され、迅速なレスポンスとコスト削減を実現できます。

Cloud Functions で生成された動的なコンテンツを提供する方法、Firebase Hosting で CDN キャッシュを有効にする方法については、こちらのドキュメントをご覧ください。

必要に応じたサービスの読み込み

Firebase JavaScript SDK を部分的にインポートして、初期ダウンロード サイズを最小限に抑えることができます。このモジュール形式の SDK を利用すれば、アプリに必要な Firebase サービスを必要に応じてインポートできます。

たとえば、アプリの最初の描画が行われるまでの時間を高速化するには、アプリで最初に Firebase Authentication を読み込みます。その他の Firebase サービス(Cloud Firestore など)は、アプリで必要になったときに読み込みます。

次のように Webpack などのパッケージ マネージャを使用して、最初に Firebase Authentication を読み込むことができます。

import firebase from 'firebase/app';
import 'firebase/auth';

// Load Firebase project configuration.
const app = firebase.initializeApp(firebaseConfig);

次に、データレイヤーにアクセスする必要が生じたら、動的インポートを使用して Cloud Firestore ライブラリを読み込みます。

import('firebase/firestore').then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

Firebase を使用した部分的なインポートや動的インポートの例については、その手法を示したオープンソースのサンプル アプリケーション FriendlyPix をご覧ください。

ネットワークの耐障害性

ユーザーのインターネット アクセスが不安定な場合があります。PWA はネイティブのモバイルアプリと同様に動作し、可能な限りオフラインでも機能します。

オフラインでアプリデータにアクセスする

Cloud Firestoreオフライン データの永続性をサポートしているため、アプリのデータレイヤーをオフラインでも透過的に機能させることができます。Service Worker と組み合わせて静的アセットをキャッシュすることで、PWA はオフラインで完全に機能できるようになります。オフライン データの永続性は、わずか 1 行のコードで有効にすることができます。

firebase.firestore().enablePersistance().then(() => {
  const firestore = app.firestore();
  // Use Cloud Firestore ...
});

認証状態をオフラインで維持する

Firebase Authentication はログインデータのローカル キャッシュを保持するため、ログイン済みのユーザーはオフラインであっても認証状態が維持されます。ユーザーがオフライン中にアプリを再読み込みした場合でも、ログイン状態オブザーバーが正常に機能してトリガーされます。

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed-in ...
  } else {
    // User is signed out ...
  }
});

Cloud FirestoreFirebase Authentication の使用を開始するためのドキュメントをご覧ください。

ユーザーを引きつける

ユーザーはアプリの新機能がいつリリースされるのかを知りたがっており、アプリの開発者はユーザーの関心を常に引きつけておきたいと考えています。そのためには、積極的かつ責任を持ってユーザーにリーチできるように PWA を設定します。

ユーザーにプッシュ通知を表示する

Firebase Cloud Messaging では、サーバーからユーザーのデバイスにプッシュ通知を送信できます。このサービスを使用すると、アプリが閉じているときでもユーザーに対してタイムリーな通知を表示できます。

ユーザーの再エンゲージメントを自動化する

Cloud Functions for Firebase を使用して、クラウド イベント(Cloud Firestore へのデータの書き込みユーザー アカウントの削除など)に基づいた再エンゲージメント メッセージをユーザーに送信します。ユーザーが新しいフォロワーを獲得したときに、次のようなプッシュ通知をユーザーに送信することもできます。

// Send push notification when user gets a new follower.
exports.sendNotification = functions.database.ref('/followers/{userUID}/{followerUID}')
    .onWrite((change, context) => {
      const userUID = context.params.userUID;
      const followerUID = context.params.followerUID;

      const tokens = getUserDeviceTokens(userUID);
      const name = getUserDisplayName(followerUID);

      // Notification details.
      const payload = {
        notification: {
          title: 'You have a new follower!',
          body: `${name} is now following you.`
        }
      };
      return admin.messaging().sendToDevice(tokens, payload);
    });

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。