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

漸進式網頁應用程式 (PWA) 是遵循 一組規範 主要提供可靠、快速且引人入勝的使用體驗。

Firebase 提供多種服務，可協助您有效新增漸進式 功能，以符合許多 PWA 最佳做法，包括：

PWA 最佳做法 Firebase 服務可提供哪些協助
安全無虞
  • Firebase Hosting 會佈建安全資料傳輸層 (SSL) 自訂網域和預設 Firebase 均免費的憑證 子網域。
  • Firebase Authentication 可讓您登入使用者 在不同裝置上安全地執行各種操作
  • FirebaseUI 會導入最佳做法 驗證流程
縮短載入時間
  • Firebase Hosting 支援 HTTP/2，且可以快取 存取全域 CDN 中的靜態和動態內容
  • Firebase JavaScript SDK 屬於模組化，您可以 可在需要時動態匯入程式庫
網路韌性
  • 有了「Cloud Firestore」，你可以儲存及存取 即時和離線資料
  • Firebase Authentication 會維護使用者的驗證 甚至離線
與使用者互動交流
  • Firebase Cloud Messaging 可讓你傳送推送訊息 傳送給使用者的裝置。
  • Cloud Functions for Firebase 可讓您自動執行 根據雲端事件建立再參與訊息

本頁將概略說明 Firebase 平台如何協助您建構應用程式 這個新型的高效能 PWA Firebase JavaScript SDK。

請造訪我們的 入門指南 將 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。

快速載入時間

良好的效能能改善使用者體驗、有助於留住使用者，且 提升轉換成效良好，例如 和 "互動所需時間", 是 PWA 的重要條件

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

高效能的代管服務

Firebase Hosting 為您的 內容 全球 CDN 與 HTTP/2 相容當您使用 Firebase 託管靜態資產時， 不必多費工夫 這項服務。

快取動態內容

有了 Firebase Hosting，您的網頁應用程式也能提供動態內容， 由 Cloud Functions 或 Cloud Run 容器化應用程式。使用此應用程式 就可以快取動態內容 。

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 快取靜態資產 就能完全在離線狀態下運作。您可以設定離線資料持續性 使用一行程式碼：

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