ข้ามไปยังเนื้อหา
คู่มือผู้ใช้การสนับสนุน ขอสาธิต เข้าสู่ระบบ
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 ของเว็บไซต์ของคุณ นี่เป็นสิ่งสำคัญเพื่อให้ push notifications ทำงานได้อย่างถูกต้อง

ตัวอย่างเช่น ในโปรเจกต์ 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:

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 ในตัว

Anchor link to

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
  1. Custom Subscription Popup (PWSubscribePopupWidget) pop-up ที่ปรับแต่งได้ซึ่งนำเสนอวิธีที่น่าสนใจยิ่งขึ้นในการขออนุญาตการแจ้งเตือนก่อนที่จะแสดง native browser prompt
  • การกำหนดค่า: ปรับแต่งรูปลักษณ์และพฤติกรรมโดยใช้วัตถุ subscribePopup ใน init call
  • เรียนรู้เพิ่มเติม: Custom Subscription Popup
  1. Inbox Widget (PWInboxWidget) widget นี้จะรวมศูนย์ข้อความในแอป ทำให้ผู้ใช้สามารถดูประวัติของ rich push notifications ได้
  • การกำหนดค่า: จัดการผ่านวัตถุ inboxWidget ใน init call
  • เรียนรู้เพิ่มเติม: Web Inbox Widget

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

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

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', // 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);
  }
});

ลิงก์

Anchor link to

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