ขั้นตอนที่ 3: เพิ่มการปลุกและการแจ้งเตือน

ในขั้นตอนนี้ คุณจะได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้

  • วิธีปลุกแอปตามช่วงเวลาที่ระบุเพื่อทำงานในเบื้องหลัง
  • วิธีใช้การแจ้งเตือนบนหน้าจอเพื่อดึงดูดความสนใจไปยังสิ่งที่สำคัญ

เวลาโดยประมาณในการทำขั้นตอนนี้ให้เสร็จสิ้นคือ 20 นาที หากต้องการดูตัวอย่างสิ่งที่คุณจะทำในขั้นตอนนี้ ให้ข้ามไปที่ด้านล่างของหน้านี้ ↓

ปรับปรุงแอป Todo ด้วยการช่วยเตือน

ปรับปรุงแอป Todo โดยเพิ่มฟังก์ชันการทำงานที่จะช่วยเตือนผู้ใช้หากมีสิ่งที่ต้องทำเปิดอยู่ แม้ว่าแอปจะปิดอยู่ก็ตาม

ก่อนอื่น คุณต้องเพิ่มวิธีที่แอปจะตรวจสอบสิ่งที่ต้องทำที่ยังทำไม่เสร็จอย่างสม่ำเสมอ จากนั้น แอปจะต้องแสดงข้อความต่อผู้ใช้แม้ว่าจะปิดหน้าต่างแอป Todo แล้วก็ตาม ในการบรรลุเป้าหมายนี้ คุณต้องเข้าใจวิธีการทำงานของการปลุกและการแจ้งเตือนในแอป Chrome ก่อน

เพิ่มการปลุก

ใช้ chrome.alarms เพื่อกำหนดช่วงตื่นนอน ตราบใดที่ Chrome ทำงานอยู่ ระบบจะเรียกตัวฟังการปลุกตามช่วงเวลาที่ตั้งไว้

อัปเดตสิทธิ์ของแอป

ใน manifest.json ให้ขอสิทธิ์ "alarms":

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

อัปเดตสคริปต์ที่ทำงานอยู่เบื้องหลัง

ใน background.js ให้เพิ่ม Listener 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() API เพื่อสร้างการปลุกเมื่อมีการสลับเปิดใช้การปลุก

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

พารามิเตอร์แรกเป็นสตริงที่ไม่บังคับซึ่งระบุชื่อที่ไม่ซ้ำกันของการปลุก เช่น remindme (หมายเหตุ: คุณต้องตั้งชื่อการปลุกเพื่อยกเลิกโดยการตั้งชื่อ)

พารามิเตอร์ที่ 2 คือออบเจ็กต์ alarmInfo พร็อพเพอร์ตี้ที่ใช้ได้กับ alarmInfo ได้แก่ when หรือ delayInMinutes และ periodInMinutes Chrome จะจำกัดการปลุกไว้ที่ 1 ครั้งในทุกๆ นาที เพื่อลดภาระงานในเครื่องของผู้ใช้ เราใช้ค่าเล็กๆ (0.1 ของนาที) สำหรับการสาธิตเท่านั้น

ล้างการปลุก

ใน cancelAlarm() ให้ใช้ chrome.alarms.clear() API เพื่อยกเลิกการปลุกเมื่อมีการสลับยกเลิกการปลุก

chrome.alarms.clear(alarmName);

พารามิเตอร์แรกควรเป็นสตริงระบุที่คุณใช้เป็นชื่อการปลุกใน chrome.alarms.create()

พารามิเตอร์ที่ 2 (ไม่บังคับ) คือฟังก์ชันเรียกกลับที่ควรใช้ในรูปแบบต่อไปนี้

function(boolean wasCleared) {...};

รับการปลุก

ใน checkAlarm() ให้ใช้ chrome.alarms.getAll() API เพื่อรับอาร์เรย์ของการปลุกที่สร้างขึ้นทั้งหมด เพื่ออัปเดตสถานะ UI ของปุ่มเปิด/ปิด

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);
...

อัปเดต Listener การตั้งปลุก

ที่ด้านบนของ background.js ให้เพิ่มตัวแปรสำหรับชื่อฐานข้อมูลที่ใช้ในการแจ้งเตือนเสียง

var dbName = 'todos-vanillajs';

ค่าของ dbName เป็นชื่อฐานข้อมูลเดียวกับที่ตั้งค่าไว้ในบรรทัดที่ 17 ของ js/app.js:

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

สร้างการแจ้งเตือน

แทนที่จะบันทึกการปลุกใหม่ไปยังคอนโซล ให้อัปเดต Listener 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() จะตรวจหารายการสิ่งที่ต้องทำที่เปิดอยู่ (ยังไม่เสร็จ) หากมีรายการสิ่งที่ต้องทำเปิดอยู่อย่างน้อย 1 รายการ ให้สร้างป๊อปอัปการแจ้งเตือนผ่าน chrome.notifications.create()

พารามิเตอร์แรกคือชื่อการแจ้งเตือนที่ระบุไม่ซ้ำกัน คุณต้องตั้งรหัสเพื่อล้างหรือจัดการการโต้ตอบกับการแจ้งเตือนนั้นๆ หากรหัสตรงกับการแจ้งเตือนที่มีอยู่ create() จะล้างการแจ้งเตือนดังกล่าวก่อนที่จะทำการแจ้งเตือนใหม่

พารามิเตอร์ที่ 2 คือออบเจ็กต์ 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 ขึ้นไป หากการแจ้งเตือนยังคงไม่ปรากฏขึ้น ให้ตรวจสอบข้อความแสดงข้อผิดพลาดในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บทั้งในหน้าต่างหลัก (คลิกขวา > ตรวจสอบองค์ประกอบ) และหน้าพื้นหลัง (คลิกขวา > ตรวจสอบหน้าเว็บพื้นหลัง)

สำหรับข้อมูลเพิ่มเติม

สำหรับข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ API บางส่วนที่นำมาใช้ในขั้นตอนนี้ โปรดดูที่:

หากพร้อมที่จะไปยังขั้นตอนถัดไปแล้ว ไปที่ขั้นตอนที่ 4 - เปิดลิงก์ภายนอกด้วย WebView »