หน้านี้เป็นส่วนหนึ่งของเอกสารประกอบสำหรับแพลตฟอร์มแอป Chrome ซึ่งเลิกใช้งานไปในปี 2020 โดยจะยังรองรับลูกค้า Enterprise และ Education ใน ChromeOS จนถึงเดือนมกราคม 2025 เป็นอย่างน้อย ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลแอป

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

เพิ่มประสิทธิภาพแอป Todo ด้วยการช่วยเตือน

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

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

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

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

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

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

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

อัปเดตสคริปต์พื้นหลัง

ใน background.js ให้เพิ่ม Listener onAlarm สำหรับตอนนี้ ฟังก์ชัน Callback จะบันทึก ข้อความไปยังคอนโซลเมื่อมีรายการสิ่งที่ต้องทำ

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 ของ 1 นาที) สำหรับการสาธิตที่นี่ วัตถุประสงค์เท่านั้น

ล้างการปลุก

ใน cancelAlarm() ให้ใช้ chrome.alarms.clear() API เพื่อยกเลิกการปลุกเมื่อยกเลิก นาฬิกาปลุกเปิดอยู่

chrome.alarms.clear(alarmName);

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

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

function(boolean wasCleared) {...};

ตั้งปลุก

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

getAll() ยอมรับฟังก์ชัน Callback ที่ส่งผ่านอาร์เรย์ของออบเจ็กต์ 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 ให้เปลี่ยนโครงสร้างของ 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 ให้เพิ่มตัวแปรสำหรับชื่อฐานข้อมูลที่ใช้ในการปลุก Listener:

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 แล้ว และทดสอบกับคุณลักษณะการแจ้งเตือนอื่นๆ

พารามิเตอร์ที่ 3 (ไม่บังคับ) คือเมธอด Callback ซึ่งควรใช้กับรูปแบบ

function(string notificationId) {...};

จัดการการโต้ตอบกับการแจ้งเตือน

เปิดแอป Todo เมื่อผู้ใช้คลิกการแจ้งเตือน ในตอนท้ายของ background.js ให้สร้าง เครื่องจัดการเหตุการณ์ chrome.notifications.onClicked:

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

Callback ของตัวแฮนเดิลเหตุการณ์จะเรียกใช้เมธอด launch() chrome.app.window.create()อย่างใดอย่างหนึ่ง สร้างหน้าต่างแอป Chrome ใหม่หากยังไม่มีหน้าต่างนี้ หรือนำหน้าต่างแอป Chrome มาโฟกัสกับหน้าต่าง หน้าต่างแบบเปิดที่มีรหัสหน้าต่าง main

เปิดแอป Todo ที่เสร็จสมบูรณ์แล้ว

คุณดำเนินการขั้นตอนที่ 3 เสร็จแล้ว โหลดแอป Todo ซ้ำเลยพร้อมการช่วยเตือน

ตรวจสอบว่าลักษณะการทำงานเหล่านี้ทำงานตามที่คาดไว้

หากไม่มีรายการสิ่งที่ต้องทำที่ยังทำไม่เสร็จ จะไม่มีการแจ้งเตือนแบบป๊อปอัป
หากคุณคลิกการแจ้งเตือนเมื่อแอปของคุณปิดแล้ว แอป Todo จะเปิดขึ้นหรือเข้ามาใน โฟกัส

การแก้ปัญหา

ไฟล์ background.js ขั้นสุดท้ายของคุณควรมีลักษณะดังนี้ นี่คือ หากการแจ้งเตือนไม่แสดงขึ้น ตรวจสอบว่า Chrome ของคุณเป็นเวอร์ชัน 28 ขึ้นไป หากการแจ้งเตือนยังคงไม่แสดง ให้ตรวจสอบ ข้อความแสดงข้อผิดพลาดในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บในหน้าต่างหลักทั้งสอง (คลิกขวา > ตรวจสอบองค์ประกอบ) และหน้าพื้นหลัง (คลิกขวา > ตรวจสอบหน้าพื้นหลัง)

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

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

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