Это руководство поможет вам быстро добавить push-уведомления в ваше приложение Vue (бесплатно) с помощью плагина OneSignal-Vue. Чтобы следовать этому руководству, вам потребуются некоторые практические знания Vue 2 и его инструментов. Цель этого руководства — продемонстрировать, как отправить уведомление в приложение Vue. Он не описывает, как создать новое приложение Vue; для этого обратитесь к документации Vue о том, как создать новый проект Vue.
Обзор руководства
- Часть 1: Настройка учетной записи OneSignal
- Веб-конфигурация
- Часть 2: Настройка приложения Vue
- Инициализация плагина OneSignal 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
Добавить файл
Обновить секретную сутьОтмена
- © 2022 GitHub, Inc.
- "Условия"
- "Конфиденциальность"
- "Безопасность"
- "Положение дел"
- Документы
- Связаться с GitHub
- Цены
- АПИ
- "Обучение"
- Блог
- "О"