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

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

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

На этой странице представлен обзор того, как платформа 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 поддерживает офлайн-сохранение данных , что позволяет уровню данных вашего приложения прозрачно работать в автономном режиме. В сочетании с сервис-воркерами для кэширования статических ресурсов ваш 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);
    });