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

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

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

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

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',  // the URL to direct to upon 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 を使用して　One Tap サインインを統合すると、ユーザーはログイン認証情報を設定した別のデバイスからでも自動的にアプリにログインできます。

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

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'URL',  // the URL to direct to upon 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 または Cloud Run コンテナ化アプリによってサーバーサイドで生成された動的コンテンツを提供します。このサービスを使用すると、次の 1 行のコードを追加するだけで強力なグローバル CDN で動的コンテンツをキャッシュできます。

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

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

Firebase Hosting を使用して CDN キャッシングを有効にし、動的コンテンツ（Cloud Functions または Cloud Run によって生成）を提供する方法については、ドキュメントをご覧ください。

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

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 ...
});

ネットワークの耐障害性

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

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

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

firebase.firestore().enablePersistence().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 Firestore と Firebase 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);
    });