И снова здравствуйте. Прошло много времени с тех пор, как я написал последнюю главу, извините за это, я был очень занят в эти дни. Но я снова здесь и готов продолжить создание этой потрясающей PWA с помощью Vue.
До сих пор у нас есть PWA, способный составлять списки, создавать и сохранять сообщения в базе данных, а также делать снимки с помощью камеры устройства. Если вы не видели предыдущие главы, вы можете проверить их по следующим ссылкам.
[Часть 1] Создайте проект SPA с помощью Vue-CLI 3 и плагина Vuetify
[Часть 2] Подключите приложение к внешнему API и Firestore для сохранения данных
[Часть 3] Внедрить автономный режим
[Часть 4] Доступ к камере устройства, чтобы делать снимки
[Часть 5] Реализуйте push-уведомления Firebase (вы здесь)
[Часть 5] Внедрение push-уведомлений Firebase
Пришло время продолжить рассылку push-уведомлений всем пользователям приложения каждый раз, когда создается новый пост.
Прежде чем мы начнем, я хочу сказать вам, что в настоящее время нет возможности отправлять веб-push-уведомления на устройства iOS. Если вам нужно отправлять push-уведомления на iPhone или iPad, вам необходимо создать собственное приложение.
Это будет огромная глава, поэтому я решил создать следующий список разделов, чтобы дать вам общее представление обо всем, что нам нужно для разработки системы push-уведомлений в нашем приложении.
- Установка Firebase CLI.
- Создайте общую функцию firebase подписки.
- Подписка на веб-push-уведомления.
- Настройте уведомления в фоновом режиме.
- Отправлять уведомления при создании нового сообщения.
- Заключение
Установка Firebase CLI
Нам нужен интерфейс командной строки firebase, потому что мы собираемся реализовать функции firebase.
Функции Firebase будут нашей серверной частью, написанной на node.js, которую мы будем загружать на серверы Google через интерфейс командной строки Firebase.
Чтобы установить Firebase CLI, откройте новый терминал и выполните следующую команду.
npm install -g firebase-toolsЯ тоже собираюсь установить его, чтобы сопровождать вас в процессе.
Поскольку это глобальный пакет, мне нужно было сначала написать sudo (это применимо только в Mac или Linux)
В конце процесса firebase-CLI даст несколько советов по установке эмулятора функций firebase. Нам это не нужно, поэтому мы можем проигнорировать совет и двигаться дальше.
Мы можем подтвердить успешную установку следующей строкой кода.
firebase tools --version
Прежде чем продолжить, вам нужно будет пройти аутентификацию в Google. Выполните следующую команду и войдите в систему.
firebase loginЗатем нам нужно перейти в нашу корневую папку проекта и запустить следующую команду, чтобы инициализировать в ней firebase.
firebase init
После запуска команды Firebase CLI спросит, какие функции вы хотите установить. Просто выберите Функции и Хостинг и нажмите Enter.
Затем выберите наш проект cropchien (ваш проект).
Теперь выберите язык Javascript.
Затем он спрашивает нас об использовании ESLint, обычно рекомендуется включать его в каждом проекте javascript. Но поскольку это обучающий проект, мы выберем Нет.
Теперь выберите «Да», чтобы установить зависимости с помощью npm.
Я рекомендую не использовать YARN в нашем бэкэнде функций Firebase, у меня были проблемы в прошлом, используя его с функциями Firebase.
Выберите «Да», чтобы использовать общедоступную папку в нашем проекте.
Затем интерфейс командной строки Firebase спросит о конфигурации SPA, выберите «Да».
Интерфейс командной строки Firebase запросит переопределение файла public / index.html, выберите, конечно, нет.
Наконец, вы получите успешное сообщение. Если вы проверите репозиторий, вы должны увидеть эти новые папки и файлы.
Если вы откроете папку с функциями, вы увидите следующие файлы:
Как видите, есть еще одна папка node_modules и другой файл пакета json. Это означает, что эта папка функций рассматривается как еще один отдельный проект. Index.js - это файл, в котором мы реализуем наш бэкэнд.
В файле index.js мы собираемся создать функции firebase с помощью node.js.
Создайте общую функцию firebase подписки.
Если вы откроете файл json пакета в папке функций firebase, вы увидите эти зависимости.
Firebase-cli установила для нас firebase-admin и firebase-function, но нам также понадобятся cors и axios.
Откройте встроенный терминал, перейдите в папку функций, напишите функции компакт-диска и нажмите Enter.
Установите следующие зависимости:
npm install cors axiosНе забудьте использовать npm вместо пряжи внутри папки функций.
После установки вы сможете увидеть новые зависимости в файле package.json.
В VSCode Откройте файл index.js, чтобы написать нашу самую первую функцию, она будет называться Общая подписка. Удалите содержимое по умолчанию и вставьте следующий код.
Давайте проанализируем код, сначала мы импортируем все, что нам нужно для создания наших функций, включая библиотеки axios и cors. Затем мы инициализируем наше приложение и создаем экземпляр firestore. Последний шаг - создание нашей функции GeneralSubscription. Мы используем аксиомы для создания общей темы, и когда обещание выполнено, мы сохраняем токен в коллекции токенов firestore. Мы будем использовать эти токены позже для отправки уведомлений.
Как видите, для создания общей темы вам понадобится токен заголовка авторизации. Давайте зайдем в консоль firebase в Chrome, чтобы получить это.
В консоли firebase щелкните значок шестеренки и выберите настройку проекта.
Затем щелкните вкладку обмена сообщениями в облаке и скопируйте ключ сервера.
Создайте файл serverKey.js внутри папки функций и вставьте туда свой ключ сервера.
В терминале запустите следующую строку, чтобы загрузить нашу функцию (убедитесь, что вы находитесь в папке функций).
firebase deploy --only functions
Вернитесь в консоль firebase и перейдите в раздел функций, чтобы убедиться, что функция GeneralSubscription была создана.
Поздравляем, теперь у вас есть самая первая функция firebase. Пришло время снова поработать в интерфейсе, чтобы подписывать пользователей на push-уведомления.
Скопируйте URL своей функции, он понадобится вам в следующем подмодуле.
Подписка на веб-push-уведомления.
В настоящее время большинство веб-сайтов запрашивают разрешения на push-уведомления с самого начала, это плохая идея, потому что шансы получить положительный ответ уменьшаются.
Нам нужна кнопка подписки на push-уведомления, но сначала мы должны внести небольшие изменения в наш configFirebase.js. Просто добавьте эти строки внизу.
Наш файл должен выглядеть так:
Хорошо, мы готовы запросить у пользователя разрешения на push-уведомления. Измените App.vue с помощью следующего кода:
Мы добавили кнопку подписки на уведомления, при нажатии на которую мы запрашиваем у firebase токен обмена сообщениями, а затем сохраняем его с помощью ранее созданной функции firebase. Кроме того, когда компонент App.vu e монтируется, мы ожидаем обновления токена на всякий случай, если у нас уже есть токен.
Веб-push-уведомление Firebase требует, чтобы наш сервисный работник назывался firebase-messaging-sw.js, поэтому создайте пустой файл firebase-messaging-sw.js в папке src для Теперь.
Создайте новый файл vue.config.js в корневой папке проекта, чтобы объединить этот пользовательский сервисный воркер (пустой firebase-messaging-sw.js) с файлом, созданным vue-cli. И вставьте на него этот код:
Кроме того, нам нужно внести небольшие изменения в файл registerServiceWorker.js.
Так что измените эту строку:
register(`${process.env.BASE_URL}service-worker.js`, {
к этому:
register(`${process.env.BASE_URL}firebase-messaging-sw.js`, {
Другими словами, мы просто изменили имя сервис-воркера.
Помните, что для тестирования этих функций PWA мы должны компилировать файлы в производственном режиме и обслуживать их через HTTP-СЕРВЕР. Итак, давайте скомпилируем в продакшн.
В терминале перейдите в корневую папку проекта (без папки функций) и запустите следующее:
yarn run buildnpm run build, если вы не используете пряжу
а затем обслужите папку dist с помощью этой команды:
http-server distДавайте попробуем кнопку push-уведомлений. Откройте приложение и нажмите кнопку со значком колокольчика.
Щелкните параметр «Разрешить» и посмотрите, как распечатывается консоль.
Мы можем проверить базу данных в консоли firebase и проверить, был ли сохранен токен.
Если на этом этапе у вас возникнут проблемы, вы можете шаг за шагом наблюдать за процессом в функциях / журналах. Вы даже можете распечатать console.log в своей функции firebase и увидеть их здесь.
Хорошо, мы уже подписаны на push-уведомления, теперь переходим к следующему шагу
Настроить уведомления в фоновом режиме
Чтобы обрабатывать уведомления в фоновом режиме, мы должны обновить нашего нового сервис-воркера firebase-messaging-sw.js, мы должны сделать это здесь, потому что сервис-воркер будет слушать, даже когда веб-приложение закрыто или находится в фон.
Добавьте этот код в firebase-messaging-sw.js.
Обязательно замените URL-адрес на название вашего проекта firebase.
новый RegExp (‘https://firebasestorage.googleapis.com/v0/b/ cropchien.appspot.com /.* '),
Также замените свой идентификатор отправителя firebase.
Снова скомпилируйте в производственную среду, чтобы установить эти изменения сервис-воркера.
Мы собираемся использовать Postman для тестирования всего кода, который мы написали до сих пор. Поэтому установите почтальон, если у вас его еще нет, а затем создайте новый запрос POST.
установите URL-адрес:
https://fcm.googleapis.com/fcm/send
установите следующие заголовки и включите собственный ключ авторизации:
На вкладке body выберите параметр raw и JSON в выбранном, затем вставьте этот json и измените URL-адрес на свое приложение URL.
Протестируйте маршрут публикации, нажав кнопку отправки, вы должны увидеть наше уведомление в действии.
Отправлять уведомления при создании нового сообщения
Сможете догадаться, что нам нужно, чтобы вызвать уведомление о новом посте? Да, вы поняли, нам нужно создать новую функцию firebase.
Добавьте эту новую функцию firebase в конец индексного файла внутри папки функций.
Загрузите функцию (убедитесь, что она находится внутри папки функций).
firebase deploy --only functions
Давайте проверим, откроем новую вкладку в режиме инкогнито и создадим новую запись.
Заключение
Поздравляем, теперь наш PWA отправляет уведомления всем пользователям, когда создается новый пост. Как видите, push-уведомления - это огромная и очень сложная тема. Вы изучили базовую настройку, но можете пойти дальше и отправлять уведомления определенной группе людей или отправлять прямые push-уведомления определенным пользователям.
Я приглашаю вас узнать больше и улучшить вашу собственную версию этого приложения. Вы даже можете попробовать загрузить это приложение в рабочую среду и протестировать его на своем собственном телефоне. Если вы это сделаете, поделитесь, пожалуйста, своим URL в комментариях, я буду рад увидеть вашу работу.
Помните, что вы можете проверить полный код в репозитории chropchien на github:
Спасибо, что подписались на эту серию статей, я приглашаю вас подписаться на меня в твиттере.
Удачного кодирования.
