تنفيذ إعلام سطح المكتب في Html5

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

 Let n = new Notification( هذه رسالة إعلام، // هذا هو العنوان المطلوب وعنوان الإشعار الذي سيتم عرضه { icon: xxx.png, // يُستخدم هذا الرمز لعرض الصورة اليسرى في نص الإشعار: مرحبًا، أنا xxx، // أحرف المحتوى في الإشعار dir: auto، // تتضمن قيمة اتجاه النص: auto (تلقائي)، ltr (من اليسار إلى اليمين)، rtl (من اليمين إلى اليسار) العلامة: gxlself / / أعط مع معرف لرسالة الإعلام هذه، يتم استخدامه للتحديث والإزالة والاستبدال والعمليات الأخرى على رسالة الإعلام هذه // long: en-US // يحتاج حقل اللغة إلى الرجوع إلى https://tools.ietf.org/html/bcp47 لا يوجد تأثير .. // ... // راجع خصائص المثيل أدناه للحصول على خصائص اختيارية أخرى})

n.actions // مصفوفة للقراءة فقط من كائنات NotificationAction. يصف كل كائن إجراءً واحدًا يمكن للمستخدم تحديده في الإشعار.

n.image // عنوان URL للصورة المعروضة كجزء من الإشعار

n.badge // عنوان URL للصورة المستخدمة لتمثيل الإشعار عندما لا تكون هناك مساحة كافية لعرض الإشعار نفسه.

n.permission // هناك ثلاث قيم: granted ، أو denied ، أو default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝

n.renotify // القيمة المنطقية. ما إذا كان سيتم استبدال الإشعار السابق عند ظهور إشعار جديد. إذا تم التعيين على "صحيح"، فهذا يعني الاستبدال، مما يعني أنه لن يظهر سوى إشعار واحد بالعلامة الحالية. لاحظ الترميز الحالي هنا؟ هذا صحيح، لكي تعمل المعلمة true ، tag必须بتعيين قيمة السمة.

n.requireInteraction // تشير القيمة المنطقية إلى ما إذا كان الإشعار سيظل نشطًا حتى ينقر المستخدم على الإشعار أو يلغيه بدلاً من الإغلاق تلقائيًا.

n.صامت // قيمة منطقية. ما إذا كان يجب أن يكون هناك صوت عند ظهور الإشعار. الافتراضي false ، وهو ما يعني صامت.

n.timestamp // الوقت الذي يتم فيه إنشاء الإشعار أو استخدامه.

n.data // أي نوع من البيانات المرتبطة بالإشعار.

n.vibrate // عند عرض الإشعار، يتم تحديد وضع الاهتزاز الذي تتطلبه أجهزة اهتزاز الجهاز. يشير ما يسمى بوضع الاهتزاز إلى مصفوفة تصف وقت التناوب، والذي يمثل عدد المللي ثانية من الاهتزاز وعدم الاهتزاز على التوالي، ويستمر في التناوب. على سبيل المثال، يعني [200، 100، 200] أن الجهاز يهتز لمدة 200 مللي ثانية، ثم يتوقف لمدة 100 مللي ثانية، ثم يهتز لمدة 200 مللي ثانية. (نسخة الجوال)

ن. الصوت // سلسلة. عنوان الصوت. يشير إلى الإخطار بوجود مصدر صوت ليتم تشغيله.

n.sticky // ليس من السهل مسح امتصاص الإشعارات... (نسخة الجوال)

n.noscreen // قيمة منطقية. ما إذا كان سيتم إيقاف عرض معلومات الإشعارات على الشاشة. الإعداد الافتراضي هو false ، مما يعني أنه يجب عرض محتوى الإشعار على الشاشة. (نسخة الجوال)

1> حدث نقر المستخدم عند النقر على معلومات الإشعارات

2> حدث onshow الذي يتم تشغيله بعد عرض رسالة الإعلام

3> onerror هو حدث سيتم تشغيله عند مواجهة خطأ ما.

4> التعامل مع حدث الإغلاق القريب

تجدر الإشارة إلى أن طريقة requestPermission() صالحة فقط في كائن الإشعارات، وليس كائن المثيل !!! يتم استخدام هذه الطريقة لتقديم طلب إلى المستخدم للحصول على إذن لعرض الإشعارات، ولا يمكن استدعاؤها إلا من قبل المستخدم ( يمكن استدعاؤه في صفحة التحميل، وتطبيقه على المستخدم وإرساله لاحقًا...)

الأساليب التي تمتلكها كائنات المثيل هي:

(1).يُستخدم Close() لإغلاق رسائل الإعلام --> يمكنك أيضًا إضافة مكالمة متأخرة إلى طريقة onshow لتحسين تجربة المستخدم...

(2). addEventListener() يستمع للأحداث (هذه الطريقة العامة).

(3). يقوم RemoveEventListener بإلغاء تثبيت أحداث الاستماع (عام، كما هو مذكور أعلاه).

(4) حدث إرسال الحدث (كما هو مذكور أعلاه)

بعد ذلك، اكتب اختبار js. إذا كنت تستخدم Google Chrome، فمن المستحسن عرض الإشعارات في الإعدادات وإضافة عنوان الخدمة المحلي للسماح بالإشعارات.

ومع ذلك، يتم إغلاق اسم نطاق http افتراضيًا في Google Chrome ولا يُسمح بتغييره. تحقق من وحدة تحكم Google Chrome بحثًا عن رسالة تحذير --->

Index.js:78 [Deprecation] لم يعد من الممكن استخدام واجهة برمجة تطبيقات الإشعارات من أصول غير آمنة، ويجب أن تفكر في تحويل تطبيقك إلى مصدر آمن، مثل HTTPS، راجع https://goo.gl/rStTGz لمزيد من التفاصيل.

حسنًا، حسنًا، إن إضافة شهادة https أمر سام حقًا... على الرغم من أن إضافة هذه الوظيفة إلى صفحتك الرئيسية لا يمكن إلا أن تكون متعة في Firefox...

(تحتوي Tencent Cloud على شهادة SSL مجانية لمدة عام واحد، ويمكنك تثبيتها بنفسك...)

 // Index.jswindow.onload = function(){ Let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ buildor(){ this. isNotificationSupported = إعلام في النافذة } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ Let Permission = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return } if (!this.isPermissionGranted()) { return } var n = new Notification(gxlself يرسل تحياتي إليك, { icon : 'gxlself.png', body : 'مرحبًا بزيارتك، أنا ممتن جدًا! انقر للانتقال إلى صفحة مدونتي ~' }); n.onshow = function () { console .log("أرسل gxlself معلومات الإشعار"); setTimeout(function() { n.إغلاق(); }, 5000); location.href = 'http://gxlself.com/blog' n. Close() } n.onerror = function (err) { console.log(err) } n.onclus = function () { console.log(' نافذة رسالة gxlself مغلقة') } } }

وهذا هو عرض التأثير بعد تشغيل متصفح Firefox:

دعونا نلقي نظرة على تأثير تشغيل Google محليًا: (تم اعتراض اسم النطاق وإيقافه افتراضيًا. لقد تم شرحه أعلاه ولن يتكرر)

إن تأثير Google جيد جدًا في الواقع، حسنًا... كل ما في الأمر أن https قام بحظري...

------- تطبيق سطح المكتب -----------

عندما تريد استخدام الإشعارات في تطبيق ويب مفتوح، تأكد من إضافة إذن desktop-notification إلى ملف البيان الخاص بك. يمكن استخدام الإشعارات على أي مستوى إذن، مستضاف أو أعلى.

 الأذونات: {إشعار سطح المكتب:{} }

يعد هذا الإشعار أكثر متعة، وهو أيضًا جزء مهم من إرسال الرسائل في المستقبل. اترك هذا السجل... آمل أن يكون مفيدًا لدراسة الجميع، وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.