دفع الإخطارات: هندسة استراتيجية شاشة القفل

“نحن بحاجة إلى تطبيق حتى نتمكن من إرسال إشعارات الدفع.” لمدة عقد من الزمن، كان هذا هو السبب الوحيد الذي جعل العلامات التجارية تنفق 100 ألف يورو على إنشاء تطبيقات محلية. كانت الويب صامتة. إذا أغلق المستخدم علامة التبويب، فقدتها.

لقد انتهى هذا العصر. مع iOS 16.4 (2023)، قامت Apple أخيرًا بتمكين Web Push لتطبيقات الويب على الشاشة الرئيسية. تم إغلاق الفجوة بين “التطبيق الأصلي” و”موقع الويب” بشكل فعال.

في Maison Code Paris، لا ننظر إلى خدمة Push كقناة تسويقية، بل باعتبارها ملحقًا لواجهة المستخدم. إنها طريقة لعرض الحالة الحرجة (“سيارة الأجرة الخاصة بك هنا”، “تم شحن طلبك”) على سطح الجهاز الأكثر خصوصية للمستخدم: شاشة القفل.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

الهندسة المعمارية: كيف يعمل دفع الويب

على عكس Native Push (الذي يعتمد على بروتوكولات APNs/FCM الخاصة)، يعد Web Push معيارًا مفتوحًا (RFC 8291). أنها تنطوي على ثلاثة جهات فاعلة:

1. ** وكيل المستخدم (المتصفح) **: يُنشئ اشتراكًا.
2. خدمة الدفع: خادم يديره بائع المتصفح (Mozilla، Google، Apple) والذي يقوم بتوجيه الرسائل.
3. خادم التطبيق (أنت): يقوم بتشغيل الرسالة.

مفاتيح VAPID (طبقة الأمان)

كيف تعرف Apple أنك أنت من يرسل الإشعار، وليس مرسلي البريد العشوائي الذي ينتحل نطاقك؟ VAPID (تعريف خادم التطبيق الطوعي).

يمكنك إنشاء زوج مفاتيح عام/خاص.

• المفتاح العام: يتم إرساله إلى المتصفح أثناء الاشتراك.
• المفتاح الخاص: يستخدم للتوقيع على كل رسالة دفع (JWT).

إذا لم يتطابق التوقيع مع المفتاح العام المخزن على الجهاز، فستقوم خدمة الدفع بإسقاط الرسالة. وهذا يمنع “الاختطاف بالدفع”.

مرحلة التنفيذ 1: عامل الخدمة

عامل الخدمة هو العقل المدبر للعملية. وهو يعيش في الخلفية، حتى عندما تكون علامة التبويب مغلقة. لا يمكنك التعامل مع أحداث الدفع في حزمة React الرئيسية (app.js). يجب عليك التعامل معها في sw.js.

// public/sw.js

self.addEventListener('push', function(event) {
  إذا عاد (!event.data)؛

  const payload = events.data.json();
  const { العنوان، النص، الرمز، عنوان url، الإجراءات } = الحمولة؛

  خيارات ثابتة = {
    الجسم,
    أيقونة: أيقونة || "/icon-192.png"،
    الشارة: '/badge-monochrome.png'، // رمز صغير لشريط حالة Android
    البيانات: { url }, // قم بتخزين الرابط العميق
    الأفعال : الأفعال || []، // الأزرار التفاعلية
    العلامة: "تحديث الطلب"، // طي الإشعارات المتعددة في إشعار واحد
    إعادة إعلام: صحيح،
  };

  حدث. انتظر حتى (
    self.registration.showNotification(العنوان، الخيارات)
  );
});

// التعامل مع النقرة
self.addEventListener('notificationclick', function(event) {
  Event.notification.Close(); // أغلق التنبيه
  const urlToOpen = events.notification.data.url || '/';

  حدث. انتظر حتى (
    Clients.matchAll({ type: 'window', includeUncontrolled: true }).then(windowClients => {
      // إذا كانت علامة التبويب مفتوحة بالفعل، قم بالتركيز عليها
      لـ (دع عميل windowClients) {
        إذا (client.url === urlToOpen && 'focus' في العميل) {
          إرجاع العميل. التركيز () ؛
        }
      }
      // وإلا افتح علامة تبويب جديدة
      إذا (clients.openWindow) {
        return Clients.openWindow(urlToOpen);
      }
    })
  );
});

مرحلة التنفيذ 2: الاشتراك في الواجهة الأمامية

إن مطالبة المتصفح (“example.com يريد إرسال إشعارات إليك”) أمر مرعب. يقوم المستخدمون بحظره عن طريق المنعكس. لا تستدعي أبدًا Notification.requestPermission() عند تحميل الصفحة.

نحن نستخدم نمط الإذن المزدوج.

1. السياق: ينقر المستخدم على “أخطرني عند توفر المخزون”.
2. مطالبة بسيطة: قم بعرض نموذج HTML لطيف. “سنرسل إليك تنبيهًا لمرة واحدة عند عودة هذا المنتج. هل تسمح بذلك؟”
3. مطالبة قوية: إذا قاموا بالنقر فوق “نعم”، فعندئذ* قم بتشغيل عملية التحقق من المتصفح الأصلي.

// المكونات/PushToggle.tsx
استيراد {urlBase64ToUint8Array} من './utils'؛

const PUBLIC_VAPID_KEY = 'BM...'; // مفتاحك العام

تصدير const PushToggle = () => {
  الاشتراك ثابت = غير متزامن () => {
    تسجيل ثابت = انتظار navigator.serviceWorker.ready؛
    
    // 1. طلب الإذن
    نتيجة const = انتظار Notification.requestPermission();
    إذا (النتيجة!== 'منح') العودة؛

// 2. اشترك في خدمة الدفع
    اشتراك ثابت = انتظار التسجيل.pushManager.subscribe({
      userVisibleOnly: صحيح،
      applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
    });

    // 3. أرسل نقطة نهاية الاشتراك إلى الواجهة الخلفية لديك
    في انتظار الجلب('/api/push/subscribe', {
      الطريقة: "POST"،
      النص: JSON.stringify (الاشتراك)،
      الرؤوس: { "نوع المحتوى": "التطبيق/json" }
    });
  };

  return <button onClick={subscribe}>تمكين التنبيهات</button>;
};

مرحلة التنفيذ 3: إرسال الواجهة الخلفية

نحن نستخدم مكتبة Node.js web-push للتعامل مع التشفير ورؤوس VAPID.

// API/Push/send.ts
استيراد webpush من "web-push" ؛

webpush.setVapidDetails(
  "ميلتو:admin@maisoncode.paris"،
  معالجة.env.VAPID_PUBLIC،
  Process.env.VAPID_PRIVATE
);

تصدير وظيفة غير متزامنة sendNotification(userSubscription, message) {
  حاول {
    في انتظار webpush.sendNotification(userSubscription, JSON.stringify({
      العنوان: "تم شحن الطلب"،
      body: "الطرد الخاص بك في الطريق عبر DHL.",
      عنوان URL: "/الطلبات/TRX-123"،
      الإجراءات: [
        { الإجراء: "المسار"، العنوان: "مسار الحزمة" }،
        { الإجراء: "إغلاق"، العنوان: "تجاهل" }
      ]
    }));
  } التقاط (خطأ) {
    إذا (error.statusCode === 410) {
      // الاشتراك ميت (قام المستخدم بحظرنا). حذف من قاعدة البيانات.
      في انتظار حذف الاشتراك (userSubscription.endpoint)؛
    }
  }
}

تحذير iOS 16.4: متطلبات PWA

قدمت شركة أبل نقطة احتكاك رئيسية. في Safari (iOS)، يتوفر Web Push فقط إذا قام المستخدم بإضافة الموقع إلى شاشته الرئيسية. لا يمكن لعلامة التبويب القياسية تلقي الدفع.

وهذا يعني أن استراتيجيتك يجب أن تركز على تثبيت PWA أولاً. أنت بحاجة إلى واجهة مستخدم “مطالبة التثبيت” (مماثلة لـ Push Soft Prompt) التي توجه المستخدم: “اضغط على مشاركة -> إضافة إلى الشاشة الرئيسية لتلقي تحديثات الطلب.”

بمجرد التثبيت (التشغيل بشكل عام في وضع العرض “المستقل”)، تصبح واجهة برمجة تطبيقات Push مفتوحة.

الإخطارات والإجراءات الغنية

يتيح الإشعار الإجراءات للمستخدمين التفاعل دون فتح التطبيق.

• “تم استلام رسالة جديدة.”
• الإجراء 1: “الرد” (يفتح إدخال النص).
• الإجراء 2: “وضع علامة كمقروء” (هل يتم استدعاء واجهة برمجة التطبيقات في الخلفية).

يؤدي هذا إلى تحويل الإشعار من “لافتة” إلى “لوحة تحكم”.

الأخلاق: الصبي الذي بكى الذئب

نسبة النقر إلى الظهور (CTR) للدفع مرتفعة (8-12%)، ولكن معدل إلغاء الاشتراك هائل. إذا قمت بإرسال إشعار واحد غير ذي صلة (“إنها تمطر! اشتري أحذية!”)، فسيقوم المستخدم بتعطيل الأذونات عالميًا. على عكس البريد الإلكتروني (مجلد البريد العشوائي)، لا يوجد حل وسط. إنه قيد التشغيل أو الإيقاف.

قاعدتنا: الدفع من أجل الخدمة. البريد الإلكتروني مخصص لـ التسويق.

• ✅ تم شحن الطلب.
• ✅ عودة العنصر إلى المخزون (طلب المستخدم).
• ✅ تأخرت الرحلة.
• ❌بدأت التخفيضات الشتوية.
• ❌ تحقق من منشور مدونتنا الجديد.

10. إدارة إجهاد الدفع (تحديد التردد)

إشعارات الدفع لها عوائد متناقصة بشكل صارم.

• الرسالة 1: 10% نسبة النقر إلى الظهور.
• الرسالة 2: 5% نسبة النقر إلى الظهور.
• الرسالة 3: 0.5% نسبة النقر إلى الظهور (و2% إلغاء الاشتراك). نقوم بتنفيذ تحديد التردد العالمي في Redis. “مستخدم INCR: 123: الدفع: العد” (TTL 24 ساعة). إذا كان العدد > 3، فإننا نسقط الرسائل التسويقية بصمت (لكننا نسمح دائمًا برسائل المعاملات). نحن نطبق أيضًا منطق “ساعات الهدوء” (لا توقظ المستخدم في الساعة 3 صباحًا إلا إذا اشتعلت النيران في منزله).

11. استراتيجية تثبيت iOS PWA

نظرًا لأنه يجب على المستخدمين تثبيت PWA للتمكن من استخدام نظام التشغيل iOS، فأنت بحاجة إلى استراتيجية. لا يمكنك فقط إظهار لافتة “إضافة إلى الشاشة الرئيسية”. يجب أن تقدم القيمة خلف جدار التثبيت.

• “قم بتثبيت التطبيق لتتبع الحزمة الخاصة بك في الوقت الحقيقي.”
• “قم بتثبيت التطبيق للحصول على خصم VIP بنسبة 10%.” نقوم ببناء “تعليمات التثبيت” المخصصة التي تكتشف إصدار نظام التشغيل الخاص بالمستخدم وتظهر السهم الدقيق الذي يشير إلى زر المشاركة.

13. الوسائط الغنية: الصور وملفات GIF

النص ممل. “لقد تم شحن حذائك” على ما يرام. “لقد تم شحن حذائك” + [صورة الحذاء الفعلي] أفضل. يدعم Web Push خاصية “الصورة”. ومع ذلك، يجب أن تكون حذرًا فيما يتعلق بنسب العرض إلى الارتفاع.

• Android: أفقي (2:1).
• النوافذ: مربع (1:1). نحن نبني لامدا “Image Resizer” الذي يقوم بإنشاء صور مصغرة خاصة بالجهاز أثناء إرسال الدفع.

14. إسناد التحليلات

كيف يمكنك معرفة ما إذا كان Push يؤدي إلى زيادة الإيرادات؟ لا يمكنك الاعتماد على “حركة المرور المباشرة”. يجب عليك وضع علامة على عناوين URL الخاصة بك. url: '/product/123?utm_source=web_push&utm_campaign=black_friday'. ولكن أيضًا، استمع إلى حدث notificationclick لإطلاق اختبار اتصال Analytics مخصص قبل فتح النافذة. يؤدي هذا إلى التقاط “التفاعل” حتى إذا فشل تحميل الصفحة.

15. الاستنتاج

تعد إشعارات الدفع أقوى سلاح في ترسانة الاحتفاظ. بالنسبة لتجار التجزئة ذوي التردد العالي (البقالة، قطرات الأزياء)، فهي ضرورية. ولكنها تتطلب منهجًا هندسيًا منضبطًا: إدارة عمال الخدمة الصلبة، وأمن VAPID، واستراتيجية تجربة مستخدم محترمة.

تساعد Maison Code العلامات التجارية على التنقل في هذا الفضاء، وتحويل شاشة القفل إلى قناة تحويل، وليست مصدر إزعاج.

---

امتلك شاشة القفل

هل تريد معدلات مفتوحة بنسبة 90%؟

[إنشاء PWA بالدفع](/جهة الاتصال). قم بتوظيف مهندسينا.