الواجهات والتصميم

Web Push Notifications

نفّذ إشعارات دفع المتصفح عشان تعيد تفاعل المستخدمين بتحديثات مناسبة حتى لو موقعك مش مفتوح.

Claude Code Cursor Copilot Windsurf

نظرة عامة

يتيح Web Push API لتطبيق الويب إرسال إشعارات للمستخدمين حتى عندما يكون المتصفح مغلقًا. يمكن لعملاء الذكاء الاصطناعي تنفيذ تدفق إشعارات الدفع الكامل: طلب الإذن، والاشتراك في الدفع، وتخزين الاشتراكات على الخادم، وإرسال الإشعارات عبر بروتوكول Web Push.

يتطلب التنفيذ كود من جانب العميل (تسجيل Service Worker واشتراك الدفع) وكود من جانب الخادم (تخزين الاشتراكات وإرسال رسائل الدفع باستخدام مفاتيح VAPID). يمكن لعميل الذكاء الاصطناعي إنشاء المجموعة الكاملة: Service Worker الذي يتعامل مع أحداث الدفع، وتدفق الاشتراك من جانب العميل مع تجربة مستخدم مناسبة للأذونات، ونقطة النهاية من جانب الخادم باستخدام مكتبات مثل web-push.

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

لمن هذه الأداة؟

فرق SaaS بتنفذ إشعارات فورية للمستخدمين
مطورو تجارة إلكترونية بيبعتوا حالة الطلب وتنبيهات الأسعار
منصات محتوى بتبلّغ المستخدمين عن منشورات جديدة
فرق بتبني تطبيقات تعاونية مع إشعارات النشاط

التثبيت

إعداد Claude Code

npm install web-push
# Generate VAPID keys: npx web-push generate-vapid-keys

الإعدادات

// Server-side push
import webpush from "web-push";

webpush.setVapidDetails(
  "mailto:admin@example.com",
  process.env.VAPID_PUBLIC_KEY,
  process.env.VAPID_PRIVATE_KEY
);

await webpush.sendNotification(subscription, JSON.stringify({
  title: "New Message",
  body: "You have a new notification",
  icon: "/icon-192.png",
}));

زيارة المصدر (مستندات MDN)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor