Это руководство поможет вам быстро добавить push-уведомления в ваше приложение Vue (бесплатно) с помощью плагина OneSignal-Vue. Чтобы следовать этому руководству, вам потребуются некоторые практические знания Vue 2 и его инструментов. Цель этого руководства — продемонстрировать, как отправить уведомление в приложение Vue. Он не описывает, как создать новое приложение Vue; для этого обратитесь к документации Vue о том, как создать новый проект Vue.

Обзор руководства

Часть 1. Настройка учетной записи OneSignal

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

Веб-конфигурация

Для начала войдите в свою учетную запись OneSignal и нажмите кнопку _ Новое приложение/веб-сайт _ на панели инструментов.

Назовите свое приложение и выберите Веб в качестве платформы.

Нажмите кнопку с надписью Далее: настройте платформу, чтобы выбрать способ интеграции в приложение Vue.

В окне Веб-конфигурация выберите параметр интеграции Пользовательский код и укажите имя, которое вы хотите использовать для ссылки на свой веб-сайт, а также URL-адрес сайта, на котором находится приложение. размещен. Если вы еще не знаете URL своего сайта, не беспокойтесь — вы можете установить его на свой локальный хост и обновить после развертывания приложения Vue.

А пока включите _ Автоматическую повторную подписку _, переместив переключатель вправо, чтобы убедиться, что ваша сборка для разработчиков всегда получает уведомление, даже когда вы очищаете данные своего браузера. Вам также необходимо включить _ локальное тестирование _, чтобы вы могли получать push-уведомления на своем компьютере разработчика.

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

В 4. В разделе Загрузить файлы нажмите кнопку Загрузить файлы OneSignal SDK, чтобы получить сервис-воркеры, необходимые для получения push-уведомлений, или загрузить файлы SDK из нашего репозитория Github.

Часть 2. Настройка приложения Vue

Теперь вы можете следовать инструкциям, которые поставляются с пакетом onesignal-vue для npm.

Установите onesignal-vue в свой проект Vue, используя предпочитаемый менеджер пакетов.

  • yarn add onesignal-vue
  • npm install --save onesignal-vue

Извлеките файлы сервис-воркеров из архива, загруженного с панели управления OneSignal, и скопируйте файлы в каталог public вашего проекта.

Инициализация плагина OneSignal Vue

Теперь вы можете настроить подключаемый модуль, изменив main.js для импорта пакета и инициализации подключаемого модуля, задав для свойства appId идентификатор вашего приложения OneSignal.

import Vue from "vue";
import OneSignal from "onesignal-vue";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.use(OneSignal);
new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({
      appId: "<You OneSignal application identifier",
      allowLocalhostAsSecureOrigin: true,
    });
  },
}).$mount("#app");

Использование плагина для компонентов

После инициализации используйте плагин на любом компоненте, который вам нравится. В этом руководстве мы собираемся вызвать его из компонента HelloWorld.vue, чтобы представить слайд-подсказку, которая позволяет посетителям вашего сайта подписаться на push-уведомления.

Найдите тег <script> и задайте обратный вызов для хука жизненного цикла beforeCreate в экспортируемом объекте.

import OneSignal from "onesignal-vue";
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    this.$OneSignal.showSlidedownPrompt();
  },
};

Интеграция завершена. Вы можете проверить это, запустив приложение с помощью yarn serve, а затем включив push-уведомления.

Вы должны были получить тестовое push-уведомление об успешной интеграции.

Поделитесь своим отзывом

Мы будем рады узнать, что вы думаете об этом плагине, и ответить на любые ваши дополнительные вопросы. Чтобы связаться с нами, создайте задачу на GitHub или отправьте нам запрос на сервер OneSignalDevs Discord, чтобы поделиться своим опытом. Мы ценим любую информацию, которой вы можете поделиться, чтобы помочь нам лучше обслуживать пользователей Vue.js!

Чтобы быть в курсе последних обновлений продуктов и инноваций, подпишитесь на OneSignal Developers Twitter. Для получения дополнительной поддержки и вдохновения для разработчиков свяжитесь с нашим глобальным сообществом разработчиков.

›› Присоединяйтесь к сообществу разработчиков OneSignal

Добавить файл

Обновить секретную сутьОтмена