# การใช้งานกับ npm

## การติดตั้ง Pushwoosh Web Push SDK ผ่าน npm

นี่คือวิธีการติดตั้งและใช้งาน Pushwoosh Web Push Notifications SDK ในโปรเจกต์ของคุณโดยใช้ 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 ได้นำเสนอแนวทางแบบโมดูลสำหรับการนำเข้า core SDK และ UI widgets

  - **การนำเข้าแยกกัน:** ตอนนี้คุณต้องนำเข้าคลาส `Pushwoosh` หลักและ widgets ที่ต้องการ (เช่น `PWSubscriptionButtonWidget`, `PWSubscribePopupWidget` เป็นต้น) แยกกัน ก่อนหน้านี้ส่วนประกอบทั้งหมดมักจะถูกรวมอยู่ใน single import เดียว
  - **การคอมไพล์ ES2020:** SDK ได้รับการคอมไพล์เป็นข้อกำหนด JavaScript ES2020 ตั้งแต่เวอร์ชันนี้เป็นต้นไป โปรดตรวจสอบให้แน่ใจว่า build environment และ target browsers ของคุณรองรับคุณสมบัติ ES2020
</Aside>

### การตั้งค่า Service Worker

เมื่อใช้ SDK ผ่าน npm ไฟล์ service worker จะอยู่ที่:

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

**สำคัญ:** ในระหว่างกระบวนการ build หรือ deployment ของคุณ คุณต้องคัดลอกไฟล์ service worker นี้ไปยัง root ของเว็บไซต์ของคุณ นี่เป็นสิ่งสำคัญเพื่อให้ push notifications ทำงานได้อย่างถูกต้อง

ตัวอย่างเช่น ในโปรเจกต์ 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
        }
      ]
    })
  ]
});
```
สำหรับ build systems อื่นๆ ให้ใช้กลไกการคัดลอกไฟล์ที่เกี่ยวข้องเพื่อให้แน่ใจว่า service worker พร้อมใช้งานที่ root ของเว็บไซต์ของคุณ

### Widgets ในตัว

Pushwoosh Web SDK มาพร้อมกับ UI widgets ในตัวสี่รายการเพื่อเพิ่มประสิทธิภาพการโต้ตอบของผู้ใช้และปรับปรุงกระบวนการสมัครสมาชิก ในขณะที่ `PWSubscriptionPromptWidget` ได้รับการกำหนดค่าหลักผ่าน Pushwoosh Control Panel และการตั้งค่าเบราว์เซอร์ widgets อีกสามรายการ (`PWSubscriptionButtonWidget`, `PWSubscribePopupWidget` และ `PWInboxWidget`) มีตัวเลือกการกำหนดค่าโดยละเอียดโดยตรงภายใน `init` method ของ SDK

นี่คือภาพรวมของแต่ละ widget:

1.  **Subscription Prompt (`PWSubscriptionPromptWidget`)**
widget นี้มีหน้าที่แสดง native prompt ของเบราว์เซอร์เพื่อขออนุญาตผู้ใช้ในการส่ง push notifications พฤติกรรมของ widget นี้ส่วนใหญ่ถูกควบคุมโดย browser standards และการตั้งค่าที่กำหนดค่าไว้ใน Pushwoosh Control Panel ของคุณ ไม่มีพารามิเตอร์การกำหนดค่าเฉพาะภายใน `pushwoosh.push(['init', {...}])` call

2.  **Subscription Button (`PWSubscriptionButtonWidget`)**
widget นี้จะเพิ่ม floating button (มักจะเป็นไอคอนรูปกระดิ่ง) ไปยังเว็บไซต์ของคุณ ทำให้ผู้ใช้สามารถสมัครสมาชิกหรือจัดการการตั้งค่าการแจ้งเตือนได้อย่างง่ายดาย
*   **การกำหนดค่า:** การตั้งค่าสำหรับ widget นี้จะถูกจัดการภายใต้วัตถุ `subscribeWidget` ใน `init` call
*   **เรียนรู้เพิ่มเติม:** [ปุ่มสมัครสมาชิก Push](/th/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/)

3.  **Custom Subscription Popup (`PWSubscribePopupWidget`)**
pop-up ที่ปรับแต่งได้ซึ่งนำเสนอวิธีที่น่าสนใจยิ่งขึ้นในการขออนุญาตการแจ้งเตือนก่อนที่จะแสดง native browser prompt
*   **การกำหนดค่า:** ปรับแต่งรูปลักษณ์และพฤติกรรมโดยใช้วัตถุ `subscribePopup` ใน `init` call
*   **เรียนรู้เพิ่มเติม:** [Custom Subscription Popup](/th/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/)

4.  **Inbox Widget (`PWInboxWidget`)**
widget นี้จะรวมศูนย์ข้อความในแอป ทำให้ผู้ใช้สามารถดูประวัติของ rich push notifications ได้
*   **การกำหนดค่า:** จัดการผ่านวัตถุ `inboxWidget` ใน `init` call
*   **เรียนรู้เพิ่มเติม:** [Web Inbox Widget](/th/developer/pushwoosh-sdk/web-push-notifications/web-inbox-widget/)

จากนั้นคุณสามารถเริ่มต้นและเรียกใช้ widgets เหล่านี้ได้ตามตัวอย่างด้านล่าง:

### นำเข้าและเริ่มต้น

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