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

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

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

### Установка SDK:

```bash title="Установка Pushwoosh Web Push Notifications SDK"
npm install web-push-notifications
```

<Aside type="caution" title="Важное примечание о версионировании SDK (v3.45.0+)">
  Начиная с версии **3.45.0**, Pushwoosh Web SDK представил модульный подход для импорта основного SDK и его виджетов пользовательского интерфейса.

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

### Настройка Service Worker

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

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

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

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

```javascript
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`:

```javascript
// vite.config.js
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.

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

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

2.  **Кнопка подписки (`PWSubscriptionButtonWidget`)**
Этот виджет добавляет плавающую кнопку (часто иконку колокольчика) на ваш сайт, позволяя пользователям легко подписываться на уведомления или управлять своими предпочтениями.
*   **Конфигурация:** Настройки для этого виджета управляются объектом `subscribeWidget` в вызове `init`.
*   **Узнать больше:** [Кнопка подписки на пуш-уведомления](/ru/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **Пользовательское всплывающее окно подписки (`PWSubscribePopupWidget`)**
Настраиваемое всплывающее окно, которое предлагает более привлекательный способ запросить разрешения на уведомления до показа нативного запроса браузера.
*   **Конфигурация:** Настройте его внешний вид и поведение с помощью объекта `subscribePopup` в вызове `init`.
*   **Узнать больше:** [Пользовательское всплывающее окно подписки](/ru/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **Виджет Входящие (`PWInboxWidget`)**
Этот виджет интегрирует центр сообщений в приложении, позволяя пользователям просматривать историю rich push-уведомлений.
*   **Конфигурация:** Управляется через объект `inboxWidget` в вызове `init`.
*   **Узнать больше:** [Виджет Web Inbox](/ru/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

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

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

```javascript title="Импорт и инициализация Pushwoosh"
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