# إعداد صندوق رسائل الويب

#### المتطلبات المسبقة

تأكد من أنك قمت بتطبيق Pushwoosh Web SDK على موقع الويب الخاص بك. للقيام بذلك، يرجى اتباع [دليلنا](/ar/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).

تسمح **Message Inbox لمواقع الويب** بتخزين إشعارات الويب الفورية (web push notifications) حتى يتمكن المستخدمون من زيارتها مرة أخرى لاحقًا، مما يضمن رؤية الرسائل المهمة.

## كيف تعمل

فيما يلي سير عمل نموذجي مع InboxMessages:

| الخطوة                                                                 | الطريقة                                                                                                                                      |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| تحميل الصفحة                                                            |                                                                                                                                             |
| مزامنة الرسائل مع الخادم                                | <p><code>InboxMessagesModel.updateMessages</code><br/>يتم تنفيذها أثناء تهيئة SDK</p>                                              |
| حذف الرسائل القديمة                                           | <p><code>InboxMessagesModel.updateMessages</code><br/>يتم تنفيذها أثناء تهيئة SDK</p>                                              |
| تلقي عدد الرسائل غير المقروءة لتحديث الشارة            | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>يتم تنفيذها يدويًا (بعد تشغيل حدث <code>onUpdateInboxMessages</code>)</p> |
| تحميل الرسائل لعرضها في Inbox                            | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>يتم تنفيذها يدويًا (بعد تشغيل حدث <code>onUpdateInboxMessages</code>)</p>        |
| وضع علامة "مقروءة" على الرسائل التي تظهر في إطار العرض                         | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>يتم تنفيذها يدويًا</p>                                                            |
| تنفيذ إجراء مخصص للرسالة المفتوحة                  | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>يتم تنفيذها يدويًا</p>                                                  |
| حذف الرسائل بالنقر على أيقونة الحذف أو السحب لليمين على رسالة | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>يتم تنفيذها يدويًا</p>                                                  |

## مستمعو الأحداث (Event listeners)

```javascript title="onUpdateInboxMessages"
// Executed after the Inbox is updated automatically while the page is loading. 
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB. 
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## الوحدة العامة (Public module)

تقدم **WebSDK InboxMessagesPublic module** واجهة عامة لتطبيق Web Inbox.

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depends on action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;
 
 
interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date
  type: TInboxMessageType;  // depends on action_params
  isRead: boolean;  // true if status is "read" or "open"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // true if status is "open"
}
```

## الطرق العامة (Public methods)

تحقق من أوصاف الطرق العامة في [دليل Web Push SDK 3.0](/ar/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).