在漸進式網頁應用程式 (PWA) 中使用 Firebase

漸進式網頁應用程式 (PWA) 是遵循一系列指南的網頁應用程式，可確保使用者享有可靠、快速且引人入勝的體驗。

Firebase 提供多種服務，可協助您有效率地新增漸進式功能至應用程式，以滿足許多 PWA 最佳做法，包括：

PWA 最佳做法	Firebase 服務可提供哪些協助
安全無虞	Firebase 託管為您的自訂網域和預設 Firebase 子網域佈建 SSL 憑證，無須額外付費。 Firebase 驗證可讓您讓使用者在不同裝置上安全地登入。 FirebaseUI 會實作驗證流程的最佳做法。
縮短載入時間	Firebase 託管支援 HTTP/2，並可快取全球 CDN 上的靜態和動態內容。 Firebase JavaScript SDK 是模組化的，您可視需要動態匯入程式庫。
網路韌性	有了 Cloud Firestore，您可以即時儲存及存取資料， Firebase 驗證會維護使用者的驗證狀態，即使離線也一樣。
與使用者互動交流	Firebase 雲端通訊可讓您將推送訊息傳送至使用者的裝置。 透過 Cloud Functions for Firebase，您可以根據雲端事件自動處理再參與訊息。

本頁面將概略說明 Firebase 平台���何協助您利用我們的跨瀏覽器 Firebase JavaScript SDK，建構現代化的高效能 PWA。

請參閱我們的入門指南，將 Firebase 新增至您的網頁應用程式。

安全無虞

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

透過 HTTPS 提供您的 PWA

HTTPS 能保護網站的完整性，並保護使用者的隱私和安全。PWA 必須透過 HTTPS 提供。

根據預設，Firebase 代管會透過 HTTPS 提供應用程式內容。您可以在免費 Firebase 子網域或自己的自訂網域提供內容。我們的代管服務會自動為您的自訂網域佈建 SSL 憑證，而且完全免費。

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

提供安全的驗證流程

FirebaseUI 提供以 Firebase 驗證為基礎的內建回應式驗證流程，可讓您的應用程式輕鬆整合複雜安全的登入流程。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 提供的各種設定選項。

快速載入時間

良好效能能改善使用者體驗、有助於留住使用者並提升轉換。良好的效能 (例如「第一個有意義的繪製時間」和「互動所需時間」) 是 PWA 的重要需求。

有效率地放送靜態素材資源

Firebase 代管會透過全域 CDN 提供您的內容，並且與 HTTP/2 相容。當您使用 Firebase 託管靜態資產時，系統就會為您設定所有權限，因此您不用另外執行任何操作，就能使用這項服務。

快取動態內容

有了 Firebase 託管，網頁應用程式也可以提供 Cloud Functions 或 Cloud Run 容器化應用程式在伺服器端產生的動態內容。透過這項服務，您可以使用以下一行程式碼，在強大的全球 CDN 上快取動態內容：

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

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

請參閱我們的說明文件，瞭解如何提供動態內容 (由 Cloud Functions 或 Cloud Run 技術提供)，以及如何透過 Firebase 託管啟用 CDN 快取。

只在必要時載入服務

您可以部分匯入 Firebase JavaScript SDK，盡量減少初始下載大小。只要使用這個模組化 SDK，就能匯入應用程式只在必要時所需的 Firebase 服務。

舉例來說，如要提高應用程式初始的繪製速度，應用程式必須先載入 Firebase 驗證。等到應用程式需要這些元件時，再載入其他 Firebase 服務，例如 Cloud Firestore。

使用 webpack 等套件管理工具，先載入 Firebase 驗證：

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 驗證會將登入資料的本機快取保存下來，讓先前登入的使用者即使處於離線狀態，仍會保持驗證狀態。即使使用者在離線期間重新載入應用程式，登入狀態觀察器仍會正常運作並觸發：

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

如要開始使用 Cloud Firestore 和 Firebase 驗證，請參閱說明文件。

吸引使用者

使用者會想知道何時發布新的應用程式功能，因此您希望維持較高的使用者參與度。設定 PWA，以主動且負責的態度與使用者聯繫。

向使用者顯示推播通知

使用 Firebase 雲端通訊，您就能從伺服器推送相關通知到使用者的裝置。這項服務可讓您在關閉應用程式的情況下，及時向使用者顯示通知。

自動吸引使用者再次參與

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