Firebase 将于 4 月 9 日至 11 日重返 Cloud Next 大会。立即报名。

本頁面由 Cloud Translation API 翻譯而成。

在漸進式網頁應用程式 (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 提供的各種設定選項。

載入速度快

良好的效能可改善使用者體驗、留住使用者，並提高轉換率。良好的效能 (例如低的「第一個有意義的繪製時間」和「互動時間」) 是 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 支援離線資料持久性，可讓應用程式的資料層以透明的方式在離線狀態下運作。搭配使用服務工作者來快取靜態資產，您的 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);
    });