在漸進式網頁應用程式 (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);

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

在不同裝置上登入使用者

在各個裝置上登入

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

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

載入時間短

效能優異可提升使用者體驗、留住使用者，並提高轉換率。優異的效能 (例如「首次有內容繪製時間」和「可互動時間」較短) 是 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);
    });