مرحله 3: هشدارها و اعلان ها را اضافه کنید

در این مرحله یاد خواهید گرفت:

  • چگونه برنامه خود را در بازه های زمانی مشخص برای اجرای وظایف پس زمینه بیدار کنیم.
  • نحوه استفاده از اعلان‌های روی صفحه برای جلب توجه به چیزی مهم.

زمان تخمینی برای تکمیل این مرحله: 20 دقیقه. برای پیش نمایش آنچه در این مرحله تکمیل می کنید، به پایین این صفحه بروید ↓ .

برنامه Todo خود را با یادآوری تقویت کنید

برنامه Todo را با افزودن عملکردی بهبود دهید تا به کاربر یادآوری کند که آیا کارهای باز دارد - حتی زمانی که برنامه بسته است.

ابتدا باید راهی اضافه کنید تا برنامه به طور مرتب کارهای ناتمام را بررسی کند. در مرحله بعد، برنامه باید پیامی را به کاربر نمایش دهد، حتی اگر پنجره برنامه Todo بسته باشد. برای انجام این کار، باید نحوه عملکرد هشدارها و اعلان‌ها در Chrome Apps را بدانید.

آلارم اضافه کنید

از 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>

اکنون باید کنترل کننده رویداد جاوا اسکریپت را برای این دکمه جدید بنویسید. از مرحله 2 به یاد بیاورید که یکی از رایج ترین عدم انطباق CSP توسط جاوا اسکریپت درون خطی ایجاد می شود. در 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() به همراه یک کنترل کننده رویداد کلیک استفاده کنید تا وقتی روی دکمه Activate alarm کلیک می شود زنگ را تغییر دهید.

(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() ، از API chrome.alarms.create() برای ایجاد زنگ هشدار در زمانی که فعال کردن زنگ فعال است استفاده کنید.

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

پارامتر اول یک رشته اختیاری است که یک نام منحصر به فرد را برای زنگ شما شناسایی می کند، به عنوان مثال remindme . (توجه: برای لغو آن با نام باید یک نام زنگ تنظیم کنید.)

پارامتر دوم یک شی alarmInfo است. ویژگی های معتبر برای alarmInfo شامل when یا delayInMinutes و periodInMinutes است. به منظور کاهش بار روی دستگاه کاربر، Chrome آلارم ها را به یک بار در دقیقه محدود می کند. ما در اینجا از مقادیر کوچک (0.1 دقیقه) فقط برای اهداف نمایشی استفاده می کنیم.

آلارم ها را پاک کنید

در cancelAlarm() ، از API chrome.alarms.clear() برای لغو زنگ زمانی که Cancel alarm فعال است استفاده کنید.

chrome.alarms.clear(alarmName);

اولین پارامتر باید رشته شناسایی باشد که به عنوان نام زنگ در chrome.alarms.create() استفاده کرده اید.

پارامتر دوم (اختیاری) یک تابع تماس است که باید فرمت زیر را داشته باشد: 

function(boolean wasCleared) {...};

آلارم دریافت کنید

در checkAlarm() از chrome.alarms.getAll() API برای دریافت آرایه ای از همه آلارم های ایجاد شده به منظور به روز رسانی وضعیت رابط کاربری دکمه جابجایی استفاده کنید.

getAll() تابع callback را می پذیرد که در آرایه ای از اشیاء Alarm ارسال می شود. برای دیدن آنچه در Alarm وجود دارد، می‌توانید آلارم‌های در حال اجرا را در DevTools Console بررسی کنید:

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 ، callback 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 نهایی شما باید شبیه این باشد. اگر اعلان‌ها نمایش داده نمی‌شوند، تأیید کنید که Chrome شما نسخه 28 یا بالاتر است. اگر هنوز اعلان‌ها نشان داده نمی‌شوند، پیام‌های خطا را در DevTools Console در پنجره اصلی ( کلیک راست > Inspect Element ) و صفحه پس‌زمینه ( کلیک راست > Inspect Background Page ) بررسی کنید.

برای اطلاعات بیشتر

برای اطلاعات دقیق تر در مورد برخی از API های معرفی شده در این مرحله، به آدرس زیر مراجعه کنید:

برای ادامه به مرحله بعدی آماده هستید؟ به مرحله 4 بروید - پیوندهای خارجی را با نمای وب باز کنید »