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

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

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

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

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

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

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

Обслуживание вашего PWA через HTTPS

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

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

Посетите руководство по началу работы с хостингом Firebase , чтобы узнать, как разместить 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 обслуживает ваш контент через глобальную CDN и совместим с HTTP/2. Когда вы размещаете свои статические ресурсы с помощью Firebase, мы настраиваем все это за вас — вам не нужно делать ничего дополнительно, чтобы воспользоваться этой услугой.

Кэшируйте свой динамический контент

Благодаря хостингу Firebase ваше веб-приложение также может обслуживать динамический контент , созданный на стороне сервера с помощью Cloud Functions или контейнерного приложения Cloud Run . Используя этот сервис, вы можете кэшировать свой динамический контент в мощной глобальной CDN с помощью одной строки кода:

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

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

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

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

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 вы можете отправлять соответствующие уведомления со своего сервера на устройства ваших пользователей. Этот сервис позволяет отображать своевременные уведомления вашим пользователям, даже когда приложение закрыто.

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

Используя облачные функции для 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);
    });