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 apa yang akan Anda selesaikan pada langkah ini, lompat ke bagian bawah halaman ini ↓.

Sempurnakan aplikasi Daftar Tugas Anda dengan pengingat

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

Pertama, Anda perlu menambahkan cara agar aplikasi secara rutin memeriksa tugas yang belum selesai. Selanjutnya, aplikasi perlu menampilkan pesan kepada pengguna, meskipun jendela aplikasi Daftar Tugas ditutup. Untuk melakukan hal ini, 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 dipanggil pada sekitar interval yang ditetapkan.

Memperbarui izin aplikasi

Di manifest.json, minta izin "alarms":

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

Mengupdate skrip latar belakang

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

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>

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

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

Buat skrip alarm

Buat file baru di folder js Anda yang diberi nama alarms.js.

Gunakan kode di bawah untuk menambahkan checkAlarm(), createAlarm(), cancelAlarm(), dan toggleAlarm() metode, bersama dengan pengendali peristiwa klik untuk mengalihkan alarm saat tombol Aktifkan 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 beberapa saat untuk mengaktifkan (dan menonaktifkan) alarm.

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

Anda akan melihat bahwa:

• Meskipun Anda menutup jendela aplikasi Daftar tugas, alarm akan terus berbunyi.
• Di platform selain ChromeOS, jika Anda menutup sepenuhnya semua instance browser Chrome, alarm tidak akan dipicu.

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

Buat alarm

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

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

Parameter pertama adalah string opsional yang mengidentifikasi nama unik untuk alarm, 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 sekali per menit. Kami menggunakan nilai kecil (0,1 menit) di sini untuk demo tujuan.

Hapus alarm

Di cancelAlarm(), gunakan chrome.alarms.clear() API untuk membatalkan alarm saat Batalkan alarm diaktifkan atau dinonaktifkan.

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 untuk memperbarui status UI tombol beralih.

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

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

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

Bersiaplah untuk bagian berikutnya

Setelah alarm terpasang untuk polling aplikasi secara berkala, gunakan ini sebagai dasar untuk menambahkan notifikasi visual.

Tambahkan notifikasi

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

Saat pengguna mengklik notifikasi, jendela aplikasi Todo akan terlihat.

Memperbarui izin aplikasi

Di manifest.json, minta izin "notifications":

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

Mengupdate skrip latar belakang

Di background.js, faktorkan ulang callback chrome.app.window.create() menjadi 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);
...

Memperbarui pemroses alarm

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

var dbName = 'todos-vanillajs';

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

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

Membuat notifikasi

Daripada hanya mencatat alarm baru ke Konsol, update pemroses onAlarm agar disimpan data 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 terbuka (belum selesai). Jika ada setidaknya satu yang terbuka item daftar tugas, 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, 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 model notifikasi dengan ikon, judul, dan pesan. Jenis notifikasi lainnya termasuk gambar, daftar, dan indikator kemajuan. Jangan ragu untuk kembali ke saat 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() membuat jendela Aplikasi Chrome baru jika belum ada, atau menjadikan jendela fokus pada jendela terbuka yang memiliki ID jendela main.

Meluncurkan aplikasi Daftar Tugas yang sudah selesai

Anda sudah menyelesaikan Langkah 3! Muat ulang aplikasi Daftar Tugas sekarang dengan pengingat.

Periksa perilaku berikut bekerja 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 Daftar Tugas akan terbuka atau masuk fokus.

Pemecahan masalah

File background.js akhir Anda akan terlihat seperti ini. Jika notifikasi tidak muncul, pastikan Chrome Anda versi 28 atau lebih tinggi. Jika notifikasi masih tidak muncul, periksa pesan error di DevTools Console di kedua jendela utama (klik kanan > Inspect Element) dan halaman latar belakang (klik kanan > Inspect Background Page).

Untuk informasi selengkapnya

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

• Mendeklarasikan Izin ↑
• chrome.alarms ↑
• chrome.alarms.onAlarm ↑
• chrome.alarms.create() ↑
• chrome.alarms.clear() ↑
• chrome.alarms.getAll() ↑
• chrome.notifications ↑
• chrome.notifications.create() ↑
• NotificationOptions ↑
• chrome.notifications.onClicked ↑

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