Skip to content
Руководство пользователя Wavesend.ru
Войти

Использование с npm

Установка Wavesend Web Push SDK через npm

Section titled “Установка Wavesend Web Push SDK через npm”

Инструкция по установке и использованию Wavesend Web Push Notifications SDK в вашем проекте через npm. Это руководство предполагает, что у вас есть базовое понимание npm и импорта модулей JavaScript.

Установка SDK:

Section titled “Установка SDK:”
Установка Wavesend Web Push Notifications SDK
npm install web-push-notifications

Настройка сервис-воркера

Section titled “Настройка сервис-воркера”

При использовании SDK через npm файл сервис-воркера находится по адресу:

node_modules/web-push-notifications/service-worker.js

Важно: Во время процесса сборки или развертывания вы должны скопировать этот файл сервис-воркера в корень вашего сайта. Это критически важно для корректной работы push-уведомлений.

Например, в проекте на webpack вы можете использовать copy-webpack-plugin:

const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  // ...другая конфигурация webpack
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Копирует в корень выходного каталога
        }
      ]
    })
  ]
};

Если вы используете Vite, вы можете использовать плагин vite-plugin-static-copy:

vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy'


export default defineConfig({
  // ...другая конфигурация vite
  plugins: [
    // ...другие плагины
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Копирует в корень выходного каталога сборки
        }
      ]
    })
  ]
});

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

Встроенные виджеты

Section titled “Встроенные виджеты”

Wavesend Web SDK поставляется с четырьмя встроенными UI-виджетами для улучшения взаимодействия с пользователем и упрощения процесса подписки. В то время как PWSubscriptionPromptWidget в основном настраивается через Wavesend Control Panel и настройки браузера, три других виджета (PWSubscriptionButtonWidget, PWSubscribePopupWidget и PWInboxWidget) предлагают подробные опции конфигурации непосредственно в методе init SDK.

Вот обзор каждого виджета:

  1. Subscription Prompt (PWSubscriptionPromptWidget) Этот виджет отвечает за отображение нативного запроса браузера на разрешение отправлять push-уведомления. Его поведение в основном определяется стандартами браузера и настройками в вашем Wavesend Control Panel. У него нет специальных параметров конфигурации в вызове wavesend.push(['init', {...}]).

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

  • Конфигурация: Настройки этого виджета управляются через объект subscribeWidget в вызове init.
  • Узнать больше: Кнопка подписки на Push
  1. Custom Subscription Popup (PWSubscribePopupWidget) Настраиваемое всплывающее окно, которое предлагает более привлекательный способ запроса разрешений на уведомления перед показом нативного запроса браузера.
  • Конфигурация: Настройте его внешний вид и поведение с помощью объекта subscribePopup в вызове init.
  • Узнать больше: Custom Subscription Popup
  1. Inbox Widget (PWInboxWidget) Этот виджет интегрирует центр сообщений в приложении, позволяя пользователям просматривать историю push-уведомлений с rich-контентом.
  • Конфигурация: Управляется через объект inboxWidget в вызове init.
  • Узнать больше: Web Inbox Widget

Затем вы можете инициализировать и запустить эти виджеты, как показано в примерах ниже:

Импорт и инициализация

Section titled “Импорт и инициализация”
Импорт и инициализация Wavesend
import { Wavesend } from 'web-push-notifications';
import { PWSubscriptionPromptWidget } from 'web-push-notifications/widget-subscription-prompt';
import { PWSubscriptionButtonWidget } from 'web-push-notifications/widget-subscription-button';
import { PWSubscribePopupWidget } from 'web-push-notifications/widget-subscribe-popup';
import { PWInboxWidget } from 'web-push-notifications/widget-inbox';


const wavesend = new Wavesend();


wavesend.push(['init', {
  applicationCode: 'XXXXX-XXXXX', // ваш Application Code из Wavesend
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Wavesend',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // путь к скопированному сервис-воркеру


  // Настройки Custom Subscription Popup
  subscribePopup: {
    enable: true, // Включить всплывающее окно подписки
    // здесь можно добавить другие опции
  },


  // Настройки кнопки подписки на Push
  subscribeWidget: {
    enable: true, // Включить виджет кнопки подписки
    // здесь можно добавить другие опции
  },


  // Настройки Inbox Widget
  inboxWidget: {
    enable: true, // Включить Inbox Widget
    // здесь можно добавить другие опции
  }
}]);


wavesend.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(wavesend);
    await widget.run();
  } catch (error) {
    console.error('Инициализация PWSubscriptionPromptWidget не удалась:', error);
  }
});


wavesend.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(wavesend);
    await widget.run();
  } catch (error) {
    console.error('Инициализация PWSubscriptionButtonWidget не удалась:', error);
  }
});


wavesend.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(wavesend);
    await widget.run();
  } catch (error) {
    console.error('Инициализация PWSubscribePopupWidget не удалась:', error);
  }
});


wavesend.push(async () => {
  try {
    const widget = new PWInboxWidget(wavesend);
    await widget.run();
  } catch (error) {
    console.error('Инициализация PWInboxWidget не удалась:', error);
  }
});

Ссылки

Section titled “Ссылки”

Пример приложения с использованием React и Vite: https://github.com/Wavesend/websdk-npm-vite-react-example