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

漸進式 Web 應用程式 (PWA) 是遵循一組準則的Web 應用程序,旨在確保您的使用者擁有可靠、快速且引人入勝的體驗。

Firebase 提供多種服務,可協助您有效率地為應用程式添加漸進式功能,以滿足許多 PWA 最佳實踐,包括:

漸進式Web應用最佳實踐Firebase 服務如何提供協助
安全可靠
  • Firebase 託管免費為您的自訂網域和預設 Firebase 子網域提供 SSL 憑證。
  • Firebase 驗證可讓您跨裝置安全地登入使用者。
  • FirebaseUI實現了身份驗證流程的最佳實務。
快速載入時間
  • Firebase 託管支援 HTTP/2,並且可以在全域 CDN 上快取靜態和動態內容。
  • Firebase JavaScript SDK是模組化的,您可以在需要時動態導入程式庫。
網路彈性
  • 借助Cloud Firestore ,您可以即時和離線儲存和存取資料。
  • Firebase 驗證可維護使用者的驗證狀態,即使處於離線狀態也是如此。
吸引用戶
  • 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 託管入門指南,以了解如何在 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 託管,您的 Web 應用程式還可以提供由Cloud FunctionsCloud 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 Authentication 。然後,當您的應用程式需要它們時,您可以載入其他 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 Workers 來快取您的靜態資產,您的 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 FirestoreFirebase 驗證

吸引用戶

您的用戶想知道您何時發布應用程式的新功能,並且您希望保持較高的用戶參與度。設定 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);
    });