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

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

npm install web-push-notifications

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

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

Важно: Во время процесса сборки или развертывания вы должны скопировать этот файл service worker в корень вашего сайта. Это необходимо для корректной работы 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:

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: '' // Копирует в корень выходного каталога сборки
        }
      ]
    })
  ]
});

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

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

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

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

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

• Конфигурация: Настройки для этого виджета управляются через объект subscribeWidget в вызове init.
• Узнать больше: Кнопка подписки на push-уведомления

3. Кастомное всплывающее окно подписки (PWSubscribePopupWidget) Настраиваемое всплывающее окно, которое предоставляет более привлекательный способ запроса разрешений на уведомления перед показом нативного запроса браузера.

• Конфигурация: Настройте его внешний вид и поведение с помощью объекта subscribePopup в вызове init.
• Узнать больше: Кастомное всплывающее окно подписки

4. Виджет входящих сообщений (PWInboxWidget) Этот виджет интегрирует центр сообщений в приложении, позволяя пользователям просматривать историю rich push-уведомлений.

• Конфигурация: Управляется через объект inboxWidget в вызове init.
• Узнать больше: Веб-виджет “Входящие”

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

import { Pushwoosh } 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 pushwoosh = new Pushwoosh();

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

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

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

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

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Ошибка инициализации PWSubscriptionPromptWidget:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Ошибка инициализации PWSubscriptionButtonWidget:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Ошибка инициализации PWSubscribePopupWidget:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('Ошибка инициализации PWInboxWidget:', error);
  }
});

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