ข้ามไปยังเนื้อหา
คู่มือผู้ใช้การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

การใช้งานร่วมกับ npm

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

Anchor link to

นี่คือวิธีติดตั้งและใช้งาน Pushwoosh Web Push Notifications SDK ในโปรเจกต์ของคุณโดยใช้ npm คู่มือนี้ตั้งสมมติฐานว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ npm และการนำเข้าโมดูล JavaScript

ติดตั้ง SDK:

Anchor link to
ติดตั้ง Pushwoosh Web Push Notifications SDK
npm install web-push-notifications

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

Anchor link to

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

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

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

ตัวอย่างเช่น ในโปรเจกต์ 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' // คัดลอกไปยังรากของไดเรกทอรีผลลัพธ์
        }
      ]
    })
  ]
};

หากคุณใช้ Vite คุณสามารถใช้ปลั๊กอิน vite-plugin-static-copy ได้:

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: '' // คัดลอกไปยังรากของผลลัพธ์การสร้าง (build output)
        }
      ]
    })
  ]
});

สำหรับระบบการสร้าง (build systems) อื่นๆ ให้ใช้วิธีการคัดลอกไฟล์ของระบบนั้นๆ เพื่อให้แน่ใจว่า service worker พร้อมใช้งานที่รากของเว็บไซต์ของคุณ

วิดเจ็ตในตัว

Anchor link to

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

นี่คือภาพรวมของวิดเจ็ตแต่ละตัว:

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

  2. ปุ่มสมัครรับข้อมูล (PWSubscriptionButtonWidget) วิดเจ็ตนี้จะเพิ่มปุ่มลอย (มักจะเป็นไอคอนรูประฆัง) ไปยังไซต์ของคุณ ช่วยให้ผู้ใช้สามารถสมัครรับหรือจัดการการตั้งค่าการแจ้งเตือนได้อย่างง่ายดาย

  1. ป๊อปอัปสมัครรับข้อมูลแบบกำหนดเอง (PWSubscribePopupWidget) ป๊อปอัปที่สามารถปรับแต่งได้ซึ่งเป็นวิธีที่น่าสนใจยิ่งขึ้นในการขออนุญาตรับการแจ้งเตือนก่อนที่จะแสดงพร้อมท์ของเบราว์เซอร์
  1. วิดเจ็ตกล่องจดหมาย (PWInboxWidget) วิดเจ็ตนี้จะผสานรวมศูนย์ข้อความในแอป ช่วยให้ผู้ใช้สามารถดูประวัติการแจ้งเตือนแบบพุชที่สมบูรณ์ได้

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

การนำเข้าและเริ่มต้นการทำงาน

Anchor link to
นำเข้าและเริ่มต้นการทำงาน 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', // รหัสแอปพลิเคชัน Pushwoosh ของคุณ
  apiToken: 'XXXXXXX', // Device API Token
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // พาธไปยัง service worker ที่คัดลอกมา


  // การตั้งค่าป๊อปอัปสมัครรับข้อมูลแบบกำหนดเอง
  subscribePopup: {
    enable: true // เปิดใช้งานป๊อปอัปสมัครรับข้อมูล
    // สามารถเพิ่มตัวเลือกอื่นๆ ได้ที่นี่
  },


  // การตั้งค่าปุ่มสมัครรับการแจ้งเตือนแบบพุช
  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);
  }
});

ลิงก์

Anchor link to

ดูตัวอย่างแอปพลิเคชันที่ใช้ React และ Vite ได้ที่: https://github.com/Pushwoosh/websdk-npm-vite-react-example