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.
Setiap kali alarm diaktifkan, Anda akan melihat pesan log yang dicetak di Konsol setiap kali alarm "berdering":
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:
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:
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:
- Menyatakan 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 »