إنشاء تأثير إشعارات على الهاتف المحمول والكمبيوتر باستخدام JS

تم الانتهاء من معظم اختبارات المشروع اليوم، لذا استخدمت وقت الفراغ لكتابة مقالتين. المقالة السابقة《كيفية بناء مشروع node》أعتقد أن الجميع الذين يحتاجون إلى التعلم قد شاهدوها. تأثير المقالة الأخيرة الذي تم عرضه كان رائعًا، لذا أردت أن أقوم بتسجيله هنا، حتى أتمكن من الرجوع إليه في المستقبل.
ما زلنا نستخدم نفس الأسلوب كما من قبل، سنشرح خطوة بخطوة، مما يجعل من السهل فهم الفكر.

لنبدأ بالنتائج أولاً:

انتبهوا إلى الزاوية السفلية اليمنى، حيث تظهر الرسائل المنبثقة، نحن نحقق هذا التأثير.

بعد رؤية التأثير، دعونا ندخل في نموذج الشرح الموزع………..

الخطوة الأولى:كتابة هيكل أساسي

كل الكود التالي مكتوب داخل علامة script، يكفي أن تهتموا بمحتوى علامة script فقط:

  <!DOCTYPE html>
  <html>
  <head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="eric.wu" name="author">
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta property="qc:admins" />
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>مثال على إرسال الرسائل</title>
  </head>
  <body>
     انظر إلى الأسفل اليمين، إشعارات الرسائل..........
  </body>
  </html>
  <script type="text/javascript">
  </script>

الخطوة الثانية:تحديد ما إذا كان المتصفح يدعم API إخطارات الويب

في هذا المكان نقوم بتحديد ما إذا كان يدعم API إخطارات الويب، فقط إذا كان يدعم هذا الشئ يمكننا المضي قدمًا في الأمور.

   function justify_notifyAPI(){
      if (window.Notification) {
        // يدعم
        console.log("يدعم"+"Web Notifications API");
      } else {
        // لا يدعم
        console.log("لا يدعم"+"Web Notifications API");
      }
    }

الخطوة الثالثة:تحديد ما إذا كان المتصفح يدعم مثال منبثق

هنا نجد نافذة منبثقة، لتحديد ما إذا كان المتصفح يدعم مثال منبثق (يمكنك تغيير عنوان الصورة إلى عنوانك الخاص)

function justify_showMess(){
  if(window.Notification && Notification.permission !== "denied") {
    Notification.requestPermission(function(status) {
      if (status === "granted") {
        var n = new Notification('مستلم رسالة:-O', {
          body: 'هذه محتوى الإشعار! ماذا تريد أن ترى صاحب الفضل؟',
          icon: "../../images/headerPic/QQ图片20160525234650.jpg"
        });
      } else{
        var n = new Notification("يا صغير! سأتركك!");
      }
    });
  }
}

الخطوة الرابعة:عرض مثال على المحتوى المنبثق

ميزة التركيب لـ Notification هي إلزامية، تستخدم لتعيين عنوان الإخطار، نمطه كحرف. يمكن أن تكون الخاصية options اختيارية، نمطها كعنصر، يستخدم لتعيين الإعدادات المختلفة. خصائص هذا العنصر كالتالي:

اتجاه النص: القيمة المحتملة هي auto، ltr (من اليسار إلى اليمين) و rtl (من اليمين إلى اليسار)، عادة ما يتم توريث إعدادات المتصفح.

اللغة: اللغة المستخدمة، مثل en-US、zh-CN.

النص: محتوى الإخطار، نمطه كحرف، يستخدم لشرح أهداف الإخطار.

العلامة: معرف الإخطار، نمطه كحرف. لن يتم عرض مجموعة إخطارات بنفس العلامة في نفس الوقت، بل سيتم عرضها فقط بعد إغلاق الإخطار السابق في نفس الموقع.

الإشارة: عنوان الرسم البياني، يستخدم لعرضه في الإخطار.

  function otification_construct(){
  var notification = new Notification('مستلم بريد جديد', {
    body: 'لديك بريد غير قرأ من xuejing.',
    dir: "auto",
    lang: "zh-CN",
    tag: "a1",
    icon: "../../images/headerPic/772513932673948130.jpg"
  });
  console.log(notification.title); // "New email received"
  console.log(notification.body); // "You have 3 unread emails."
}

الخطوة الخامسة:مستندات API للإخطارات

ستثير كائنات Notification التالية ثلاثة أنواع من الأحداث:
show: يتم إطلاق هذا الحدث عند عرض الإشعار للمستخدم.

click: يتم إطلاق هذا الحدث عند النقر المستخدم على الإشعار.

close: يتم إطلاق هذا الحدث عند إغلاق المستخدم للإشعار.

error: يتم إطلاق هذا الحدث عند حدوث خطأ في الإشعار (يظهر عند عدم ظهور الإشعار بشكل صحيح).

هذه الأحداث لها طرق onshow، onclick، onclose، onerror، لتحديد الدوال التراجعية. يمكن أيضًا استخدام دالة addEventListener لتعيين الدوال التراجعية لهذه الأحداث.

function otification_event(){
  var MM = new Notification("Hi! My beautiful little princess!",{
    body: 'لديك بريد إلكتروني من الفضاء الخارجي.';
    icon:"../../images/headerPic/20100114212301-1126264202.jpg"
  });
  MM.onshow = function() {
    console.log('إظهار إشعار!');
  };
  MM.onclick = function() {
    console.log('تم النقر على إشعار!');
  };
  MM.onerror = function() {
    console.log('تم النقر على إشعار!');
    // إغلاق يدوي
    MM.close();
  };
}

تم شرح الفئات الأساسية هنا، وسيتم تقديم كود المثال للفعالية هنا:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta content="eric.wu" name="author">
  <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
  <meta property="qc:admins" />
  <meta content="telephone=no, address=no" name="format-detection">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <title>Web Notifications API</title>
</head>
<body>
 انظر إلى الأسفل اليمين، إشعارات الرسائل..........
</body>
</html>
<script type="text/javascript">
  window.onload= function(){}
    justify_notifyAPI();   //تحقق من دعم المتصفح لمكتبة Web Notifications API
    justify_showMess();   //هل يدعم المتصفح نافذة التبليغات؟
    otification_construct(); //عرض محتوى النافذة المنبثقة
    otification_event();   //حدث API Notifications 
  }
  // هل يدعم المتصفح API Web Notifications 
  function justify_notifyAPI(){
    if (window.Notification) {
      // يدعم
      console.log("يدعم"+"Web Notifications API");
    } else {
      // لا يدعم
      console.log("لا يدعم"+"Web Notifications API");
    }
  }
  // هل يدعم المتصفح نافذة التبليغات؟
  function justify_showMess(){
    if(window.Notification && Notification.permission !== "denied") {
      Notification.requestPermission(function(status) {
        if (status === "granted") {
          var n = new Notification('مستلم رسالة:-O', {
            body: 'هذه محتوى الإشعار! ماذا تريد أن ترى صاحب الفضل؟',
            icon: "../../images/headerPic/QQ图片20160525234650.jpg"
          });
          // alert("Hi! this is the notifyMessages!");
        } else{
          var n = new Notification("يا صغير! سأتركك!");
        }
      });
    }
  }
  // عرض محتوى النافذة المنبثقة
  function otification_construct(){
    var notification = new Notification('مستلم بريد جديد', {
      body: 'لديك بريد غير قرأ من xuejing.',
      dir: "auto",
      lang: "zh-CN",
      tag: "a1",
      icon: "../../images/headerPic/772513932673948130.jpg"
    });
    console.log(notification.title); // "New email received"
    console.log(notification.body); // "You have 3 unread emails."
  }
  //أحداث API الإشعارات
  function otification_event(){
    var MM = new Notification("Hi! My beautiful little princess!",{
      body: 'لديك بريد إلكتروني من الفضاء الخارجي.';
      icon:"../../images/headerPic/20100114212301-1126264202.jpg"
    });
    MM.onshow = function() {
      console.log('إظهار إشعار!');
    };
    MM.onclick = function() {
      console.log('تم النقر على إشعار!');
    };
    MM.onerror = function() {
      console.log('تم النقر على إشعار!');
      // إغلاق يدوي
      MM.close();
    };
  }
</script>

هذا هو نهاية محتوى هذا المقال، آمل أن يكون مفيدًا للعديد منكم، وأتمنى أن يتم دعم وتشجيع تعليمات النطق.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، حقوق النشر تخص صاحب العمل، المحتوى تم إدراجه من قبل مستخدمي الإنترنت بشكل متعاوني وأعلى، الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، فإن الموقع سيزيل المحتوى المشبوه فورًا.

تعليمية الأساس

سيكون لك أن تحب