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

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

Вот как установить и использовать SDK веб-пуш-уведомлений Pushwoosh в вашем проекте с помощью npm. Это руководство предполагает, что у вас есть базовое понимание npm и импорта модулей JavaScript.

Установка SDK:

npm install web-push-notifications

Начиная с версии 3.45.0, Pushwoosh Web SDK представил модульный подход для импорта основного SDK и его виджетов пользовательского интерфейса.

Раздельный импорт: Теперь вам необходимо импортировать основной класс Pushwoosh и любые необходимые виджеты (такие как PWSubscriptionButtonWidget, PWSubscribePopupWidget и т.д.) по отдельности. До этой версии все компоненты обычно объединялись в один импорт.
Компиляция ES2020: Начиная с этой версии, SDK компилируется в спецификацию JavaScript ES2020. Пожалуйста, убедитесь, что ваша среда сборки и целевые браузеры поддерживают функции ES2020.

Настройка Service Worker

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

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

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

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

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

module.exports = {
  // ...other webpack config
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/web-push-notifications/service-worker.js',
          to: 'service-worker.js' // Copies to output directory root
        }
      ]
    })
  ]
};

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

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

export default defineConfig({
  // ...other vite config
  plugins: [
    // ...other plugins
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/web-push-notifications/service-worker.js',
          dest: '' // Copies to build output root
        }
      ]
    })
  ]
});

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

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

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

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

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

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

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

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

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

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

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

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

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', // your Pushwoosh Application Code
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // path to your copied service worker

  // Custom Subscription Popup settings
  subscribePopup: {
    enable: true // Enable the subscription popup
    // other options can be added here
  },

  // Push subscription button settings
  subscribeWidget: {
    enable: true // Enable the subscription button widget
    // other options can be added here
  },

  // Inbox widget settings
  inboxWidget: {
    enable: true // Enable the inbox widget
    // other options can be added here
  }
}]);

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionPromptWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionPromptWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscriptionButtonWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscriptionButtonWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWSubscribePopupWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWSubscribePopupWidget initialization failed:', error);
  }
});

pushwoosh.push(async () => {
  try {
    const widget = new PWInboxWidget(pushwoosh);
    await widget.run();
  } catch (error) {
    console.error('PWInboxWidget initialization failed:', error);
  }
});

Ссылки

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