Веб-кодовая лаборатория Firebase

1. Обзор

В этом codelab, вы узнаете , как использовать Firebase легко создавать веб - приложения за счет внедрения и развертывания клиент чата с использованием продуктов и услуг Firebase.

3b1284f5144b54f6.png

Что ты узнаешь

  • Синхронизируйте данные с помощью Cloud Firestore и Cloud Storage для Firebase.
  • Аутентифицируйте своих пользователей с помощью Firebase Authentication.
  • Разверните свое веб-приложение на хостинге Firebase.
  • Отправляйте уведомления с помощью Firebase Cloud Messaging.
  • Соберите данные о производительности вашего веб-приложения.

Что вам понадобится

  • IDE текстовый редактор / вашего выбора, такие как WebStorm , Atom , возвышенного или VS кодекса
  • Менеджер пакетов НПМ , который обычно поставляется с Node.js
  • Терминал / консоль
  • Любой браузер, например Chrome.
  • Пример кода codelab (См. Следующий шаг codelab, чтобы узнать, как получить код.)

2. Получите образец кода.

Клонировать codelab в GitHub хранилище из командной строки:

git clone https://github.com/firebase/codelab-friendlychat-web

С другой стороны , если вы не установили мерзавец, вы можете загрузить архив как ZIP файл .

Импортируйте стартовое приложение

Использование IDE, открыть или импортировать 📁 web-start каталога из клонированного репозитория. Это 📁 web-start каталог содержит исходный код для codelab, который будет полностью функциональный чат веб - приложение.

3. Создайте и настройте проект Firebase.

Создать проект Firebase

  1. Войдите Firebase .
  2. В Firebase консоли выберите Add Project, а затем назовите ваш Firebase FriendlyChat проекта. Запомните идентификатор проекта для вашего проекта Firebase.
  3. Снимите флажок Включить Google Analytics для этого проекта
  4. Нажмите Создать проект.

Приложение, которое мы собираемся создать, использует продукты Firebase, доступные для веб-приложений:

  • Firebase Authentication легко разрешить пользователям войти в приложение.
  • Облако Firestore для сохранения структурированных данных в облаке и получить уведомление момент , когда данные изменения.
  • Облако для хранения Firebase сохранять файлы в облаке.
  • Firebase хостинг для размещения и обслуживания ваших активов.
  • Firebase Cloud Messaging для отправки уведомления толчка и дисплей браузера всплывающих уведомлений.
  • Firebase Performance Monitoring для сбора данных о производительности пользователей для вашего приложения.

Некоторые из этих продуктов нуждаются в особой настройке или должны быть включены с помощью консоли Firebase.

Добавить в проект веб-приложение Firebase

  1. Щелкните значок Интернета 58d6543a156e56f9.png для создания нового веб-приложения Firebase.
  2. Зарегистрировать приложение с никто Дружественного чата, а затем установите флажок рядом также настроить Firebase хостинг для этого приложения. Выберите Зарегистрировать приложение.
  3. На следующем шаге вы увидите объект конфигурации. Скопируйте только объект JS (не окружающий HTML) в firebase-config.js

Зарегистрируйте скриншот веб-приложения

Включить Google входа для проверки подлинности Firebase

Для того, чтобы позволить пользователям войти в веб - приложение со своими счетами Google, мы будем использовать знак-в Google метод.

Вам необходимо включить Вход в Google:

  1. В Firebase консоли найдите раздел сборки в левой панели.
  2. Нажмите Authentication, затем нажмите Вход в систему вкладке метод (или нажмите здесь , чтобы перейти непосредственно туда).
  3. Включение входа в Google поставщика, а затем нажмите кнопку Сохранить.
  4. Установить имя общественной стороны вашего приложения к Дружественному чату и выбрать электронную почту поддержку проекта из выпадающего меню.
  5. Настройка экрана согласия OAuth в Google Cloud Console и добавить логотип:

d89fb3873b5d36ae.png

Включить Cloud Firestore

Веб - приложение использует облако Firestore для сохранения сообщений чата и получать новые сообщения чата.

Вам нужно будет включить Cloud Firestore:

  1. В разделе сборки Firebase консоли, нажмите Firestore базы данных.
  2. Нажмите кнопку Создать базу данных в области облачных Firestore.

729991a081e7cd5.png

  1. Выберите Пуск в опции тестового режима, а затем нажмите кнопку Далее после прочтения заявления об отказе о правилах безопасности.

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

77e4986cbeaf9dee.png

  1. Укажите место, где хранятся данные Cloud Firestore. Вы можете оставить это значение по умолчанию или выбрать ближайший к вам регион. Нажмите Готово для предоставления Firestore.

9f2bb0d4e7ca49c7.png

Включить облачное хранилище

Веб-приложение использует облачное хранилище для Firebase для хранения, загрузки и обмена изображениями.

Вам необходимо включить облачное хранилище:

  1. В разделе сборки Firebase консоли, нажмите Storage.
  2. Если там нет кнопки Get Started, это не означает , что Облако хранения уже включен, и вам не нужно выполнить следующие действия.
  3. Нажмите НАЧАТЬ.
  4. Прочитайте отказ от ответственности о правилах безопасности для вашего проекта Firebase, а затем нажмите кнопку Далее.

С правилами безопасности по умолчанию любой аутентифицированный пользователь может записывать что угодно в облачное хранилище. Позже в этой лаборатории мы сделаем наше хранилище более безопасным.

62f1afdcd1260127.png

  1. Местоположение облачного хранилища предварительно выбрано с тем же регионом, который вы выбрали для своей базы данных Cloud Firestore. Нажмите Готово , чтобы завершить установку.

1d7f49ebaddb32fc.png

4. Установите интерфейс командной строки Firebase.

Интерфейс командной строки (CLI) Firebase позволяет использовать хостинг Firebase для локального обслуживания веб-приложения, а также для развертывания веб-приложения в проекте Firebase.

  1. Установите CLI, выполнив следующую команду npm:
npm -g install firebase-tools
  1. Убедитесь, что интерфейс командной строки установлен правильно, выполнив следующую команду:
firebase --version

Убедитесь, что версия Firebase CLI - v4.1.0 или новее.

  1. Авторизуйте интерфейс командной строки Firebase, выполнив следующую команду:
firebase login

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

  1. Убедитесь , что ваша командная строка доступа к ресурсам локального вашему приложения web-start каталога.
  2. Свяжите свое приложение с проектом Firebase, выполнив следующую команду:
firebase use --add
  1. При появлении запроса выберите идентификатор проекта, затем дайте Firebase проекту псевдоним.

Псевдоним полезен, если у вас несколько сред (производственная, промежуточная и т. Д.). Однако, для этого codelab, давайте просто использовать псевдоним по default .

  1. Следуйте оставшимся инструкциям в командной строке.

5. Запустите стартовое приложение локально.

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

  1. В консоли с web-start каталога, выполните следующую команду Firebase CLI:
firebase serve --only hosting
  1. В вашей командной строке должен отобразиться следующий ответ:
✔  hosting: Local server: http://localhost:5000

Мы используем хостинг Firebase эмулятор , чтобы служить наше приложение локально. Теперь веб - приложение должно быть доступно с HTTP: // локальный: 5000 . Все файлы , которые находятся под public подкаталоге подаются.

  1. С помощью браузера, откройте приложение на HTTP: // Localhost: 5000 .

Вы должны увидеть пользовательский интерфейс вашего приложения FriendlyChat, который (пока!) Не работает:

4c23f9475228cef4.png

В данный момент приложение ничего не может сделать, но скоро с вашей помощью! Пока что мы только разложили для вас интерфейс.

Давайте теперь создадим чат в реальном времени!

6. Импортируйте и настройте Firebase.

Импортируйте Firebase SDK

Нам нужно импортировать Firebase SDK в приложение. Есть несколько способов сделать это , как описано в документации . Например, вы можете импортировать библиотеку из нашего CDN. Или вы можете установить его локально с помощью npm, а затем упаковать его в свое приложение, если вы используете Browserify.

Мы собираемся , чтобы получить Firebase SDK от НОГО и использовать Webpack связывать наш код. Мы делаем это для того, чтобы Webpack мог удалить любой ненужный код, сохраняя небольшой размер нашего пакета JS, чтобы наше приложение загружалось как можно быстрее. Для этого codelab мы уже создали web-start/package.json файл , который включает в себя Firebase SDK в качестве зависимости, а также импортированные необходимые функции в верхней части web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

Во время этой лабораторной работы мы собираемся использовать Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging и Performance Monitoring, поэтому мы импортируем все их библиотеки. В своих будущих приложениях убедитесь, что вы импортируете только те части Firebase, которые вам нужны, чтобы сократить время загрузки вашего приложения.

Установите Firebase SDK и запустите сборку Webpack.

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

  1. Откройте новое окно терминала
  2. Убедитесь , что вы находитесь в web-start каталога
  3. Запуск npm install для загрузки Firebase SDK
  4. Запуск npm run start для запуска Webpack. Теперь Webpack будет постоянно перестраивать наш код курса для остальной части кодовой лаборатории.

Настроить Firebase

Нам также необходимо настроить Firebase SDK, чтобы сообщить ему, какой проект Firebase мы используем.

  1. Перейти к вашим настройкам проекта в Firebase консоли
  2. В карточке «Ваши приложения» выберите псевдоним приложения, для которого вам нужен объект конфигурации.
  3. Выберите «Конфигурация» на панели фрагмента Firebase SDK.
  4. Скопируйте объект конфигурации фрагмент кода, а затем добавить его в web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Теперь перейдите к нижней части web-start/src/index.js и инициализации Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Настройте вход пользователя.

Теперь Firebase SDK должен быть готов к использованию , так как он импортируется и инициализируется в index.html . Теперь мы собираемся реализовать пользовательский вход при помощи Firebase аутентификации .

Аутентифицируйте своих пользователей с помощью входа в Google

В приложении, когда пользователь нажимает Вход с кнопкой Google, то для signIn в signIn функция запускается. (Мы уже настроили это для вас!) Для этой codelab мы хотим разрешить Firebase использовать Google в качестве поставщика удостоверений. Мы будем использовать всплывающее окно, но некоторые другие методы доступны из Firebase.

  1. В web-start каталоге, в подкаталоге src/ , открытый index.js .
  2. Найти функцию для signIn в signIn .
  3. Замените всю функцию следующим кодом.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

signOut функция запускается , когда пользователь нажимает на кнопку Вход вне.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию signOutUser .
  3. Замените всю функцию следующим кодом.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

Отслеживайте состояние аутентификации

Чтобы соответствующим образом обновить наш пользовательский интерфейс, нам нужен способ проверить, вошел ли пользователь в систему или вышел из нее. С помощью Firebase Authentication вы можете зарегистрировать наблюдателя в состоянии аутентификации, который будет запускаться каждый раз при изменении состояния аутентификации.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию initFirebaseAuth .
  3. Замените всю функцию следующим кодом.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Код выше регистрирует функцию authStateObserver в качестве государственной аутентификации наблюдателя. Он будет срабатывать каждый раз при изменении состояния аутентификации (когда пользователь входит в систему или выходит из нее). Именно на этом этапе мы обновим пользовательский интерфейс, чтобы отображать или скрывать кнопку входа, кнопку выхода, изображение профиля вошедшего в систему пользователя и т. Д. Все эти части пользовательского интерфейса уже реализованы.

Отображение информации о вошедшем в систему пользователе

Мы хотим отображать изображение профиля вошедшего в систему пользователя и имя пользователя на верхней панели нашего приложения. В Firebase, подписанный в данном пользователе всегда доступен в currentUser объекте. Ранее мы создали authStateObserver функцию запуска при входе пользователя в так , что наши обновления пользовательского интерфейса соответственно. Он будет вызывать getProfilePicUrl и getUserName при срабатывании.

  1. Вернитесь в файл src/index.js .
  2. Найти функции getProfilePicUrl и getUserName .
  3. Замените обе функции следующим кодом.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

Мы отображаем сообщение об ошибке, если пользователь пытается отправить сообщение, когда пользователь не вошел в систему. (Хотя вы можете попробовать это!) Итак, нам нужно определить, действительно ли пользователь вошел в систему.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию isUserSignedIn .
  3. Замените всю функцию следующим кодом.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

Тестовый вход в приложение

  1. Если ваше приложение все еще обслуживается, обновите его в браузере. В противном случае запустите firebase serve --only hosting в командной строке , чтобы начать служить приложение от HTTP: // локальный: 5000 , а затем открыть его в браузере.
  2. Войдите в приложение, используя кнопку входа и свою учетную запись Google. Если вы видите сообщение об ошибке , говорящее auth/operation-not-allowed , проверьте , чтобы убедиться , что вы включили Google для входа в системе в качестве поставщика проверки подлинности в консоли Firebase.
  3. После входа в систему должны отображаться изображение вашего профиля и имя пользователя: c7401b3d44d0d78b.png

8. Пишите сообщения в Cloud Firestore.

В этом разделе мы запишем некоторые данные в Cloud Firestore, чтобы мы могли заполнить пользовательский интерфейс приложения. Это можно сделать вручную с помощью Firebase консоли , но мы будем делать это в самом приложении , чтобы продемонстрировать основной Cloud Firestore записи.

Модель данных

Данные Cloud Firestore разделены на коллекции, документы, поля и вложенные коллекции. Мы будем хранить каждое сообщение в чате в качестве документа в коллекции верхнего уровня под названием messages .

688d7bc5fb662b57.png

Добавить сообщения в Cloud Firestore

Для хранения сообщений чата, которые написаны пользователями, мы будем использовать облако Firestore .

В этом разделе вы добавите возможность пользователям писать новые сообщения в вашу базу данных. Пользователь , нажав кнопку SEND вызовет фрагмент кода ниже. Он добавляет объект сообщения с содержимым полех сообщений на ваш экземпляр Cloud Firestore в messages коллекции. add() метод добавляет новый документ с автоматически генерируемым ID в коллекцию.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию saveMessage .
  3. Замените всю функцию следующим кодом.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Тестовая отправка сообщений

  1. Если ваше приложение все еще обслуживается, обновите его в браузере. В противном случае запустите firebase serve --only hosting в командной строке , чтобы начать служить приложение от HTTP: // локальный: 5000 , а затем открыть его в браузере.
  2. После входа в систему , введите сообщение , например, «Привет!», А затем нажмите кнопку Отправить. Это запишет сообщение в Cloud Firestore. Тем не менее, вы еще не будет видеть данные в Вашем веб - приложение , потому что мы по- прежнему необходимо осуществлять извлечение данных (следующий раздел о codelab).
  3. Вы можете увидеть недавно добавленное сообщение в консоли Firebase. Откройте консоль Firebase. В разделе Построения нажмите Firestore базы данных (или нажмите здесь и выберите ваш проект) , и вы должны увидеть коллекцию сообщений с вашим добавляемым сообщением:

6812efe7da395692.png

9. Читайте сообщения.

Синхронизация сообщений

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

Мы добавим код, который прослушивает недавно добавленные сообщения из приложения. В этом коде мы зарегистрируем слушателя, который отслеживает изменения, внесенные в данные. Мы будем отображать только последние 12 сообщений чата, чтобы не отображать очень длинную историю при загрузке.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию loadMessages .
  3. Замените всю функцию следующим кодом.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

Для прослушивания сообщений в базе данных, мы создаем запрос на коллекции с использованием collection функции , чтобы указать , какие коллекции данных , которые мы хотим , чтобы слушать это. В коде выше, мы слушаем к изменениям внутри messages коллекция, в которой хранятся сообщения чата. Мы также применяя предел только слушать последние 12 сообщений с использованием .limit(12) и упорядочения сообщений по дате , используя orderBy('timestamp', 'desc') , чтобы получить 12 новейших сообщений.

onSnapshot функция принимает запрос в качестве первого параметра и функцию обратного вызова в качестве второго. Функция обратного вызова будет срабатывать при любых изменениях в документах, соответствующих запросу. Это могло произойти, если сообщение было удалено, изменено или добавлено. Вы можете прочитать об этом в документации Cloud Firestore .

Проверить синхронизацию сообщений

  1. Если ваше приложение все еще обслуживается, обновите его в браузере. В противном случае запустите firebase serve --only hosting в командной строке , чтобы начать служить приложение от HTTP: // локальный: 5000 , а затем открыть его в браузере.
  2. Сообщения, которые вы создали ранее в базе данных, должны отображаться в пользовательском интерфейсе FriendlyChat (см. Ниже). Не стесняйтесь писать новые сообщения; они должны появиться мгновенно.
  3. (Необязательно) Вы можете попробовать вручную удалить, изменения или добавления новых сообщений непосредственно в разделе База данных консоли Firebase; любые изменения должны быть отражены в пользовательском интерфейсе.

Поздравляю! Вы читаете документы Cloud Firestore в своем приложении!

2168dec79b573d07.png

10. Отправить изображения

Теперь мы добавим функцию обмена изображениями.

В то время как Cloud Firestore хорош для хранения структурированных данных, Cloud Storage лучше подходит для хранения файлов. Облако хранение для Firebase это сервис хранения файлов / кляксы, и мы будем использовать его для хранения любых изображений , которые пользователь разделяет с помощью нашего приложения.

Сохранять изображения в облачном хранилище

В этой кодовой лаборатории мы уже добавили для вас кнопку, которая запускает диалог выбора файлов. После выбора файла, то saveImageMessage функция вызывается, и вы можете получить ссылку на выбранный файл. saveImageMessage функция выполняет следующие действия :

  1. Создает сообщение чата «заполнитель» в ленте чата, чтобы пользователи видели анимацию «Загрузка», пока мы загружаем изображение.
  2. Загрузив файл изображения в Cloud Storage на этом пути: /<uid>/<messageId>/<file_name>
  3. Создает общедоступный URL-адрес для файла изображения.
  4. Обновляет сообщение чата с URL-адресом недавно загруженного файла изображения вместо временного загружаемого изображения.

Теперь вы добавите функцию отправки изображения:

  1. Вернитесь в файл src/index.js .
  2. Найти функцию saveImageMessage .
  3. Замените всю функцию следующим кодом.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Тестовая отправка изображений

  1. Если ваше приложение все еще обслуживается, обновите его в браузере. В противном случае запустите firebase serve --only hosting в командной строке , чтобы начать служить приложение от HTTP: // локальный: 5000 , а затем открыть его в браузере.
  2. После входа в систему нажмите кнопку загрузки изображения 13734cb66773e5a3.png и выберите файл изображения с помощью средства выбора файлов. Если вы ищете изображения, не стесняйтесь использовать эту красивую картинку чашки кофе .
  3. В пользовательском интерфейсе приложения должно появиться новое сообщение с выбранным изображением: 3b1284f5144b54f6.png

Если вы попытаетесь добавить изображение, не входя в систему, вы должны увидеть всплывающее уведомление о том, что вы должны войти в систему, чтобы добавить изображения.

11. Показать уведомления

Теперь мы добавим поддержку уведомлений браузера. Приложение будет уведомлять пользователей о новых сообщениях в чате. Firebase Cloud Messaging (ТСМ) является решением сообщений кросс-платформа , которая позволяет надежно передавать сообщения и уведомления без каких - либо затрат.

Добавить работника службы FCM

Веб - приложение требует обслуживания работника , который будет получать и отображать веб - уведомлений.

  1. С web-start каталога, в src каталоге, открытой firebase-messaging-sw.js .
  2. Добавьте в этот файл следующий контент.

firebase-сообщения-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

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

Получите токены устройства FCM

Когда уведомления были включены на устройстве или в браузере, вам предоставляется устройство маркера. Этот токен устройства используется для отправки уведомления определенному устройству или конкретному браузеру.

Когда пользователь входит в систему , мы называем saveMessagingDeviceToken функцию. Вот где мы получим ТСМ устройство лексемы из браузера и сохранить его в облаке Firestore.

  1. Вернитесь в файл src/index.js .
  2. Найти функцию saveMessagingDeviceToken .
  3. Замените всю функцию следующим кодом.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

Однако изначально этот код работать не будет. Чтобы ваше приложение могло получить токен устройства, пользователь должен предоставить вашему приложению разрешение на отображение уведомлений (следующий шаг кодовой таблицы).

Запросить разрешения на показ уведомлений

Если пользователь еще не предоставил вашему приложению разрешение на отображение уведомлений, вам не будет предоставлен токен устройства. В этом случае мы называем firebase.messaging().requestPermission() метод, который будет отображать диалоговое окно браузера с просьбой этого разрешения ( в поддерживаемых браузерах ).

8b9d0c66dc36153d.png

  1. Вернитесь в файл src/index.js .
  2. Найти функцию requestNotificationsPermissions .
  3. Замените всю функцию следующим кодом.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Получите токен вашего устройства

  1. Если ваше приложение все еще обслуживается, обновите его в браузере. В противном случае запустите firebase serve --only hosting в командной строке , чтобы начать служить приложение от HTTP: // локальный: 5000 , а затем открыть его в браузере.
  2. После входа в систему должно появиться диалоговое окно разрешения уведомлений: bd3454e6dbfb6723.png
  3. Нажмите кнопку Разрешить.
  4. Откройте консоль JavaScript вашего браузера. Вы должны увидеть следующее сообщение: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. Скопируйте токен вашего устройства. Он понадобится вам на следующем этапе кодовой лаборатории.

Отправить уведомление на ваше устройство

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

  1. Откройте вкладку Cloud Messaging консоли Firebase .
  2. Нажмите «Новое уведомление».
  3. Введите заголовок уведомления и текст уведомления.
  4. В правой части экрана нажмите «отправить тестовое сообщение».
  5. Введите токен устройства, который вы скопировали из консоли JavaScript вашего браузера, затем нажмите знак плюса ("+")
  6. Нажмите "проверить"

Если ваше приложение находится на переднем плане, вы увидите уведомление в консоли JavaScript.

Если ваше приложение работает в фоновом режиме, в вашем браузере должно появиться уведомление, как в этом примере:

de79e8638a45864c.png

12. Правила безопасности Cloud Firestore

Просмотр правила безопасности базы данных

Облако Firestore использует конкретные правила языка для определения прав доступа, безопасности и проверки данных.

При настройке проекта Firebase в начале этой лаборатории мы решили использовать правила безопасности по умолчанию «Тестовый режим», чтобы не ограничивать доступ к хранилищу данных. В Firebase консоли , в разделе Базы данных по вкладке Правил, вы можете просматривать и изменять эти правила.

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Мы обновим правила, чтобы ограничить действия, используя следующие правила:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Обновить правила безопасности базы данных

Есть два способа изменить правила безопасности базы данных: в консоли Firebase или из локального файла правил, развернутого с помощью интерфейса командной строки Firebase.

Чтобы обновить правила безопасности в консоли Firebase:

  1. Перейти в раздел базы данных с левой панели, а затем перейдите на вкладку Правила.
  2. Замените правила по умолчанию, которые уже есть в консоли, правилами, показанными выше.
  3. Нажмите кнопку Опубликовать.

Чтобы обновить правила безопасности из локального файла:

  1. Из web-start каталога, открытые firestore.rules .
  2. Замените правила по умолчанию, которые уже есть в файле, правилами, показанными выше.
  3. С web-start каталога, откройте firebase.json .
  4. Добавить в firestore.rules атрибут , указывающий на firestore.rules , как показано ниже. (The hosting атрибут должен уже быть в файле.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Разверните правила безопасности с помощью интерфейса командной строки Firebase, выполнив следующую команду:
firebase deploy --only firestore
  1. В вашей командной строке должен отобразиться следующий ответ:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. Правила безопасности облачного хранилища.

Просмотреть правила безопасности облачного хранилища

Облако хранение для Firebase использует определенные правила языка для определения прав доступа, безопасности и проверок данных.

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Мы обновим правила, чтобы сделать следующее:

  • Разрешить каждому пользователю писать только в свои собственные папки
  • Разрешить всем читать из облачного хранилища
  • Убедитесь, что загруженные файлы являются изображениями
  • Ограничьте размер загружаемых изображений до 5 МБ.

Это можно реализовать по следующим правилам:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Обновить правила безопасности облачного хранилища

Есть два способа изменить правила безопасности хранилища: либо в консоли Firebase, либо из локального файла правил, развернутого с помощью интерфейса командной строки Firebase.

Чтобы обновить правила безопасности в консоли Firebase:

  1. Перейти в раздел Storage с левой панели, а затем перейдите на вкладку Правила.
  2. Замените правило по умолчанию, которое уже находится в консоли, на правила, показанные выше.
  3. Нажмите кнопку Опубликовать.

Чтобы обновить правила безопасности из локального файла:

  1. Из web-start каталога, открытые storage.rules .
  2. Замените правила по умолчанию, которые уже есть в файле, правилами, показанными выше.
  3. С web-start каталога, откройте firebase.json .
  4. Добавить в storage.rules атрибут , указывающий на storage.rules файл, как показано ниже. (The hosting и database атрибут должен уже быть в файле.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Разверните правила безопасности с помощью интерфейса командной строки Firebase, выполнив следующую команду:
firebase deploy --only storage
  1. В вашей командной строке должен отобразиться следующий ответ:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. Собирайте данные об эффективности

Вы можете использовать SDK для мониторинга производительности для сбора реальных данных о производительности из вашего приложения, а затем просматривать и анализировать эти данные в консоли Firebase. Мониторинг производительности помогает вам понять, где и когда можно улучшить производительность вашего приложения, чтобы вы могли использовать эту информацию для устранения проблем с производительностью.

Существуют различные способы интеграции с SDK Firebase Performance Monitoring для JavaScript. В этом codelab, мы включили Performance Monitoring от хостинга URL. Обратитесь к документации , чтобы увидеть другие способы включения в SDK.

Автоматические трассировки

Так как мы уже импортируем getPerformance в верхней части web-start/src/index.js , нам просто нужно добавить одну строку сказать Performance Monitoring для автоматического сбора при загрузке страницы и метрик запроса сети для вас , когда пользователь посещает ваш развернутый сайт!

  1. В web-start/src/index.js , добавьте следующую строку ниже существующей TODO для инициализации мониторинга производительности.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Измерьте задержку первого входа (необязательно)

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

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

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

  1. Открытый public/index.html .
  2. Раскомментируйте script метки на следующей строке.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

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

Просмотр данных об эффективности

Поскольку вы еще не развернули свой сайт (вы развернете его на следующем шаге), вот скриншот, показывающий показатели производительности загрузки страницы, которые вы увидите в консоли Firebase в течение 30 минут после взаимодействия пользователей с вашим развернутым сайтом. :

29389131150f33d7.png

Когда вы интегрируете SDK для мониторинга производительности в свое приложение, вам не нужно писать какой-либо другой код, прежде чем ваше приложение начнет автоматически отслеживать несколько критических аспектов производительности. Для веб-приложений SDK регистрирует такие аспекты, как первая полноценная отрисовка, возможность взаимодействия пользователей с вашим приложением и многое другое.

Вы также можете настроить пользовательские трассировки, метрики и атрибуты для измерения определенных аспектов вашего приложения. Посетите документацию более узнать о пользовательских трассах и метриках и пользовательских атрибутах .

15. Разверните приложение с помощью хостинга Firebase.

Firebase предлагает широкий хостинг для обслуживания активов и веб - приложений. Вы можете развернуть свои файлы на хостинге Firebase с помощью интерфейса командной строки Firebase. Перед развертыванием, необходимо указать в firebase.json файл , который локальные файлы должны быть развернуты. Для этой лабораторной работы мы уже сделали это за вас, потому что этот шаг был необходим для обслуживания наших файлов во время этой кодовой лаборатории. Хостинг параметры указаны под hosting атрибута:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

Эти настройки сообщают CLI , что мы хотим развернуть все файлы в ./public директории ( "public": "./public" ).

  1. Убедитесь , что ваша командная строка доступа к ресурсам локального вашему приложения web-start каталога.
  2. Разверните свои файлы в проекте Firebase, выполнив следующую команду:
firebase deploy --except functions
  1. На консоли должно отображаться следующее:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Посетите свое веб-приложение, которое теперь полностью размещено в глобальной сети CDN с использованием хостинга Firebase на двух ваших собственных поддоменах Firebase:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

В качестве альтернативы, вы можете запустить firebase open hosting:site в командной строке.

Посетите документацию , чтобы узнать больше о том , как Firebase хостинг работ .

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

16. Поздравляю!

Вы использовали Firebase для создания веб-приложения для чата в реальном времени!

Что мы покрыли

  • Проверка подлинности Firebase
  • Cloud Firestore
  • Firebase SDK для облачного хранилища
  • Обмен сообщениями Firebase Cloud
  • Мониторинг производительности Firebase
  • Хостинг Firebase

Следующие шаги

Learn more