API Pemicu Notifikasi

Pemicu Notifikasi memungkinkan Anda menjadwalkan notifikasi lokal yang tidak memerlukan koneksi jaringan, sehingga cocok untuk kasus penggunaan seperti aplikasi kalender.

Thomas Steiner

Peringatan: Pengembangan Notification Triggers API, yang merupakan bagian dari project kemampuan Google, tidak lagi dilakukan. Lanskap notifikasi di seluruh sistem operasi bergerak cukup cepat, dan belum jelas apakah kami akan dapat memberikan pengalaman yang solid, konsisten, dan andal di seluruh platform.

Guna menciptakan pengalaman yang baik, perlu ada mekanisme untuk dapat memangkas notifikasi terjadwal yang sudah tidak berlaku atau tidak valid, misalnya, acara kalender yang dibatalkan, tanpa mengandalkan tab yang dibuka. Kami telah menerima masukan bahwa ritme penggunaan "Sinkronisasi Latar Belakang Berkala tidak cukup untuk hal ini, dan karena harus menampilkan notifikasi, Push API juga bukan solusi yang baik.

Apa itu Pemicu Notifikasi?

Developer web dapat menampilkan notifikasi menggunakan Web Notifications API. Fitur ini sering digunakan dengan Push API untuk memberi tahu pengguna tentang informasi mendesak, seperti peristiwa berita terbaru atau pesan yang diterima. Notifikasi ditampilkan dengan menjalankan JavaScript di perangkat pengguna.

Masalah pada Push API adalah tidak dapat diandalkan untuk memicu notifikasi yang harus ditampilkan saat kondisi tertentu, seperti waktu atau lokasi, terpenuhi. Contoh kondisi berbasis waktu adalah notifikasi kalender yang mengingatkan Anda akan rapat penting dengan atasan Anda pada pukul 14.00. Contoh kondisi berbasis lokasi adalah notifikasi yang mengingatkan Anda untuk membeli susu saat Anda memasuki area sekitar toko bahan makanan. Konektivitas jaringan atau fitur yang hemat baterai seperti mode istirahatkan dapat menunda pengiriman notifikasi berbasis push.

Pemicu notifikasi mengatasi masalah ini dengan memungkinkan Anda menjadwalkan notifikasi dengan kondisi pemicunya terlebih dahulu, sehingga sistem operasi akan mengirimkan notifikasi di waktu yang tepat meskipun tidak ada konektivitas jaringan atau perangkat dalam mode penghemat baterai.

Catatan: Untuk saat ini, Chrome hanya mendukung pemicu berbasis waktu. Pemicu tambahan, seperti pemicu berbasis lokasi, dapat ditambahkan di masa mendatang berdasarkan permintaan developer.

Kasus penggunaan

Aplikasi Kalender dapat menggunakan pemicu notifikasi berbasis waktu untuk mengingatkan pengguna tentang rapat mendatang. Skema notifikasi default untuk aplikasi kalender adalah menampilkan notifikasi pendahuluan pertama satu jam sebelum rapat, lalu notifikasi lain yang lebih mendesak lima menit sebelumnya.

Jaringan TV mungkin mengingatkan pengguna bahwa acara TV favorit mereka akan dimulai atau live stream konferensi akan segera dimulai.

Situs konversi zona waktu dapat menggunakan pemicu notifikasi berbasis waktu agar penggunanya dapat menjadwalkan alarm untuk konferensi telepon atau panggilan video.

Status saat ini

Langkah	Status
1. Buat penjelasan	Selesai
2. Membuat draf awal spesifikasi	Not started
3. Mengumpulkan masukan dan melakukan iterasi desain.	Dalam proses
4. Uji coba origin	Selesai
5. Peluncuran	Not started

Cara menggunakan pemicu notifikasi

Mengaktifkan melalui about://flags

Untuk bereksperimen dengan Notification Triggers API secara lokal, tanpa token uji coba origin, aktifkan flag #enable-experimental-web-platform-features di about://flags.

Catatan: Dua uji coba origin sebelumnya untuk fitur ini, yang memberi developer kesempatan untuk mencoba API yang diusulkan, berjalan dari Chrome 80 hingga 83 dan dari Chrome 86 hingga 88. Anda dapat membaca ringkasan masukan yang diperoleh sejauh ini.

Deteksi fitur

Anda dapat mengetahui apakah browser mendukung Pemicu Notifikasi dengan memeriksa keberadaan properti showTrigger:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Menjadwalkan notifikasi

Menjadwalkan notifikasi mirip dengan menampilkan notifikasi push biasa, kecuali bahwa Anda harus meneruskan properti kondisi showTrigger dengan objek TimestampTrigger sebagai nilai ke objek options notifikasi.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

Catatan: Di desktop, notifikasi memicu diaktifkan hanya jika Chrome sedang berjalan. Di Android, keduanya memicu semuanya.

Membatalkan notifikasi terjadwal

Untuk membatalkan notifikasi terjadwal, pertama-tama minta daftar semua notifikasi yang cocok dengan tag tertentu melalui ServiceWorkerRegistration.getNotifications(). Perhatikan bahwa Anda harus meneruskan flag includeTriggered agar notifikasi terjadwal disertakan dalam daftar:

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

Proses Debug

Anda dapat menggunakan Panel Notifikasi Chrome DevTools untuk men-debug notifikasi. Untuk memulai proses debug, tekan Start recording peristiwa atau Control+E (Command+E di Mac). Chrome DevTools mencatat semua peristiwa notifikasi, termasuk notifikasi terjadwal, ditampilkan, dan ditutup, selama tiga hari, bahkan saat DevTools ditutup.

Notifikasi terjadwal.

Notifikasi yang ditampilkan.

Demo

Anda dapat melihat cara kerja Pemicu Notifikasi di demo, yang memungkinkan Anda menjadwalkan notifikasi, mencantumkan notifikasi terjadwal, dan membatalkannya. Kode sumber tersedia di Glitch.

Demo Pemicu Notifikasi.

Keamanan dan izin

Tim Chrome telah merancang dan menerapkan Notification Triggers API menggunakan prinsip inti yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi. Karena memerlukan pekerja layanan, API ini juga memerlukan konteks yang aman. Penggunaan API memerlukan izin yang sama seperti notifikasi push reguler.

Kontrol pengguna

API ini hanya tersedia dalam konteks ServiceWorkerRegistration. Ini menyiratkan bahwa semua data yang diperlukan disimpan dalam konteks yang sama dan otomatis dihapus saat pekerja layanan dihapus atau pengguna menghapus semua data situs untuk asalnya. Memblokir cookie juga akan mencegah pekerja layanan diinstal di Chrome, sehingga API ini tidak dapat digunakan. Notifikasi untuk situs selalu dapat dinonaktifkan oleh pengguna di setelan situs.

Transparansi

Tidak seperti Push API, API ini tidak bergantung pada jaringan, yang menyiratkan bahwa notifikasi terjadwal memerlukan semua data yang diperlukan terlebih dahulu, termasuk resource gambar yang direferensikan oleh atribut badge, icon, dan image. Artinya, menampilkan notifikasi terjadwal tidak dapat diamati oleh developer dan tidak melibatkan pengaktifan pekerja layanan hingga pengguna berinteraksi dengan notifikasi. Akibatnya, saat ini belum ada cara yang diketahui bagi developer untuk mendapatkan informasi tentang pengguna melalui pendekatan yang berpotensi melanggar privasi seperti pencarian geolokasi alamat IP. Desain ini juga memungkinkan fitur ini secara opsional memanfaatkan mekanisme penjadwalan yang disediakan oleh sistem operasi seperti AlarmManager Android, yang membantu menghemat baterai.

Masukan

Tim Chrome ingin mengetahui pengalaman Anda terkait Pemicu Notifikasi.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub Pemicu Notifikasi, atau tambahkan pendapat Anda ke masalah yang sudah ada.

Ada masalah dengan implementasinya?

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan tetapkan Komponen ke UI>Notifications. Glitch sangat cocok untuk berbagi reproduksi bug yang cepat dan mudah.

Anda berencana menggunakan API?

Berencana menggunakan Pemicu Notifikasi di situs Anda? Dukungan publik Anda membantu kami memprioritaskan fitur dan menunjukkan kepada vendor browser lainnya betapa pentingnya mendukung mereka. Kirim tweet ke @ChromiumDev menggunakan hashtag #NotificationTriggers dan beri tahu kami tempat dan cara Anda menggunakannya.

Link Bermanfaat

• Penjelasan untuk publik
• Demo Pemicu Notifikasi | Sumber demo Pemicu Notifikasi
• Bug pelacakan
• Entri ChromeStatus.com
• Komponen Kedipan: UI>Notifications

Ucapan terima kasih

Pemicu Notifikasi diimplementasikan oleh Richard Knoll dan penjelasan yang ditulis oleh Peter Beverloo, dengan kontribusi dari Richard. Orang-orang berikut telah meninjau artikel tersebut: Joe Medley, Pete LePage, serta Richard dan Peter. Banner besar oleh Lukas Blazek di Unsplash.