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

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

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

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

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

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

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

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

Размещайте ваше PWA по протоколу HTTPS.

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

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

Чтобы узнать, как разместить ваше PWA на платформе Firebase, ознакомьтесь с руководством по началу работы с 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 ваше веб-приложение также может предоставлять динамический контент , генерируемый на стороне сервера с помощью Cloud Functions или контейнеризированного приложения Cloud Run . Используя этот сервис, вы можете кэшировать свой динамический контент на мощной глобальной CDN всего одной строкой кода:

res.set('Cache-Control', 'public, max-age=300, s-maxage=600');

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

Посетите нашу документацию , чтобы узнать, как вы можете предоставлять динамический контент (с помощью Cloud Functions или Cloud Run ) и включить кэширование CDN с помощью Firebase Hosting .

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

Пакет SDK Firebase JavaScript можно импортировать частично, чтобы свести к минимуму размер первоначальной загрузки. Воспользуйтесь преимуществами этого модульного 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);
    });