Langkah 3: Tambahkan Alarm dan Notifikasi

Pada langkah ini, Anda akan mempelajari:

  • Cara mengaktifkan aplikasi pada interval tertentu untuk menjalankan tugas latar belakang.
  • Cara menggunakan notifikasi di layar untuk menarik perhatian ke sesuatu yang penting.

Perkiraan waktu untuk menyelesaikan langkah ini: 20 menit. Untuk melihat pratinjau dari apa yang akan Anda selesaikan di langkah ini, lompat ke bagian bawah halaman ini ↓.

Tingkatkan kualitas aplikasi Daftar Tugas dengan pengingat

Tingkatkan kualitas aplikasi Daftar Tugas dengan menambahkan fungsi untuk mengingatkan pengguna jika mereka memiliki daftar tugas yang terbuka—bahkan saat aplikasi ditutup.

Pertama, Anda perlu menambahkan cara agar aplikasi secara rutin memeriksa tugas yang belum selesai. Selanjutnya, aplikasi harus menampilkan pesan kepada pengguna, meskipun jendela aplikasi Todo ditutup. Untuk melakukannya, Anda perlu memahami cara kerja alarm dan notifikasi di Aplikasi Chrome.

Tambahkan alarm

Gunakan chrome.alarms untuk menetapkan interval bangun. Selama Chrome berjalan, pemroses alarm akan dipanggil pada kira-kira interval yang ditetapkan.

Memperbarui izin aplikasi

Di manifest.json, minta izin "alarms":

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

Perbarui skrip latar belakang

Di background.js, tambahkan pemroses onAlarm. Untuk saat ini, fungsi callback hanya akan mencatat pesan ke Konsol setiap kali ada item daftar tugas:

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

Perbarui tampilan HTML

Di index.html, tambahkan tombol Aktifkan alarm:

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

Anda sekarang harus menulis pengendali peristiwa JavaScript untuk tombol baru ini. Ingat kembali dari Langkah 2 bahwa salah satu ketidakpatuhan CSP paling umum disebabkan oleh JavaScript inline. Di index.html, tambahkan baris ini untuk mengimpor file alarms.js baru yang akan Anda buat di langkah berikut:

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

Membuat skrip alarm

Buat file baru di folder js bernama alarms.js.

Gunakan kode di bawah ini untuk menambahkan metode checkAlarm(), createAlarm(), cancelAlarm(), dan toggleAlarm(), beserta pengendali peristiwa klik untuk mengalihkan alarm saat tombol Activate alarm diklik.

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

Muat ulang aplikasi Anda dan luangkan waktu beberapa saat untuk mengaktifkan (dan menonaktifkan) alarm.

Memeriksa pesan halaman latar belakang

Setiap kali alarm diaktifkan, Anda akan melihat pesan log yang dicetak di Konsol setiap kali alarm "berdering":

Pencetakan pesan alarm ke Konsol

Anda akan melihat bahwa:

  • Meskipun Anda menutup jendela aplikasi Todo, alarm akan terus berbunyi.
  • Di platform selain ChromeOS, jika Anda benar-benar menutup semua instance browser Chrome, alarm tidak akan terpicu.

Mari kita bahas beberapa bagian di alarms.js yang menggunakan metode chrome.alarms satu per satu.

Membuat alarm

Di createAlarm(), gunakan chrome.alarms.create() API untuk membuat alarm saat Aktifkan alarm dialihkan.

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

Parameter pertama adalah string opsional yang mengidentifikasi nama unik untuk alarm Anda, misalnya, remindme. (Catatan: Anda perlu menyetel nama alarm untuk membatalkannya berdasarkan nama.)

Parameter kedua adalah objek alarmInfo. Properti yang valid untuk alarmInfo mencakup when atau delayInMinutes, dan periodInMinutes. Untuk mengurangi beban pada komputer pengguna, Chrome membatasi alarm menjadi sekali setiap menit. Kami menggunakan nilai kecil (0,1 menit) di sini hanya untuk tujuan demo.

Hapus alarm

Di cancelAlarm(), gunakan chrome.alarms.clear() API untuk membatalkan alarm saat Cancel alarm dialihkan.

chrome.alarms.clear(alarmName);

Parameter pertama harus berupa string pengidentifikasi yang Anda gunakan sebagai nama alarm di chrome.alarms.create().

Parameter kedua (opsional) adalah fungsi callback yang harus menggunakan format:

function(boolean wasCleared) {...};

Dapatkan alarm

Di checkAlarm(), gunakan chrome.alarms.getAll() API untuk mendapatkan array dari semua alarm yang dibuat guna memperbarui status UI tombol.

getAll() menerima fungsi callback yang meneruskan array objek Alarm. Untuk melihat apa yang ada dalam Alarm, Anda dapat memeriksa alarm yang berjalan di DevTools Console seperti berikut:

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

Tindakan ini akan menghasilkan objek seperti {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858} seperti yang terlihat di bawah ini:

Gunakan getAll() untuk memeriksa alarm yang berjalan.

Bersiap untuk bagian berikutnya

Sekarang setelah alarm ditempatkan untuk melakukan polling aplikasi secara berkala, gunakan ini sebagai dasar untuk menambahkan notifikasi visual.

Tambahkan notifikasi

Mari kita ubah notifikasi alarm menjadi sesuatu yang mudah diperhatikan pengguna. Gunakan chrome.notifications untuk menampilkan notifikasi desktop seperti di bawah ini:

Notifikasi aplikasi Todo kami

Saat pengguna mengklik notifikasi, jendela aplikasi Todo akan muncul.

Memperbarui izin aplikasi

Di manifest.json, minta izin "notifications":

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

Perbarui skrip latar belakang

Di background.js, faktorkan ulang callback chrome.app.window.create() ke dalam metode mandiri sehingga Anda dapat menggunakannya kembali:

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

Perbarui pemroses alarm

Di bagian atas background.js, tambahkan variabel untuk nama database yang digunakan di pemroses alarm:

var dbName = 'todos-vanillajs';

Nilai dbName adalah nama database yang sama yang ditetapkan di baris 17 js/app.js:

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

Membuat notifikasi

Daripada hanya melakukan logging alarm baru ke Konsol, update pemroses onAlarm untuk mendapatkan data yang disimpan melalui chrome.storage.local.get() dan panggil metode showNotification():

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

Tambahkan metode showNotification() ini ke 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() akan memeriksa item daftar tugas yang masih terbuka (belum selesai). Jika setidaknya ada satu item daftar tugas yang terbuka, buat pop-up notifikasi melalui chrome.notifications.create().

Parameter pertama adalah nama notifikasi yang mengidentifikasi secara unik. Anda harus menetapkan ID untuk menghapus atau menangani interaksi dengan notifikasi tertentu tersebut. Jika ID cocok dengan notifikasi yang ada, create() akan menghapus notifikasi tersebut terlebih dahulu sebelum membuat notifikasi baru.

Parameter kedua adalah objek NotificationOptions. Ada banyak opsi untuk merender pop-up notifikasi. Di sini kita menggunakan notifikasi "dasar" dengan ikon, judul, dan pesan. Jenis notifikasi lainnya termasuk gambar, daftar, dan indikator progres. Jangan ragu untuk kembali ke bagian ini jika Anda telah menyelesaikan Langkah 3 dan bereksperimen dengan fitur notifikasi lainnya.

Parameter ketiga (opsional) adalah metode callback yang harus menggunakan format:

function(string notificationId) {...};

Menangani interaksi notifikasi

Buka aplikasi Daftar Tugas saat pengguna mengklik notifikasi. Di akhir background.js, buat pengendali peristiwa chrome.notifications.onClicked:

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

Callback pengendali peristiwa hanya memanggil metode launch(). chrome.app.window.create() akan membuat jendela Aplikasi Chrome baru jika belum ada, atau memfokuskan jendela yang saat ini terbuka yang memiliki ID jendela main.

Luncurkan aplikasi Daftar tugas yang telah selesai

Anda menyelesaikan Langkah 3! Muat ulang aplikasi Todo Anda sekarang dengan pengingat.

Pastikan perilaku ini berfungsi seperti yang diharapkan:

  • Jika Anda tidak memiliki item daftar tugas yang belum selesai, tidak ada notifikasi pop-up.
  • Jika Anda mengklik notifikasi saat aplikasi ditutup, aplikasi Todo akan terbuka atau menjadi fokus.

Pemecahan masalah

File background.js akhir Anda akan terlihat seperti ini. Jika notifikasi tidak muncul, konfirmasikan bahwa Chrome Anda adalah versi 28 atau yang lebih baru. Jika notifikasi masih tidak muncul, periksa pesan error di DevTools Console pada jendela utama (klik kanan > Periksa Elemen) dan halaman latar belakang (klik kanan > Periksa Halaman Latar Belakang).

Untuk informasi selengkapnya

Untuk informasi lebih detail tentang beberapa API yang diperkenalkan di langkah ini, lihat:

Siap untuk melanjutkan ke langkah berikutnya? Buka Langkah 4 - Buka link eksternal dengan webview »