إعداد صندوق رسائل الويب
المتطلبات الأساسية
Anchor link toتأكد من أنك قمت بتنفيذ Pushwoosh Web SDK على موقع الويب الخاص بك. للقيام بذلك، يرجى اتباع دليلنا.
صندوق الرسائل لمواقع الويب يسمح لك بتخزين إشعارات الويب حتى يتمكن المستخدمون من إعادة زيارتها لاحقًا، مما يضمن رؤية الرسائل المهمة.
كيف يعمل
Anchor link toإليك سير عمل نموذجي مع InboxMessages:
| الخطوة | الطريقة |
|---|---|
| تحميل الصفحة | |
| مزامنة الرسائل مع الخادم |
|
| حذف الرسائل القديمة |
|
| استلام عدد الرسائل غير المقروءة لتحديث شارة |
|
| تحميل الرسائل لعرضها في صندوق الوارد |
|
| وضع علامة على الرسائل التي ظهرت في منفذ العرض كمقروءة |
|
| تنفيذ إجراء مخصص للرسالة المفتوحة |
|
| حذف الرسائل بالنقر على أيقونة الحذف أو سحب الرسالة إلى اليمين |
|
مستمعو الأحداث
Anchor link to// يتم التنفيذ بعد تحديث صندوق الوارد تلقائيًا أثناء تحميل الصفحة.Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) { pwinbox.loadMessages().then(function(messages) { console.log('EVENT: onUpdateInboxMessages', messages); });}]);// يتم التنفيذ بواسطة ServiceWorker بعد استلام رسالة صندوق الوارد وحفظها في indexedDB.Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) { console.log('EVENT: onPutNewMessageToInboxStore', message);}]);الوحدة العامة
Anchor link toتقدم وحدة WebSDK InboxMessagesPublic واجهة عامة لتنفيذ صندوق رسائل الويب.
type TInboxMessageTypePlain = 0;type TInboxMessageTypeRichmedia = 1;type TInboxMessageTypeURL = 2;type TInboxMessageTypeDeeplink = 3;type TInboxMessageType = TInboxMessageTypePlain // depends on action_params | TInboxMessageTypeRichmedia | TInboxMessageTypeURL | TInboxMessageTypeDeeplink;
type TInboxLayout = 'classic' | 'banner' | 'captioned' | 'carousel';
interface IInboxMessageSlide { imageUrl: string; caption: string; // caption overlaid on the slide; empty when the slide has none link: string; // where a tap on the slide goes; empty when the slide has none, and the message's own action applies instead}
interface IInboxMessagePublic { code: string; // inbox_id title: string; // title message: string; // body imageUrl: string; // image sendDate: string; // send_date, ISO 8601 in UTC 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" layout: TInboxLayout; // cell layout to draw, already degraded to one this message can render iconUrl: string; // small round avatar; same value as imageUrl, under the name the layouts use heroUrl: string; // hero image; falls back to iconUrl when the message has no banner, so it's set for classic messages too carousel: Array<IInboxMessageSlide>; // slides of the carousel layout; empty for every other layout customData: Record<string, unknown>; // the campaign's own custom data, as sent from the control panel}تخطيطات الخلية. تُعرض الرسالة بأحد أربعة تخطيطات — classic، banner، captioned، أو carousel — وهي نفس التخطيطات التي تظهر في معاينة الحملة في لوحة التحكم. التخطيط الذي لا يمكن عرضه بما تحمله الرسالة يتم تخفيضه إلى classic: يحتاج banner إلى صورة بطل (hero image)، ويحتاج captioned إلى صورة بطل بالإضافة إلى عنوان ونص، ويحتاج carousel إلى شريحة واحدة على الأقل بالإضافة إلى عنوان ونص. layout في الرسالة العامة هو دائمًا التخطيط الذي يتم رسمه فعليًا، بعد تخفيضه.
التحقق من layout هو الطريقة الموثوقة الوحيدة لمعرفة كيف ستُعرض الرسالة — يتم تعيين heroUrl لرسائل classic أيضًا (انظر ملاحظة الحقل أعلاه)، لذا يجب ألا يستخدم التكامل وجوده ليقرر ما إذا كان سيرسم صورة البطل (hero).
الطرق العامة
Anchor link toاطلع على أوصاف الطرق العامة في دليل Web Push SDK 3.0.
Pushwoosh.pwinbox.syncMessages() يسحب صندوق الوارد الحالي من الخادم؛ استدعه لفرض تحديث خارج الاستقصاء الخاص بالأداة المدمجة.