转到控制台

在渐进式网页应用中使用 Firebase

渐进式网页应用 (PWA) 遵循一系列准则,旨在确保您的用户获得可靠、快速和引人入胜的体验。

Firebase 提供多种服务,可帮助您有效地向应用添加渐进式功能,以符合许多 PWA 最佳做法,包括:

PWA 最佳做法 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 的示例,请参阅我们的开源示例应用 FriendlyPix。请按照我们的入门指南向您的网页应用添加 Firebase。

安全可靠

从提供网站服务到实现身份验证流程,PWA 提供安全可靠的工作流程始终至关重要。

通过 HTTPS 提供 PWA

高性能托管服务

HTTPS 可保护您网站的完整性,并保护用户的隐私和安全。PWA 必须通过 HTTPS 提供。

默认情况下,Firebase 托管通过 HTTPS 提供您应用的内容。您可以在免费的 Firebase 子网域或您自己的自定义网域上提供您的内容。我们的托管服务会自动为自定义网域配置 SSL 证书。

如需了解如何在 Firebase 平台上托管 PWA,请访问 Firebase 托管入门指南

提供安全的身份验证流程

FirebaseUI 提供基于 Firebase 身份验证的普适性自适应身份验证流程,使您的应用可以轻松集成先进而安全的登录流程。FirebaseUI 会自动适应用户设备的屏幕大小,并遵循身份验证流程的最佳做法。

普适性自适应身份验证流程

FirebaseUI 支持多个登录提供方。只需为登录提供方配置几行代码,即可将 FirebaseUI 身份验证流程添加到您的应用中:

// FirebaseUI config.
var uiConfig = {
  signInSuccessUrl: 'url-to-redirect-to-on-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-to-redirect-to-on-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 托管通过全球级 CDN 提供您的内容,并且与 HTTP/2 兼容。当您借助 Firebase 托管静态资源时,我们会为您配置所有这一切 - 您无需进行任何额外的操作即可利用此服务。

缓存动态内容

借助 Firebase 托管,您的网页应用还可以投放由 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 身份验证。然后,您可以在您的应用需要时再加载其他 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 ...
});

如需查看使用 Firebase 进行部分和动态导入的示例,请参阅我们的开源示例应用 FriendlyPix,该示例应用演示了此技术

网络弹性

您的用户可能没有可靠的互联网访问权限。PWA 的行为应与原生移动应用类似,并应尽可能离线运行。

离线访问应用数据

Cloud Firestore 支持离线数据持久化,使您的应用的数据层可以透明地离线工作。与 Service Workers 结合使用可以缓存静态资源,因而您的 PWA 可以完全离线运行。您可以使用一行代码实现离线数据持久化:

firebase.firestore().enablePersistance().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 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);
    });