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 theo 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 nội dung bạn sẽ hoàn tất ở 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 Todo 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 đang 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 Todo đã đóng. Để làm được việc này, bạn cần 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 chuông báo

Dùng chrome.alarms để đặt khoảng thời gian thức dậy. Miễn là Chrome đang chạy, trình nghe chuông báo sẽ được gọi vào khoảng khoảng thời gian đã đặt.

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 lại thông báo vào Console bất cứ khi nào 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 Bước 2 rằng một trong những lỗi không tuân thủ CSP phổ biến nhất là do JavaScript cùng dòng gây ra. Trong index.html, hãy thêm dòng này để nhập tệp alarms.js mới mà bạn sẽ tạo ở bước sau:

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

Tạo kịch bản chuông báo

Tạo một tệp mới trong thư mục js của bạn có tên là alarms.js.

Hãy dùng mã bên dưới để thêm phương thức checkAlarm(), createAlarm(), cancelAlarm() và toggleAlarm(), cùng với trình xử lý sự kiện nhấp để bật/tắt chuông báo khi người dùng nhấp vào nút Kích hoạt chuông bá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 của bạn và dành vài phút để kích hoạt (và hủy kích hoạt) chuông báo.

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 Console mỗi khi chuông báo "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ẽ tiếp tục.
• Trên các nền tảng khác ngoài ChromeOS, nếu bạn đóng hoàn toàn tất cả thực thể trình duyệt Chrome, thì chuông báo sẽ không kích hoạt.

Hãy xem qua một số phần trong alarms.js sử dụng từng phương thức chrome.alarms.

Tạo chuông báo

Trong createAlarm(), hãy dùng API chrome.alarms.create() để tạo chuông báo khi tuỳ chọn Kích hoạt chuông báo ở trạng thái 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, ví dụ: remindme. (Lưu ý: Bạn cần đặt tên báo thức để huỷ theo tên báo thức).

Tham số thứ hai là đố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 trên máy của người dùng, Chrome giới hạn chuông báo ở mức mỗi phút một lần. Ở đây, chúng tôi chỉ sử dụng các giá trị nhỏ (0,1 phút) cho mục đích minh hoạ.

Xoá chuông báo

Trong cancelAlarm(), hãy sử dụng API chrome.alarms.clear() để huỷ chuông báo khi tính năng Huỷ chuông báo đang bật.

chrome.alarms.clear(alarmName);

Tham 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().

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

function(boolean wasCleared) {...};

Nhận chuông báo

Trong checkAlarm(), hãy sử dụng API chrome.alarms.getAll() để lấy một loạt tất cả chuông báo đã tạo nhằm 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 hàm callback truyền vào một mảng các đối tượng Alarm. Để xem nội dung trong 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ẽ tạo ra một đối tượng như {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} như bên dưới:

Chuẩn bị cho phần tiếp theo

Giờ đây, khi đã có chuông báo để thăm dò ứng dụng theo định kỳ, hãy sử dụng thông báo 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ị thông báo trên màn hình như ví dụ 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 trong khung nhì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ể sử dụng lại nó:

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 trình nghe chuông báo:

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 lại một chuông báo mới vào Console, hãy cập nhật trình nghe onAlarm để nhận dữ liệu đã lưu trữ thông qua chrome.storage.local.get() và gọi 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 các mục việc cần làm chưa hoàn thành (chưa hoàn thành). Nếu có ít nhất một mục việc cần làm đang 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 có thể xác định duy nhất. Bạn phải đặt mã nhận dạng để xoá hoặc xử lý các lượt tương tác với thông báo cụ thể đó. Nếu mã nhận dạng khớp với một thông báo hiện có, thì trước tiên, create() sẽ xoá thông báo đó trước khi tạo thông báo mới.

Tham số thứ hai là đối tượng NotificationOptions. Có nhiều tuỳ chọn để hiển thị cửa sổ thông báo bật lên. Ở đây, chúng ta đang sử dụng thông báo "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. Vui lòng quay lại phần này khi bạn hoàn tất Bước 3 và thử nghiệm 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 phải có định dạng:

function(string notificationId) {...};

Xử lý 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 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() tạo một cửa sổ Ứng dụng Chrome mới nếu chưa có hoặc lấy tiêu điểm vào cửa sổ đang mở có mã cửa sổ là main.

Chạy ứng dụng Todo đã hoàn thiện

Bạn đã hoàn tất Bước 3! Tải lại ứng dụng Công việc ngay bây giờ với lời nhắc.

Kiểm tra xem các hành vi sau có hoạt động như dự kiến không:

• Nếu bạn không có việc cần làm nào chưa hoàn thành, 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 đang đóng, ứng dụng Việc cần làm sẽ mở ra hoặc trở thành tiêu điểm.

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, hãy xác nhận rằng bạn đang sử dụng Chrome 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 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 để tiếp tục bước tiếp theo? Chuyển tới Bước 4 - Mở liên kết bên ngoài bằng chế độ xem web »