انتقل إلى المحتوى
أدلة المستخدمالدعم طلب عرض توضيحي تسجيل الدخول
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

هام: أثناء عملية البناء أو النشر، يجب عليك نسخ ملف Service Worker هذا إلى الجذر الرئيسي لموقع الويب الخاص بك. هذا أمر بالغ الأهمية لكي تعمل إشعارات Push بشكل صحيح.

على سبيل المثال، في مشروع 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
        }
      ]
    })
  ]
});

بالنسبة لأنظمة البناء الأخرى، استخدم آليات نسخ الملفات الخاصة بها لضمان توفر Service Worker في الجذر الرئيسي لموقع الويب الخاص بك.

واجهات المستخدم المدمجة (Built-in Widgets)

Anchor link to

يأتي Pushwoosh Web SDK مع أربع واجهات مستخدم مدمجة (UI widgets) لتعزيز تفاعل المستخدم وتبسيط عملية الاشتراك. بينما يتم تكوين PWSubscriptionPromptWidget بشكل أساسي من خلال لوحة تحكم Pushwoosh وإعدادات المتصفح، توفر واجهات المستخدم الثلاث الأخرى (PWSubscriptionButtonWidget و PWSubscribePopupWidget و PWInboxWidget) خيارات تكوين مفصلة مباشرة ضمن طريقة init الخاصة بـ SDK.

إليك نظرة عامة على كل واجهة مستخدم:

  1. مطالبة الاشتراك (PWSubscriptionPromptWidget) هذه الواجهة مسؤولة عن عرض المطالبة الأصلية للمتصفح لطلب إذن المستخدمين لإرسال إشعارات Push. يتم التحكم في سلوكها إلى حد كبير بواسطة معايير المتصفح والإعدادات المكونة في لوحة تحكم Pushwoosh الخاصة بك. ليس لديها معلمات تكوين محددة ضمن استدعاء pushwoosh.push(['init', {...}]).

  2. زر الاشتراك (PWSubscriptionButtonWidget) تضيف هذه الواجهة زرًا عائمًا (غالبًا ما يكون أيقونة جرس) إلى موقعك، مما يسمح للمستخدمين بالاشتراك بسهولة في الإشعارات أو إدارة تفضيلاتهم.

    • التكوين: تتم إدارة إعدادات هذه الواجهة ضمن كائن subscribeWidget في استدعاء init.
    • تعرف على المزيد: زر اشتراك Push

  3. نافذة الاشتراك المنبثقة المخصصة (PWSubscribePopupWidget) نافذة منبثقة قابلة للتخصيص توفر طريقة أكثر جاذبية لطلب أذونات الإشعارات قبل إظهار المطالبة الأصلية للمتصفح.

  4. واجهة المستخدم للبريد الوارد (PWInboxWidget) تدمج هذه الواجهة مركز رسائل داخل التطبيق، مما يسمح للمستخدمين بعرض سجل إشعارات Push الغنية.

يمكنك بعد ذلك تهيئة وتشغيل واجهات المستخدم هذه كما هو موضح في الأمثلة أدناه:

الاستيراد والتهيئة

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