الخطوة 3: إضافة المنبّهات والإشعارات

في هذه الخطوة، ستتعلم ما يلي:

  • كيفية تنشيط تطبيقك على فترات زمنية محدّدة لتنفيذ مهام الخلفية
  • كيفية استخدام الإشعارات التي تظهر على الشاشة للفت الانتباه إلى شيء مهم.

الوقت المقدَّر لإكمال هذه الخطوة: 20 دقيقة. لمعاينة ما ستكمله في هذه الخطوة، انتقِل إلى أسفل هذه الصفحة ↓.

تحسين تطبيق Todo باستخدام التذكيرات

يمكنك تحسين تطبيق Todo من خلال إضافة وظيفة لتذكير المستخدم إذا كان لديه مهام مفتوحة، حتى عندما يكون التطبيق مغلقًا.

أولاً، يجب إضافة طريقة للتطبيق من أجل التحقق بانتظام من المهام غير المكتملة. بعد ذلك، يحتاج التطبيق إلى عرض رسالة للمستخدم، حتى إذا تم إغلاق نافذة تطبيق Todo. لتحقيق ذلك، تحتاج إلى فهم طريقة عمل المنبّهات والإشعارات في تطبيقات Chrome.

إضافة منبّهات

استخدِم chrome.alarms لضبط فاصل زمني للاستيقاظ. وأثناء تشغيل Chrome، يتم استدعاء أداة معالجة الإنذار على أساس الفترة الزمنية المضبوطة تقريبًا.

تحديث أذونات التطبيقات

في manifest.json، يمكنك طلب إذن "alarms":

"permissions": ["storage", "alarms"],

تعديل النصوص البرمجية للخلفية

في background.js، أضِف مستمعًا في onAlarm. في الوقت الحالي، ستقوم دالة رد الاتصال فقط بتسجيل رسالة إلى وحدة التحكم عندما يكون هناك عنصر todo:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

تعديل عرض HTML

في index.html، أضف زر تفعيل التنبيه:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

عليك الآن كتابة معالج أحداث JavaScript لهذا الزر الجديد. تذكّر من الخطوة 2 أنّ سبب عدم الامتثال الأكثر شيوعًا في سياسة أمان المحتوى (CSP) يعود إلى محتوى JavaScript المضمّن. في index.html، أضِف هذا السطر لاستيراد ملف alarms.js جديد تنشئه في الخطوة التالية:

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

إنشاء نص برمجي للمنبهات

أنشئ ملفًا جديدًا في مجلد js باسم alarms.js.

استخدم الرمز أدناه لإضافة طُرق checkAlarm() وcreateAlarm() وcancelAlarm() وtoggleAlarm()، إلى جانب معالِج أحداث النقر لتبديل المنبّه عند النقر على الزر تفعيل المنبّه.

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

أعد تحميل التطبيق وخصص بضع دقائق في تنشيط (وإلغاء تنشيط) الإنذار.

فحص رسائل صفحة الخلفية

عندما يتم تنشيط المنبه، من المفترض أن ترى رسائل السجل تتم طباعتها في وحدة التحكم في كل مرة "يرنّ" فيها المنبّه:

إرسال رسائل التنبيه إلى وحدة التحكّم

يجب أن تلاحظ ما يلي:

  • حتى في حال إغلاق نافذة تطبيق Todo، ستستمر المنبّهات في الظهور.
  • على الأنظمة الأساسية غير ChromeOS، إذا أغلقت جميع النُسخ الافتراضية من متصفّح Chrome تمامًا، لن يتم تشغيل المنبّهات.

لنستعرض بعض الأجزاء في alarms.js التي تستخدم chrome.alarms طريقة واحدة تلو الأخرى.

إنشاء منبّهات

في createAlarm()، يمكنك استخدام واجهة برمجة التطبيقات chrome.alarms.create() لإنشاء منبّه عندما يكون الخيار تفعيل المنبّه غير مفعّل.

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

المعلمة الأولى عبارة عن سلسلة اختيارية تحدد اسمًا فريدًا للمنبّه، مثل remindme. (ملاحظة: يجب تعيين اسم تنبيه لإلغاءه باستخدام الاسم).

أما المعلمة الثانية، فهي كائن alarmInfo. تشمل السمات الصالحة لـ alarmInfo when أو delayInMinutes وperiodInMinutes. ولخفض الحمل على جهاز المستخدم، يحد Chrome المنبّهات إلى مرة واحدة كل دقيقة. نستخدم هنا قيمًا صغيرة (0.1 من الدقيقة) لأغراض العرض التوضيحي فقط.

محو المنبّهات

في cancelAlarm()، يمكنك استخدام واجهة برمجة التطبيقات chrome.alarms.clear() لإلغاء منبّه عندما يكون الخيار إلغاء المنبه غير مفعّل.

chrome.alarms.clear(alarmName);

يجب أن تكون المَعلمة الأولى هي السلسلة المعرّفة التي استخدمتها كاسم تنبيه في chrome.alarms.create().

المعلمة الثانية (اختيارية) هي دالة رد اتصال يجب أن تتخذ التنسيق:

function(boolean wasCleared) {...};

تلقّي تنبيهات

في checkAlarm()، يمكنك استخدام chrome.alarms.getAll() API للحصول على مجموعة من جميع المنبّهات التي تم إنشاؤها لتعديل حالة واجهة المستخدم الخاصة بزر الإيقاف/التفعيل.

تقبل getAll() دالة رد اتصال تمر في صفيف من Alarm كائنات. لمعرفة ما في Alarm، يمكنك فحص المنبّهات قيد التشغيل في وحدة تحكّم أدوات مطوّري البرامج على النحو التالي:

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

سيؤدي ذلك إلى إخراج كائن مثل {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} كما هو موضح أدناه:

استخدِم الطريقة getAll() لفحص المنبّهات الجارية.

استعِد للقسم التالي

بعد أن تم إعداد المنبّهات لاستطلاع آراء التطبيق على فترات زمنية منتظمة، استخدِم هذه الميزة كقاعدة لإضافة إشعارات مرئية.

إضافة إشعارات

هيا نغير إشعار المنبه إلى شيء يمكن للمستخدم ملاحظته بسهولة. استخدِم chrome.notifications لعرض إشعار على سطح المكتب، مثل الإشعار الوارد أدناه:

الإشعار الخاص بتطبيق Todo

عندما ينقر المستخدم على الإشعار، يُفترض أن تظهر نافذة تطبيق Todo.

تحديث أذونات التطبيقات

في manifest.json، يمكنك طلب إذن "notifications":

"permissions": ["storage", "alarms", "notifications"],

تعديل النصوص البرمجية للخلفية

في background.js، يمكنك إعادة بناء معاودة الاتصال chrome.app.window.create() إلى طريقة مستقلة حتى تتمكن من إعادة استخدامها:

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

تعديل أداة معالجة المنبّه

في أعلى background.js، أضف متغيّرًا لاسم قاعدة البيانات الذي يتم استخدامه في مستمع المنبّه:

var dbName = 'todos-vanillajs';

قيمة dbName هي اسم قاعدة البيانات نفسه الذي تم تحديده في السطر 17 من js/app.js:

var todo = new Todo('todos-vanillajs');

إنشاء إشعار

بدلاً من تسجيل إنذار جديد في وحدة التحكّم، يمكن تحديث أداة معالجة الحدث onAlarm للحصول على البيانات المخزَّنة عبر chrome.storage.local.get() وطلب الطريقة showNotification():

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

أضف طريقة showNotification() هذه إلى background.js:

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

سيبحث showNotification() عن عناصر المهام المفتوحة (غير المكتملة). إذا كان هناك عنصر قائمة مفتوح واحد على الأقل، يمكنك إنشاء إشعار منبثق عبر chrome.notifications.create().

المعلمة الأولى عبارة عن اسم إشعار تعريفي فريد. يجب أن يكون لديك معرف تم تعيينه من أجل محو أو التعامل مع التفاعلات مع هذا الإشعار المحدد. وفي حال تطابق المعرّف مع إشعار حالي، يمحو create() هذا الإشعار أولاً قبل إرسال إشعار جديد.

المعلمة الثانية هي كائن NotificationOptions. هناك العديد من الخيارات لعرض نافذة الإشعار المنبثقة. نستخدم هنا الإشعار "الأساسي" مع رمز وعنوان ورسالة. تشمل أنواع الإشعارات الأخرى الصور والقوائم ومؤشرات التقدم. لا تتردد في العودة إلى هذا القسم عند الانتهاء من الخطوة 3 وتجربة ميزات الإشعارات الأخرى.

المعلمة الثالثة (اختيارية) هي طريقة رد اتصال يجب أن تتخذ التنسيق:

function(string notificationId) {...};

التعامل مع الإشعارات

افتح تطبيق Todo عندما ينقر المستخدم على الإشعار. في نهاية background.js، أنشئ معالج أحداث chrome.notifications.onClicked:

chrome.notifications.onClicked.addListener(function() {
  launch();
});

يتم استدعاء طريقة استدعاء معالج الأحداث ببساطة الطريقة launch(). chrome.app.window.create() يؤدي إما إلى إنشاء نافذة جديدة لتطبيق Chrome في حال عدم وجودها من قبل، أو التركيز على النافذة المفتوحة حاليًا التي تحتوي على معرّف النافذة main.

تشغيل تطبيق Todo المكتمل

لقد انتهيت من الخطوة الثالثة! أعِد تحميل تطبيق Todo الآن باستخدام التذكيرات.

تأكَّد من أنّ هذه السلوكيات تعمل على النحو المتوقّع:

  • إذا لم يكن لديك أي عناصر مهام غير مكتملة، لن تظهر أي إشعارات منبثقة.
  • إذا نقرت على الإشعار عند إغلاق تطبيقك، سيتم فتح تطبيق Todo أو التركيز عليه.

تحديد المشاكل وحلّها

يجب أن يظهر ملف background.js النهائي بالشكل هذا. في حال عدم ظهور الإشعارات، تأكَّد من أنّ الإصدار 28 من متصفّح Chrome أو إصدار أحدث. إذا لم تظهر الإشعارات، تحقّق من رسائل الخطأ في "وحدة تحكّم أدوات مطوّري البرامج" على كل من النافذة الرئيسية (انقر بزر الماوس الأيمن > فحص العنصر) وصفحة الخلفية (انقر بزر الماوس الأيمن > فحص صفحة الخلفية).

لمزيد من المعلومات

للحصول على معلومات أكثر تفصيلاً حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، يُرجى الرجوع إلى:

هل أنت جاهز للمتابعة إلى الخطوة التالية؟ الانتقال إلى الخطوة 4: فتح الروابط الخارجية باستخدام WebView »