Vue Academy · درس

الإشعارات الفورية في Vue PWA

‏Push API وNotification API ومفاتيح VAPID، والاشتراك للمستخدمين، والإرسال من الخادم

الإشعارات الفورية في Vue PWA درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

إشعارات الدفع في تطبيق PWA

تتيح Web Push لخادمك إرسال إشعارات إلى المستخدم حتى عندما يكون التطبيق مغلقًا. وهي تجمع بين Notification API وPush API وعامل الخدمة، وتعتمد جميعها على إذن المستخدم الصريح.

طلب الإذن

يجب أن تطلب الإذن قبل الاشتراك. تُرجع Notification.requestPermission() وعدًا تُحسم نتيجته إلى "granted" أو "denied" أو "default".

const permission = await Notification.requestPermission();
if (permission === "granted") {
  // proceed to subscribe
}

التشغيل استجابةً لإجراء من المستخدم

تتطلب المتصفحات أن يظهر طلب الإذن بعد إجراء من المستخدم، مثل النقر على زر. لا تطلب الإذن عند تحميل الصفحة، إذ سيُتجاهل الطلب أو سيتسبب في إزعاج المستخدمين.

<button @click="enableNotifications">
  Enable notifications
</button>

الحصول على تسجيل عامل الخدمة

توجد اشتراكات الدفع ضمن تسجيل عامل الخدمة النشط. انتظر navigator.serviceWorker.ready للحصول عليه.

const registration = await navigator.serviceWorker.ready;

The applicationServerKey

يستخدم الدفع مفاتيح VAPID. يحتفظ الخادم بالمفتاح الخاص، بينما يشترك العميل باستخدام المفتاح العام بعد تحويله إلى Uint8Array.

function urlBase64ToUint8Array(base64) {
  const padding = "=".repeat((4 - base64.length % 4) % 4);
  const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}

pushManager.subscribe

أنشئ الاشتراك من خلال pushManager الخاص بالتسجيل. عيّن userVisibleOnly: true ومرّر applicationServerKey بعد تحويله.

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});

سبب userVisibleOnly

يضمن userVisibleOnly: true أن يعرض كل إشعار دفع إشعارًا مرئيًا. وتطلبه المتصفحات لمنع التتبع الصامت في الخلفية.

إرسال الاشتراك إلى خادمك

يحتوي كائن الاشتراك على نقطة النهاية والمفاتيح التي يحتاج إليها الخادم. أرسله باستخدام POST إلى الواجهة الخلفية لتخزينه وإجراء عمليات إرسال لاحقة.

await fetch("/api/subscribe", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(subscription)
});

يرسل الخادم إشعار دفع

تستخدم الواجهة الخلفية مكتبة Web Push والمفتاح الخاص لـ VAPID لدفع حمولة إلى نقطة النهاية المخزنة.

// Node backend (web-push library)
webpush.sendNotification(
  subscription,
  JSON.stringify({ title: "Hello", body: "New message" })
);

استقبال الدفع في عامل الخدمة

يتولى عامل الخدمة معالجة حدث push ويستدعي showNotification لعرض الإشعار.

// service worker
self.addEventListener("push", (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/pwa-192.png"
    })
  );
});

معالجة النقرات على الإشعارات

استجب للنقرات باستخدام حدث notificationclick لتركيز التطبيق أو فتحه على الصفحة الصحيحة.

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/inbox"));
});

تحقق سريع

لماذا يُشترط استخدام userVisibleOnly: true عند الاشتراك في الدفع؟

ملخص

تبدأ Web Push باستخدام Notification.requestPermission() استجابةً لإجراء من المستخدم، ثم باستخدام registration.pushManager.subscribe مع userVisibleOnly: true وapplicationServerKey. أرسل الاشتراك إلى خادمك، الذي يدفع الحمولات ويتولى عامل الخدمة استقبالها في حدث push وعرضها باستخدام showNotification.

الأسئلة الشائعة

هل درس «الإشعارات الفورية في Vue PWA» مجاني؟

نعم — نص درس «الإشعارات الفورية في Vue PWA» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «الإشعارات الفورية في Vue PWA»؟

‏Push API وNotification API ومفاتيح VAPID، والاشتراك للمستخدمين، والإرسال من الخادم تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الإشعارات الفورية في Vue PWA»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy