Используйте Firebase в прогрессивном веб-приложении (PWA)

Прогрессивные веб-приложения (PWA) — это веб-приложения, которые следуют набору правил , призванных обеспечить вашим пользователям надежный, быстрый и увлекательный опыт.

Firebase предлагает несколько сервисов, которые помогут вам эффективно добавлять прогрессивные функции в ваше приложение, чтобы соответствовать многим передовым практикам PWA, в том числе:

Лучшая практика PWA Как могут помочь сервисы Firebase
Безопасно и надежно
  • Firebase Hosting предоставляет бесплатные SSL-сертификаты для вашего пользовательского домена и поддомена Firebase по умолчанию.
  • Firebase Authentication позволяет безопасно авторизовать пользователей на всех устройствах.
  • FirebaseUI реализует лучшие практики для потоков аутентификации.
Быстрая загрузка
  • Firebase Hosting поддерживает HTTP/2 и может кэшировать как статический, так и динамический контент на глобальной сети CDN.
  • Firebase JavaScript SDK является модульным, и вы можете динамически импортировать библиотеки по мере необходимости.
Устойчивость сети
  • С помощью Cloud Firestore вы можете хранить данные и получать к ним доступ в режиме реального времени и офлайн.
  • Firebase Authentication сохраняет состояние аутентификации пользователя даже в автономном режиме.
Привлекайте пользователей
  • Firebase Cloud Messaging позволяет отправлять push-сообщения на устройства ваших пользователей.
  • С помощью Cloud Functions for Firebase вы можете автоматизировать отправку сообщений о повторном взаимодействии на основе событий в облаке.

На этой странице представлен обзор того, как платформа Firebase может помочь вам создать современное высокопроизводительное PWA с использованием нашего кроссбраузерного Firebase JavaScript SDK .

Ознакомьтесь с нашим руководством по началу работы , чтобы добавить Firebase в свое веб-приложение.

Безопасно и надежно

От обслуживания вашего сайта до реализации процесса аутентификации крайне важно, чтобы ваше PWA обеспечивало безопасный и надежный рабочий процесс.

Обслуживайте PWA через HTTPS

Эффективный хостинг

HTTPS защищает целостность вашего веб-сайта и защищает конфиденциальность и безопасность ваших пользователей. PWA должны обслуживаться через HTTPS.

Firebase Hosting по умолчанию обслуживает содержимое вашего приложения через HTTPS. Вы можете обслуживать свой контент на бесплатном поддомене Firebase или на вашем собственном домене . Наш хостинг-сервис автоматически и бесплатно предоставляет сертификат SSL для вашего домена.

Ознакомьтесь с руководством по началу работы с Firebase Hosting чтобы узнать, как разместить PWA на платформе Firebase.

Предложите безопасный процесс аутентификации

Быстродействующий поток аутентификации

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 ) и включить кэширование CDN с помощью Firebase Hosting .

Загружайте услуги только тогда, когда они необходимы

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 Workers для кэширования ваших статических активов ваш 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, чтобы активно и ответственно обращаться к своим пользователям.

Показывайте push-уведомления своим пользователям

С Firebase Cloud Messaging вы можете отправлять соответствующие уведомления с вашего сервера на устройства ваших пользователей. Эта услуга позволяет вам отображать своевременные уведомления для ваших пользователей, даже если приложение закрыто.

Автоматизируйте повторное вовлечение пользователей

Используя Cloud Functions for Firebase , отправляйте пользователям сообщения о повторном вовлечении на основе событий в облаке, например, запись данных в Cloud Firestore или удаление учетной записи пользователя . Вы также можете отправлять push-уведомления пользователю , когда у него появляется новый подписчик :

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