البدء السريع: الويب

يستخدم تأكيد معيار Web Push مباشرة من دون Firebase. يعمل في Chrome وEdge وFirefox وSafari. على iPhone لا تعمل إشعارات الويب إلا بعد إضافة الموقع إلى الشاشة الرئيسية؛ وهذا قيد يفرضه المتصفح.

1اسمح لنطاق موقعك#

افتح التطبيق ثم الإعدادات ← الإعدادات العامة ← بيانات التطبيق، وأضف النطاق ضمن نطاقات الويب المسموح بها، مثل https://app.example.com. استخدم https://*.example.com إذا أردت السماح لكل النطاقات الفرعية.

يجب أن يكون الموقع عبر HTTPS. لا تضف مسار صفحة، بل أصل النطاق فقط.

2استضف ملف Service Worker#

انسخ الملف /sdk/v1/TakeedSDKWorker.js من تأكيد إلى موقعك، مثل /push/TakeedSDKWorker.js. يجب أن يُخدَم الملف من نطاق موقعك نفسه، وليس من نطاق تأكيد.

مسار الملف يحدد الصفحات التي يستطيع التحكم بها. لذلك نمرر serviceWorkerScope صراحة في المثال التالي.

3حمّل المكتبة#

<script src="https://takeed-iq.com/sdk/v1/takeed.js" defer></script>
<script>
  window.TakeedDeferred = window.TakeedDeferred || [];
  TakeedDeferred.push(async (Takeed) => {
    await Takeed.init({
      appId: 'YOUR-APP-ID',
      serviceWorkerPath: '/push/TakeedSDKWorker.js',
      serviceWorkerScope: '/push/',
    });
  });
</script>

الـ App ID معرّف عام، ويمكن وضعه في الواجهة. أما مفتاح API فهو سري ولا يجوز وضعه في JavaScript أو في Service Worker.

مفتاح VAPID ليس مفتاح Authorization#

ينشئ تأكيد زوج مفاتيح VAPID لإشعارات الويب تلقائيًا. يُرسل مفتاح VAPID العام عمدًا إلى Web SDK حتى ينشئ المتصفح اشتراك Push تابعًا لتأكيد. هذا المفتاح آمن للعرض، ولا يستطيع المصادقة على طلبات REST أو OTP. أما المفتاح الخاص فيبقى داخل تأكيد ويوقّع طلبات Web Push عند الإرسال.

لاستدعاءات الخادم أنشئ مفتاحًا سريًا مختلفًا من الإعدادات ← إعدادات OTP ← الربط البرمجي — Authorization، واستخدمه بالشكل Authorization: Key <key>. يظهر المفتاح كاملًا مرة واحدة بعد إنشائه؛ إذا لم تحفظه فأنشئ مفتاحًا جديدًا. لا تضع مفتاح VAPID في ترويسة Authorization.

4اطلب الإذن#

اطلب الإذن بعد فعل واضح من المستخدم، مثل الضغط على زر، وليس فور فتح الصفحة:

await Takeed.Notifications.requestPermission();

إذا كان المستخدم قد سمح بالإشعارات من قبل، تعيد المكتبة تسجيل الاشتراك بهدوء.

5عرّف المستخدم#

await Takeed.login('user-42'); // أو login('user-42', identityHash)
await Takeed.User.addTags({ plan: 'gold' });

Takeed.Notifications.addEventListener('click', (event) => {
  console.log(event);
});

await Takeed.logout();

إذا فعّلت التحقق من الهوية في إعدادات التطبيق، أنشئ identityHash على خادمك باستخدام سر الهوية ولا تنشئه داخل المتصفح.

التحقق#

افتح اختبار الإشعارات وأرسل إلى جهازك، ثم راجع سجل الإشعارات لمعرفة حالة الإرسال والوصول والفتح. إذا ظهر origin_not_allowed فتحقق من HTTPS ومن مطابقة النطاق تمامًا للقائمة المسموحة.