在漸進式網頁應用程式 (PWA) 中使用 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 平台如何協助您使用跨瀏覽器 Firebase JavaScript SDK 建構現代化、高效能的 PWA。

請參閱入門指南，瞭解如何將 Firebase 新增至網頁應用程式。

安全無虞

從提供網站到實作驗證流程，PWA 必須提供安全可靠的工作流程。

透過 HTTPS 提供 PWA

高效能託管服務

HTTPS 可確保網站的健全性，還能保護使用者的隱私和安全。PWA 必須透過 HTTPS 提供。

Firebase Hosting 預設會透過 HTTPS 提供應用程式內容。您可以使用免付費的 Firebase 子網域或自己的自訂網域提供內容。我們的代管服務會自動為您的自訂網域佈建 SSL 憑證，不收取任何費用。

請參閱 Firebase Hosting 入門指南，瞭解如何在 Firebase 平台託管 PWA。

提供安全的驗證流程

置入式回應式驗證流程

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

請參閱 GitHub 中的說明文件，進一步瞭解 FirebaseUI 提供的各種設定選項。

讓使用者在不同裝置上登入

跨裝置登入

使用 FirebaseUI 整合一鍵登入功能後，應用程式就能自動登入使用者，即使使用者在不同裝置上設定登入憑證也沒問題。

只要變更一行設定，即可使用 FirebaseUI 啟用一鍵登入功能：

// 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
};

請參閱 GitHub 中的說明文件，進一步瞭解 FirebaseUI 提供的各種設定選項。

載入速度快

良好的效能可改善使用者體驗、留住使用者，並提高轉換率。畫面首次有效顯示所需時間和 Time to Interactive 較短等優異效能，是 PWA 的重要要求。

有效率地提供靜態素材資源

高效能託管服務

Firebase Hosting會透過全球 CDN 提供內容，且與 HTTP/2 相容。使用 Firebase 託管靜態資產時，我們會為您完成所有設定，您不需要採取任何額外行動，即可使用這項服務。

快取動態內容

透過 Firebase Hosting，網頁應用程式也能提供由 Cloud Functions 或Cloud Run容器化應用程式在伺服器端產生的動態內容。使用這項服務，您只要一行程式碼，就能在強大的全球 CDN 上快取動態內容：

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

這項服務可避免對後端發出額外呼叫、加快回應速度，並降低成本。

請參閱說明文件，瞭解如何提供動態內容 (由 Cloud Functions 或 Cloud Run 支援)，以及如何透過 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 ...
});

網路韌性

使用者可能沒有可靠的網路連線能力。PWA 的行為應與原生行動應用程式類似，且應盡可能在離線狀態下運作。

離線存取應用程式資料

Cloud Firestore 支援離線資料持續性，可讓應用程式的資料層在離線狀態下順暢運作。搭配 Service Worker 快取靜態資產，PWA 就能完全離線運作。只要一行程式碼，就能啟用離線資料持續性：

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