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

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

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

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

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

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

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

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

يمكنك استخدام chrome.alarms لضبط فاصل زمني للاستيقاظ. طالما أن Chrome قيد التشغيل، فإن أداة استماع التنبيه عند تحديد الفاصل الزمني تقريبًا.

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

في ملف manifest.json، اطلب إذن "alarms" على النحو التالي:

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

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

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

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() للحصول على مجموعة من جميع المنبّهات التي تم إنشاؤها. من أجل تعديل حالة واجهة المستخدم الخاصة بزر الإيقاف/التفعيل.

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

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

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

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

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

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

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

عندما ينقر المستخدم على الإشعار، من المفترض أن تظهر نافذة تطبيق 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 المكتمل

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

تحقَّق من عمل السلوكيات التالية كما هو متوقع:

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

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

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

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

لمزيد من المعلومات التفصيلية حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، راجع:

• الإفصاح عن الأذونات ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

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