在渐进式 Web 应用 (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。

请按照我们的入门指南向您的 Web 应用添加 Firebase。

安全可靠

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

通过 HTTPS 提供 PWA

高性能托管服务

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

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

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

提供安全的身份验证流程

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

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，您的 Web 应用还可以提供由 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 可保留登录数据的本地缓存，允许以前登录的用户即使在离线时也能保持身份验证。登录状态观测器 (observer) 将正常运行并触发，即使您的用户在离线时重新加载应用：

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