Bước 3: Thêm chuông báo và thông báo

Trong bước này, bạn sẽ tìm hiểu:

• Cách đánh thức ứng dụng của bạn vào những khoảng thời gian cụ thể để thực thi các tác vụ trong nền.
• Cách sử dụng thông báo trên màn hình để thu hút sự chú ý đến một nội dung quan trọng.

Thời gian ước tính để hoàn tất bước này: 20 phút. Để xem trước những việc bạn sẽ hoàn thành trong bước này, hãy chuyển xuống cuối trang này ↓.

Cải thiện ứng dụng Việc cần làm bằng lời nhắc

Cải thiện ứng dụng Việc cần làm bằng cách thêm chức năng nhắc người dùng nếu họ có việc cần làm chưa làm, ngay cả khi ứng dụng đã đóng.

Trước tiên, bạn cần thêm một cách để ứng dụng thường xuyên kiểm tra những việc cần làm chưa hoàn thành. Tiếp theo, ứng dụng cần hiển thị thông báo cho người dùng, ngay cả khi cửa sổ ứng dụng Công việc đã đóng. Để thực hiện điều này, bạn cần tìm hiểu cách hoạt động của chuông báo và thông báo trong Ứng dụng Chrome.

Thêm báo thức

Sử dụng chrome.alarms để thiết lập khoảng thời gian đánh thức. Trong thời gian Chrome còn chạy, trình nghe chuông báo được gọi trong khoảng tập hợp.

Cập nhật quyền cho ứng dụng

Trong tệp manifest.json, hãy yêu cầu quyền "alarms":

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

Cập nhật tập lệnh nền

Trong background.js, hãy thêm trình nghe onAlarm. Hiện tại, hàm callback sẽ chỉ ghi nhật ký thông báo cho Bảng điều khiển mỗi khi có mục việc cần làm:

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

Cập nhật chế độ xem HTML

Trong index.html, hãy thêm nút Kích hoạt chuông báo:

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

Bây giờ, bạn cần viết trình xử lý sự kiện JavaScript cho nút mới này. Hãy nhớ lại trong Bước 2 rằng một trong những trường hợp không tuân thủ CSP thường gặp nhất là do JavaScript cùng dòng gây ra. Trong index.html, hãy thêm đoạn mã này để nhập tệp alarms.js mới mà bạn sẽ tạo trong bước sau:

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

Tạo tập lệnh báo thức

Tạo tệp mới trong thư mục js có tên alarms.js.

Sử dụng mã dưới đây để thêm checkAlarm(), createAlarm(), cancelAlarm() và toggleAlarm() cùng với trình xử lý sự kiện nhấp chuột để bật/tắt báo thức khi nút Kích hoạt báo thức được đã nhấp vào.

(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();
})();

Tải lại ứng dụng và dành chút thời gian để kích hoạt (và hủy kích hoạt) báo thức.

Bất cứ khi nào kích hoạt chuông báo, bạn sẽ thấy thông điệp nhật ký được in trong Bảng điều khiển mỗi khi báo thức "reo":

Bạn sẽ nhận thấy rằng:

• Ngay cả khi bạn đóng cửa sổ ứng dụng Việc cần làm, chuông báo vẫn sẽ kêu.
• Trên các nền tảng không phải ChromeOS, nếu bạn đóng hoàn toàn tất cả phiên bản trình duyệt Chrome, chuông báo sẽ không kích hoạt.

Hãy cùng tìm hiểu một số phần trong alarms.js sử dụng từng phương thức chrome.alarms.

Tạo báo thức

Trong createAlarm(), hãy sử dụng API chrome.alarms.create() để tạo chuông báo khi Kích hoạt báo thức đã bật.

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

Tham số đầu tiên là một chuỗi không bắt buộc xác định tên riêng biệt cho chuông báo của bạn, ví dụ: remindme. (Lưu ý: Bạn cần đặt tên báo thức để huỷ báo thức theo tên.)

Tham số thứ hai là một đối tượng alarmInfo. Các thuộc tính hợp lệ cho alarmInfo bao gồm when hoặc delayInMinutes và periodInMinutes. Để giảm tải cho máy của người dùng, Chrome giới hạn báo thức ở mức mỗi phút một lần. Chúng tôi đang sử dụng các giá trị nhỏ (0,1 của một phút) ở đây để minh hoạ chỉ có mục đích riêng.

Xoá chuông báo

Trong cancelAlarm(), hãy dùng API chrome.alarms.clear() để huỷ chuông báo khi Huỷ báo thức đã bật.

chrome.alarms.clear(alarmName);

Thông số đầu tiên phải là chuỗi nhận dạng mà bạn đã dùng làm tên chuông báo trong chrome.alarms.create().

Tham số thứ hai (không bắt buộc) là một hàm callback sẽ có định dạng:

function(boolean wasCleared) {...};

Nhận chuông báo

Trong checkAlarm(), hãy dùng API chrome.alarms.getAll() để lấy một mảng gồm tất cả chuông báo đã tạo để cập nhật trạng thái giao diện người dùng của nút bật tắt.

getAll() chấp nhận một hàm callback truyền một mảng các đối tượng Alarm. Để xem nội dung Alarm, bạn có thể kiểm tra các chuông báo đang chạy trong Bảng điều khiển công cụ cho nhà phát triển như sau:

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

Thao tác này sẽ xuất một đối tượng như {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} như bên dưới:

Chuẩn bị sẵn sàng cho phần tiếp theo

Giờ đây, các chuông báo đã được triển khai để thăm dò ứng dụng đều đặn, hãy sử dụng thông tin này làm cơ sở để thêm thông báo bằng hình ảnh.

Thêm thông báo

Hãy thay đổi thông báo chuông báo thành nội dung mà người dùng có thể dễ dàng nhận thấy. Sử dụng chrome.notifications để hiển thị một thông báo trên màn hình như thông báo dưới đây:

Khi người dùng nhấp vào thông báo, cửa sổ ứng dụng Công việc sẽ xuất hiện.

Cập nhật quyền cho ứng dụng

Trong tệp manifest.json, hãy yêu cầu quyền "notifications":

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

Cập nhật tập lệnh nền

Trong background.js, hãy tái cấu trúc lệnh gọi lại chrome.app.window.create() thành một phương thức độc lập để bạn có thể tái sử dụng:

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

Cập nhật trình nghe chuông báo

Ở đầu background.js, hãy thêm một biến cho tên cơ sở dữ liệu được dùng trong chuông báo trình nghe:

var dbName = 'todos-vanillajs';

Giá trị của dbName giống với tên cơ sở dữ liệu được đặt trong dòng 17 của js/app.js:

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

Tạo một thông báo

Thay vì chỉ ghi nhật ký chuông báo mới vào Console, hãy cập nhật trình nghe onAlarm để được lưu trữ qua chrome.storage.local.get() và gọi một phương thức showNotification():

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

Thêm phương thức showNotification() này vào 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() sẽ kiểm tra những mục việc cần làm đang xử lý (chưa hoàn thành). Nếu có ít nhất một doanh nghiệp đang mở cửa mục việc cần làm, hãy tạo cửa sổ thông báo bật lên qua chrome.notifications.create().

Tham số đầu tiên là tên thông báo nhận dạng duy nhất. Bạn phải đặt id theo thứ tự để xóa hoặc xử lý các hoạt động tương tác với thông báo cụ thể đó. Nếu mã nhận dạng khớp với mã nhận dạng hiện tại thì trước tiên, create() sẽ xoá thông báo đó trước khi đưa ra thông báo mới.

Tham số thứ hai là một đối tượng NotificationOptions. Có nhiều tuỳ chọn để kết xuất cửa sổ thông báo bật lên. Ở đây, chúng tôi sử dụng thuộc tính "cơ bản" kèm theo biểu tượng, tiêu đề và thông báo. Các loại thông báo khác bao gồm hình ảnh, danh sách và chỉ báo tiến trình. Bạn có thể quay lại trang này khi đã hoàn tất Bước 3 và thử nghiệm với các tính năng thông báo khác.

Thông số thứ ba (không bắt buộc) là phương thức gọi lại sẽ nhận định dạng:

function(string notificationId) {...};

Xử lý các hoạt động tương tác với thông báo

Mở ứng dụng Việc cần làm khi người dùng nhấp vào thông báo. Ở cuối tệp background.js, hãy tạo một Trình xử lý sự kiện chrome.notifications.onClicked:

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

Lệnh gọi lại của trình xử lý sự kiện chỉ gọi phương thức launch(). chrome.app.window.create() sẽ tạo một cửa sổ Ứng dụng Chrome mới nếu chưa có cửa sổ hoặc tập trung vào cửa sổ hiện tại mở cửa sổ có mã cửa sổ là main.

Chạy ứng dụng Việc cần làm đã hoàn thành

Bạn đã hoàn tất Bước 3! Tải lại ứng dụng Việc cần làm ngay nhờ lời nhắc.

Kiểm tra các hành vi sau đây có hoạt động như mong đợi không:

• Nếu bạn không có mục việc cần làm chưa hoàn thành nào, thì sẽ không có thông báo bật lên.
• Nếu bạn nhấp vào thông báo khi ứng dụng bị đóng, ứng dụng Công việc sẽ mở ra hoặc đi vào tập trung.

Khắc phục sự cố

Tệp background.js cuối cùng sẽ có dạng như thế này. Nếu thông báo không xuất hiện, xác nhận rằng Chrome của bạn là phiên bản 28 trở lên. Nếu thông báo vẫn không xuất hiện, hãy kiểm tra các thông báo lỗi trong Bảng điều khiển Công cụ cho nhà phát triển trên cả cửa sổ chính (nhấp chuột phải > Kiểm tra phần tử) và trang nền (nhấp chuột phải > Kiểm tra trang nền).

Thông tin khác

Để biết thêm thông tin chi tiết về một số API được giới thiệu trong bước này, hãy tham khảo:

• Khai báo quyền ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

Bạn đã sẵn sàng chuyển sang bước tiếp theo? Chuyển tới Bước 4 – Mở đường liên kết ngoài bằng chế độ xem web »