Sistem Prioritas Icon Notifikasi Push — 4 Tingkat Fallback

Pernah lihat notifikasi push dari website muncul dengan icon yang tidak sesuai? Di Windows muncul bell.svg, di mobile muncul favicon. Ini terjadi karena tidak ada prioritas icon yang jelas — sistem asal kirim aja icon default yang dikonfigurasi di settings.

Padahal idealnya, notifikasi tentang artikel baru harus menampilkan thumbnail artikel tersebut, atau minimal gambar pertama dari konten artikel. Baru kalau benar-benar tidak ada, fallback ke icon default atau favicon.

Masalahnya

Di plugin Browser Push Notifications yang aku buat, konfigurasi Default Notification Icon hanya bisa diisi satu URL statis. Akibatnya:

• Semua notifikasi pakai icon yang sama (bell.svg)
• Tidak ada konteks visual dari artikel yang dipromosikan
• Di perangkat berbeda, icon bisa tampil beda karena fallback OS

Sistem Fallback 4 Tingkat

Solusinya: setiap kali push notification dikirim dengan menyertakan URL artikel, sistem otomatis mencari icon dalam urutan prioritas berikut:

Cara kerjanya sederhana: ketika API push notification menerima request dengan URL artikel, dia extract slug dari URL, query ke database untuk cari post, lalu cek thumbnail-nya. Kalau ada thumbnail, langsung dipakai. Kalau tidak, regex <img src="..."> dari konten untuk ambil gambar pertama. Kalau masih tidak ada, fallback ke konfigurasi.

Implementasi

Di endpoint /api/push/send.php, logikanya hanya beberapa baris:

// Auto-resolve icon: thumbnail → first image → default → favicon
if (empty($icon) && $url !== '') {
    $slug = extract_slug_from_url($url);
    $post = query_post_by_slug($slug);

    if ($post->thumbnail) {
        $icon = $post->thumbnail;
    } elseif (first_image_from_content($post->content)) {
        $icon = $first_image;
    }
}

if (empty($icon)) {
    $icon = get_default_icon_setting();
}
if (empty($icon)) {
    $icon = get_favicon_setting();
}

Dengan sistem ini, setiap artikel yang dipublikasikan lewat scheduler otomatis akan thumbnail-nya muncul di notifikasi push. Tidak perlu konfigurasi tambahan — cukup pastikan push API dipanggil dengan URL artikel yang benar.

Kesimpulan

Sistem fallback 4 tingkat ini memastikan notifikasi push selalu tampil dengan icon yang relevan. Prioritas thumbnail artikel memberikan konteks visual yang lebih baik daripada icon bell yang itu-itu saja. Dan jika artikel tidak punya thumbnail sama sekali, tetap ada fallback sampai ke favicon website, jadi tidak pernah kosong.

Kode lengkap plugin ini bisa dilihat di github.com/adammuizweb/browser-push.