Halaman ini diterjemahkan oleh Cloud Translation API.

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

Apa itu Pemicu Notifikasi?

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

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

Pemicu notifikasi mengatasi masalah ini dengan memungkinkan Anda menjadwalkan notifikasi beserta pemicunya agar sistem operasi mengirimkan notifikasi pada saat yang tepat meskipun tidak ada konektivitas jaringan atau perangkat dalam mode penghemat baterai.

Kasus penggunaan

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

Jaringan TV mungkin mengingatkan pengguna bahwa acara TV favorit mereka akan segera dimulai atau konferensi secara langsung streaming akan segera dimulai.

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

Status saat ini

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

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.

Deteksi fitur

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

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

Menjadwalkan notifikasi

Menjadwalkan notifikasi mirip dengan menampilkan notifikasi {i>push<i} biasa, kecuali bahwa Anda harus teruskan 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),
  });
};

Membatalkan notifikasi terjadwal

Untuk membatalkan notifikasi terjadwal, pertama-tama mintalah daftar semua notifikasi yang cocok dengan hingga ServiceWorkerRegistration.getNotifications(). Perhatikan bahwa Anda harus meneruskan includeTriggered tanda 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 men-debug, tekan Start recording events atau Control+E (Command+E di Mac). Data Chrome DevTools semua aktivitas notifikasi, termasuk notifikasi terjadwal, ditampilkan, dan ditutup, selama tiga hari, bahkan saat DevTools ditutup.

Peristiwa notifikasi terjadwal dicatat di panel Notifications dari Chrome DevTools, yang terletak di panel Application. — Notifikasi terjadwal.

Peristiwa notifikasi yang ditampilkan dicatat ke panel Notifikasi di Chrome DevTools. — Notifikasi yang ditampilkan.

Demo

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

Keamanan dan izin

Tim Chrome telah merancang dan menerapkan Notification Triggers API menggunakan prinsip inti didefinisikan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk informasi kontrol, transparansi, dan ergonomi. Karena memerlukan pekerja layanan, API ini juga memerlukan 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 ketika pekerja layanan atau pengguna menghapus semua data situs untuk origin. Memblokir cookie juga akan mencegah layanan pekerja Anda agar tidak diinstal di Chrome, sehingga API ini tidak dapat digunakan. Notifikasi dapat selalu dinonaktifkan oleh pengguna untuk situs di pengaturan situs.

Transparansi

Tidak seperti Push API, API ini tidak bergantung pada jaringan, yang menyiratkan notifikasi terjadwal memerlukan semua data yang diperlukan terlebih dahulu, termasuk resource gambar yang dirujuk oleh badge, icon, dan Atribut 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 developer untuk mendapatkan informasi tentang pengguna melalui pendekatan yang berpotensi melanggar privasi, seperti pencarian geolokasi alamat IP. Desain ini juga memungkinkan fitur untuk 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 yang hilang yang dibutuhkan untuk menerapkan ide Anda? Memiliki pertanyaan atau komentar tentang keamanan model? Laporkan masalah spesifikasi di repo GitHub Pemicu Notifikasi, atau tambahkan pendapat Anda ke masalah yang 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 mengatur Components ke UI>Notifications. Glitch berfungsi dengan baik untuk berbagi reproduksi {i>bug<i} yang cepat dan mudah.

Anda berencana menggunakan API?

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

Tautan 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 mengulas artikel: Joe Medley, Pete LePage, serta Richard dan Peter. Banner besar oleh Lukas Blazek di Unsplash.