Pengiriman pesan push menyediakan cara yang sederhana dan efektif untuk berinteraksi kembali dengan pengguna Anda. Dalam codelab ini, Anda akan mempelajari cara menambahkan notifikasi push ke aplikasi web.
Yang akan Anda pelajari
- Cara berlangganan dan berhenti berlangganan pesan push untuk pengguna
- Cara menangani pesan push masuk
- Cara menampilkan notifikasi
- Cara merespons klik notifikasi
Yang Anda butuhkan
- Chrome 52 atau yang lebih baru
- Server Web untuk Chrome, atau server web pilihan Anda
- Editor teks
- Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools
- Kode contoh (Lihat Melakukan penyiapan.)
Mendownload kode contoh
Anda memiliki dua opsi untuk mendapatkan kode contoh codelab ini:
- Clone repositori Git:
git clone https://github.com/GoogleChrome/push-notifications.git
- Download file ZIP:
Jika Anda mendownload sumber sebagai file ZIP, mengekstraknya akan memberi Anda folder root push-notifications-master.
Menginstal dan memverifikasi server web
Meskipun Anda bebas menggunakan server web sendiri, codelab ini dirancang untuk berfungsi dengan baik dengan aplikasi Web Server for Chrome. Jika Anda belum menginstal aplikasi tersebut, Anda bisa mendapatkannya dari Chrome Web Store:
Menginstal Server Web untuk Chrome
Setelah menginstal aplikasi Server Web untuk Chrome, klik pintasan Aplikasi di kolom bookmark:
Di jendela Apps, klik ikon Server Web:
Selanjutnya, Anda akan melihat dialog ini yang memungkinkan Anda mengonfigurasi server web lokal:
Klik tombol Choose folder, dan pilih folder app di folder push-notifications yang Anda download. Dengan demikian, Anda dapat menyalurkan pekerjaan yang sedang berlangsung melalui URL yang ditampilkan di bagian URL Server Web pada dialog.
Di bagian Options, centang kotak di samping Automatically show index.html, seperti yang ditunjukkan di bawah ini:
Kemudian, hentikan dan mulai ulang server dengan menggeser tombol Server Web: DIMULAI ke kiri, lalu kembali ke kanan.
Klik URL Server Web untuk mengunjungi situs Anda di browser web Anda. Anda akan melihat halaman yang terlihat seperti ini — meskipun versi Anda mungkin menampilkan 127.0.0.1:8887 sebagai alamat:
Selalu mengupdate pekerja layanan
Selama pengembangan, ada baiknya memastikan bahwa pekerja layanan Anda selalu diperbarui dan memiliki perubahan terbaru.
Untuk menyiapkannya di Chrome:
- Buka tab Push Codelab.
- Buka DevTools: Ctrl-Shift-I di Windows dan Linux, Cmd-Option-I di macOS.
- Pilih panel Application, klik tab Service Workers, dan centang kotak Update on Reload. Ketika kotak centang ini diaktifkan, pekerja layanan akan diperbarui secara paksa setiap kali halaman dimuat ulang.
Dalam direktori app, perlu diketahui bahwa Anda memiliki file kosong bernama sw.js. File ini akan menjadi pekerja layanan Anda. Untuk saat ini, kolom tersebut mungkin masih kosong. Anda akan menambahkan kode ke kode tersebut nanti.
Pertama, Anda harus mendaftarkan file ini sebagai pekerja layanan.
Halaman app/index.html Anda memuat scripts/main.js. Anda mendaftarkan pekerja layanan dalam file JavaScript ini.
Tambahkan kode berikut ke scripts/main.js:
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push are supported');
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
})
.catch(function(error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}Kode ini memeriksa apakah pekerja layanan dan pesan push didukung oleh browser Anda. Jika didukung, kode akan mendaftarkan file sw.js Anda.
Coba
Periksa perubahan Anda dengan memuat ulang tab Push Codelab di browser.
Periksa konsol di Chrome DevTools untuk Service Worker is registered message, seperti berikut:
Dapatkan kunci server aplikasi
Untuk menggunakan codelab ini, Anda perlu membuat kunci server aplikasi. Anda dapat melakukannya di situs pendamping: web-push-codelab.glitch.me
Di sini Anda dapat membuat pasangan kunci publik dan pribadi.
Salin kunci publik Anda ke scripts/main.js untuk menggantikan nilai <Your Public Key>:
const applicationServerPublicKey = '<Your Public Key>';Penting: Anda tidak boleh meletakkan kunci pribadi di aplikasi web.
Saat ini, tombol Aktifkan aplikasi web dinonaktifkan dan tidak dapat diklik. Ini karena praktik yang baik untuk menonaktifkan tombol push secara default dan mengaktifkannya setelah Anda mengetahui bahwa pesan push didukung oleh browser dan Anda dapat memeriksa apakah pengguna saat ini berlangganan pesan atau tidak.
Anda harus membuat dua fungsi di scripts/main.js:
initializeUI, untuk memeriksa apakah pengguna saat ini berlanggananupdateBtn, untuk mengaktifkan tombol dan mengubah teks bergantung pada apakah pengguna berlangganan atau tidak
Tambahkan fungsi initializeUI ke main.js seperti ini:
function initializeUI() {
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}Metode baru Anda menggunakan swRegistration dari langkah sebelumnya, mendapatkan properti pushManager darinya, dan memanggil getSubscription() padanya.
pushManager. getSubscription() menampilkan promise yang diselesaikan dengan langganan saat ini jika ada. Jika tidak, proses akan menampilkan null. Dengan ini, Anda dapat memeriksa apakah pengguna sudah berlangganan, menetapkan nilai isSubscribed, lalu memanggil updateBtn() untuk memperbarui tombol.
Tambahkan fungsi updateBtn() ke main.js:
function updateBtn() {
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}Fungsi ini mengaktifkan tombol dan mengubah teks tombol bergantung pada apakah pengguna berlangganan atau tidak.
Hal terakhir yang harus dilakukan adalah memanggil initializeUI() ketika pekerja layanan Anda terdaftar di main.js:
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
initializeUI();
})Coba
Muat ulang tab Push Codelab. Anda akan melihat tombol Enable Push Messaging sekarang diaktifkan (Anda dapat mengkliknya) dan Anda akan melihat User is NOT subscribed di konsol.
Saat Anda melanjutkan codelab ini, Anda akan melihat teks tombol berubah setiap kali Anda berlangganan atau berhenti berlangganan.
Saat ini, tombol Aktifkan Push Messaging tidak melakukan banyak hal. Ayo perbaiki.
Dalam fungsi initializeUI(), tambahkan pemroses klik untuk tombol Anda:
function initializeUI() {
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
// TODO: Unsubscribe user
} else {
subscribeUser();
}
});
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
updateSubscriptionOnServer(subscription);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}Saat pengguna mengklik tombol, Anda menonaktifkan tombol hanya untuk memastikan pengguna tidak dapat mengklik untuk kedua kalinya, karena berlangganan ke push messaging dapat memerlukan waktu.
Kemudian, Anda memanggil subscribeUser() jika pengguna saat ini tidak berlangganan. Untuk melakukannya, Anda harus menempelkan kode berikut ke scripts/main.js:
function subscribeUser() {
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(error) {
console.error('Failed to subscribe the user: ', error);
updateBtn();
});
}Mari kita ikuti apa yang dilakukan kode ini dan bagaimana langganan pengguna untuk pesan push.
Pertama, ambil kunci publik server aplikasi, yang berenkode aman untuk URL Base64, dan konversikan menjadi UInt8Array, karena ini adalah input yang diharapkan dari panggilan subscribe(). Fungsi urlB64ToUint8Array() ada di bagian atas scripts/main.js.
Setelah mengonversi nilai, panggil metode subscribe() di pushManager pekerja layanan Anda, dengan meneruskan kunci publik server aplikasi Anda dan nilai userVisibleOnly: true.
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})Parameter userVisibleOnly adalah jaminan bahwa Anda akan menampilkan notifikasi setiap kali pesan push dikirim. Saat ini, nilai tersebut bersifat wajib dan harus benar.
Memanggil subscribe() akan menampilkan promise yang akan di-resolve setelah langkah-langkah berikut:
- Pengguna telah memberikan izin untuk menampilkan notifikasi.
- Browser telah mengirimkan permintaan jaringan ke layanan push untuk mendapatkan data yang diperlukan untuk menghasilkan
PushSubscription.
Promise subscribe() akan diselesaikan dengan PushSubscription jika langkah-langkah ini berhasil. Jika pengguna tidak memberikan izin atau jika ada masalah dalam langganan pengguna, promise akan menolak dengan kesalahan. Ini akan memberi Anda rantai promise berikut dalam codelab:
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
updateBtn();
});Dengan ini, Anda akan mendapatkan langganan dan memperlakukan pengguna sebagai berlangganan atau menemukan error dan mencatatnya ke konsol. Dalam kedua skenario tersebut, Anda memanggil updateBtn() untuk memastikan bahwa tombol diaktifkan kembali dan memiliki teks yang sesuai.
Dalam aplikasi yang sebenarnya, fungsi updateSubscriptionOnServer() adalah tempat Anda akan mengirimkan data langganan ke backend, tetapi untuk codelab ini, Anda cukup menampilkan langganan di UI Anda. Tambahkan fungsi berikut ke scripts/main.js:
function updateSubscriptionOnServer(subscription) {
// TODO: Send subscription to application server
const subscriptionJson = document.querySelector('.js-subscription-json');
const subscriptionDetails =
document.querySelector('.js-subscription-details');
if (subscription) {
subscriptionJson.textContent = JSON.stringify(subscription);
subscriptionDetails.classList.remove('is-invisible');
} else {
subscriptionDetails.classList.add('is-invisible');
}
}Coba
Buka tab Push Codelab, muat ulang halaman, lalu klik tombol. Anda akan melihat perintah izin seperti ini:
Jika memberikan izin, Anda akan melihat User is subscribed dicatat ke konsol. Teks tombol akan berubah menjadi Nonaktifkan Push Messaging dan Anda akan dapat melihat langganan sebagai data JSON di bagian bawah halaman.
Satu hal yang belum Anda tangani adalah apa yang terjadi jika pengguna memblokir permintaan izin. Hal ini memerlukan pertimbangan unik karena jika pengguna memblokir izin, aplikasi web tidak akan dapat menampilkan kembali permintaan izin dan tidak akan dapat membuat pengguna berlangganan. Anda setidaknya harus menonaktifkan tombol push agar pengguna tahu bahwa tombol tersebut tidak dapat digunakan.
Tempat yang jelas untuk menangani skenario ini adalah dalam fungsi updateBtn(). Yang perlu Anda lakukan hanyalah memeriksa nilai Notification.permission, seperti berikut:
function updateBtn() {
if (Notification.permission === 'denied') {
pushButton.textContent = 'Push Messaging Blocked';
pushButton.disabled = true;
updateSubscriptionOnServer(null);
return;
}
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}Anda tahu bahwa jika izinnya adalah denied, pengguna tidak dapat berlangganan dan tidak ada lagi yang dapat Anda lakukan, jadi menonaktifkan tombol secara permanen adalah pendekatan terbaik.
Coba
Karena Anda telah memberikan izin untuk aplikasi web dari langkah sebelumnya, Anda harus mengklik i dalam lingkaran di kolom URL, lalu mengubah izin Notifikasi menjadi Gunakan default global (Tanyakan).
Setelah Anda mengubah setelan ini, muat ulang halaman dan klik tombol Enable Push Messaging dan pilih Block dalam dialog izin. Tombol akan dinonaktifkan dan menampilkan teks Pesan Push Diblokir.
Dengan perubahan ini, Anda sekarang dapat membuat pengguna berlangganan, setelah menangani kemungkinan skenario izin.
Sebelum mempelajari cara mengirim pesan push dari backend, Anda harus mempertimbangkan apa yang sebenarnya akan terjadi saat pengguna berlangganan menerima pesan push.
Ketika Anda memicu pesan push, browser menerima pesan push, mengetahui untuk apa pekerja layanan yang didorong, mengaktifkan layanan tersebut, dan mengirimkan peristiwa push. Anda perlu memantau peristiwa ini dan menampilkan notifikasinya.
Tambahkan kode berikut ke file sw.js Anda:
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});Mari kita ikuti kode ini. Anda sedang memproses peristiwa push di pekerja layanan dengan menambahkan pemroses peristiwa:
self.addEventListener('push', ... );(Kecuali Anda pernah bermain dengan Web Worker sebelumnya, self mungkin adalah orang baru. Dalam file pekerja layanan, self merujuk ke pekerja layanan itu sendiri.)
Saat pesan push diterima, pemroses peristiwa akan dipanggil, dan Anda membuat notifikasi dengan memanggil showNotification() pada properti registration pekerja layanan. showNotification() memerlukan title; Anda juga dapat memberinya objek options untuk menetapkan badge, ikon, dan pesan isi. (Badge hanya digunakan di Android pada saat penulisan.)
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
self.registration.showNotification(title, options);Hal terakhir yang perlu dibahas dalam penanganan peristiwa push adalah event.waitUntil(). Metode ini mengambil promise untuk mengaktifkan browser agar pekerja layanan tetap aktif dan berjalan hingga promise yang diteruskan telah diselesaikan.
Untuk membuat kode di atas sedikit lebih mudah dipahami, Anda dapat menulis ulang kode tersebut seperti berikut:
const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);Setelah Anda melangkah melewati peristiwa push, mari kita uji peristiwa push.
Coba
Dengan penanganan peristiwa push di pekerja layanan, Anda dapat memicu peristiwa push palsu untuk menguji apa yang terjadi ketika pesan diterima.
Di aplikasi web, berlanggananlah ke push messaging dan pastikan Anda melihat User IS subscribed di konsol. Di panel Aplikasi di DevTools, pada tab Service Worker, klik tombol Push:
Setelah mengklik Push, Anda akan melihat notifikasi seperti ini:
Catatan: Jika langkah ini tidak berhasil, coba batalkan pendaftaran pekerja layanan dengan link Unregister dalam panel Aplikasi DevTools, tunggu hingga pekerja layanan dihentikan, lalu muat ulang halaman.
Jika mengklik salah satu notifikasi ini, Anda akan menyadari bahwa tidak ada yang terjadi. Anda dapat menangani klik notifikasi dengan memproses peristiwa notificationclick di pekerja layanan.
Mulai dengan menambahkan pemroses notificationclick di sw.js:
self.addEventListener('notificationclick', function(event) {
console.log('[Service Worker] Notification click received.');
event.notification.close();
event.waitUntil(
clients.openWindow('https://developers.google.com/web')
);
});Saat pengguna mengklik notifikasi, pemroses peristiwa notificationclick akan dipanggil.
Kode terlebih dahulu menutup notifikasi yang diklik:
event.notification.close();Kemudian, jendela atau tab baru akan terbuka dan memuat URL https://developers.google.com/web. Jangan ragu untuk mengubahnya.
event.waitUntil(
clients.openWindow('https://developers.google.com/web/')
);event.waitUntil() memastikan bahwa browser tidak menghentikan pekerja layanan sebelum jendela atau tab baru ditampilkan.
Coba
Coba picu pesan push di DevTools lagi dan klik notifikasi. Anda sekarang akan melihat notifikasi ditutup dan tab baru terbuka.
Anda telah melihat bahwa aplikasi web mampu menampilkan notifikasi menggunakan DevTools dan melihat cara menutup notifikasi dengan sekali klik. Langkah berikutnya adalah mengirim pesan push yang sebenarnya.
Biasanya, ini akan memerlukan pengiriman langganan dari halaman web ke backend. Backend kemudian akan memicu pesan push dengan membuat panggilan API ke endpoint di langganan.
Tindakan ini di luar cakupan codelab ini, tetapi Anda dapat menggunakan situs pendamping (web-push-codelab.glitch.me) untuk memicu pesan push yang sebenarnya. Tempelkan langganan di bagian bawah halaman Anda:
Kemudian tempel ini ke situs pendamping di area teks Langganan Kirim ke:
Di bagian Text to Send, tambahkan string apa pun yang ingin dikirim dengan pesan push.
Klik tombol Kirim pesan push.
Kemudian Anda akan menerima pesan push. Teks yang Anda gunakan akan dicatat ke konsol.
Hal ini akan memberi Anda kesempatan untuk menguji pengiriman dan penerimaan data, serta untuk memanipulasi notifikasi sebagai akibatnya.
Aplikasi pendamping hanyalah server node yang menggunakan library web-push untuk mengirim pesan. Ada baiknya meninjau org-push-libs web di GitHub untuk melihat library apa yang tersedia untuk mengirim pesan push bagi Anda. Hal ini menangani banyak detail untuk memicu pesan push.
Anda dapat melihat semua kode untuk situs pendamping di sini.
Satu hal yang hilang adalah kemampuan untuk menghentikan langganan pengguna dari push. Untuk melakukannya, Anda perlu memanggil unsubscribe() pada PushSubscription.
Kembali ke file scripts/main.js Anda, ubah pemroses klik pushButton di initializeUI() menjadi berikut:
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
unsubscribeUser();
} else {
subscribeUser();
}
});Perhatikan bahwa sekarang Anda akan memanggil fungsi baru unsubscribeUser(). Dalam fungsi ini, Anda mendapatkan langganan saat ini dan memanggil unsubscribe() di dalamnya. Tambahkan kode berikut ke scripts/main.js:
function unsubscribeUser() {
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
});
}Mari kita ikuti fungsi ini.
Pertama, Anda bisa mendapatkan langganan saat ini dengan memanggil getSubscription():
swRegistration.pushManager.getSubscription()Ini menampilkan promise yang di-resolve dengan PushSubscription jika ada; jika tidak, akan menampilkan null. Jika ada langganan, Anda memanggil unsubscribe() di dalamnya, yang membuat PushSubscription tidak valid.
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
// TODO: Tell application server to delete subscription
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})Memanggil unsubscribe() akan menampilkan promise, karena perlu waktu agak lama untuk selesai. Anda mengembalikan promise tersebut sehingga then() berikutnya dalam rantai menunggu unsubscribe() selesai. Anda juga akan menambahkan pengendali catch jika panggilan unsubscribe() menghasilkan error. Setelah itu, Anda dapat mengupdate UI.
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
})Coba
Anda harus dapat menekan Aktifkan Push Messaging atau Nonaktifkan Push Messaging di aplikasi web, dan log akan menampilkan pengguna yang berlangganan dan berhenti berlangganan.
Selamat, Anda telah menyelesaikan codelab ini!
Codelab ini telah menunjukkan kepada Anda cara memulai dan menjalankan dengan menambahkan notifikasi push ke aplikasi web. Jika Anda ingin mempelajari lebih lanjut tentang apa yang dapat dilakukan notifikasi web, lihat dokumen ini.
Jika Anda ingin menerapkan notifikasi push di situs, Anda mungkin tertarik untuk menambahkan dukungan untuk browser lama atau browser yang tidak sesuai standar yang menggunakan GCM. Pelajari lebih lanjut di sini.
Bacaan lebih lanjut
- Notifikasi push web: dokumentasi tentang dasar-dasar web.
- Library push web: library push web, termasuk Node.js, PHP, Java, Python, C, dan C#.