Today Widget: apa itu, jenis dan pembuatan widget notifikasi

Apa itu Today Widget

Today Widget (juga dikenal sebagai widget Pusat Notifikasi) — elemen antarmuka iOS yang menampilkan informasi ringkas dari aplikasi tanpa meluncurkannya. Pengguna melihat widget dengan menggeser layar ke kiri di Layar Kunci atau di layar utama. Widget dapat menampilkan data dinamis — nilai tukar, berita terbaru, status tugas, kondisi perangkat.

Secara historis, Today Widget muncul di iOS 8 sebagai ekstensi Pusat Notifikasi, diimplementasikan melalui framework Notification Center. Dengan iOS 14, Apple memperkenalkan WidgetKit — arsitektur yang didesain ulang sepenuhnya yang memungkinkan penempatan widget langsung di desktop. Today Widget dalam pengertian modern — widget WidgetKit yang ditempatkan di bagian “Hari Ini” (bagian widget di sebelah kiri layar pertama).

Mengapa Today Widget diperlukan

Tujuan utamanya adalah mengurangi waktu akses ke informasi. Alih-alih membuka aplikasi, menavigasi menu dan menunggu pemuatan, pengguna langsung melihat data yang diperlukan. Menurut Apple (2024), aplikasi dengan widget menunjukkan keterlibatan pengguna 27% lebih tinggi. Skenario tambahan: tindakan cepat (menandai tugas selesai), pemantauan (denyut nadi, aktivitas) dan status (pengisian baterai, notifikasi).

WidgetKit vs NCWidgetProviding

Pengembang Today Widget memiliki dua pendekatan: WidgetKit modern (iOS 14+) dan ekstensi lawas NCWidgetProviding (iOS 8–13). Pilihan tergantung pada versi iOS minimum yang didukung. WidgetKit direkomendasikan untuk proyek baru, NCWidgetProviding — untuk dukungan perangkat lama.

Kapan menggunakan WidgetKit

Jika aplikasi Anda mendukung iOS 14 dan yang lebih baru — gunakan WidgetKit. Ia menawarkan kemampuan yang kaya: banyak ukuran, konfigurasi melalui intent, desain ulang dengan iOS 17 dan tautan dalam. Deklarativitas SwiftUI membuat kode widget menjadi ringkas dan mudah dibaca. Timeline Provider secara otomatis mengelola jadwal pembaruan dengan mempertimbangkan konsumsi daya.

Kapan menggunakan NCWidgetProviding

Hanya jika dukungan untuk iOS 9–13 diperlukan. NCWidgetProviding lebih sederhana dalam implementasi — ini adalah UIViewController biasa dengan protokol. Namun terbatas: satu ukuran, hanya UIKit, tanpa konfigurasi. Apple merekomendasikan migrasi ke WidgetKit bahkan untuk proyek lama, menggunakan availability check: WidgetKit di iOS 14+, NCWidgetProviding sebagai fallback.

Jenis-jenis Today Widget

Dalam iOS modern, tiga jenis widget dibedakan berdasarkan tujuan fungsional. Masing-masing jenis memecahkan masalahnya sendiri dan memerlukan pendekatan yang berbeda terhadap perancangan data dan antarmuka. Klasifikasi membantu memilih arsitektur yang tepat untuk aplikasi Anda.

Widget informasi

Menampilkan informasi statis atau yang diperbarui secara berkala: cuaca, tanggal, nilai tukar, status server. Data diperbarui sesuai jadwal melalui Timeline Provider. Pengguna tidak berinteraksi dengan widget — hanya membaca. Widget informasi — paling sederhana dalam implementasi, tidak memerlukan pemrosesan sentuhan dan bekerja di latar belakang tanpa izin tambahan.

Widget interaktif

Sejak iOS 17, WidgetKit mendukung tombol, sakelar, dan penggeser di widget. Pengguna dapat melakukan tindakan — menandai tugas, menjeda musik, menyalakan lampu — tanpa membuka aplikasi. Interactive Widgets menggunakan App Intents untuk mengirimkan tindakan ke aplikasi utama. Keterbatasan: hanya di desktop, tidak di bagian “Hari Ini” hingga iOS 18.

Widget yang dapat dikonfigurasi

Pengguna menyesuaikan data yang ditampilkan melalui antarmuka sistem — memilih kota untuk cuaca, akun untuk keuangan, kategori untuk berita. Diimplementasikan melalui Intents Extension dan konfigurasi di WidgetBundle. Widget yang dapat dikonfigurasi meningkatkan personalisasi dan relevansi informasi bagi setiap pengguna.

Membuat widget WidgetKit

Mari kita lihat proses pembuatan Today Widget di SwiftUI menggunakan WidgetKit. Widget akan menampilkan nilai tukar mata uang saat ini dengan pembaruan otomatis. WidgetKit memerlukan tiga komponen: struktur widget, Provider dengan konfigurasi, dan View untuk menampilkan.

import WidgetKit
import SwiftUI

@main
struct CurrencyWidget: Widget {
    let kind: String = "CurrencyWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            CurrencyWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Currency Rate")
        .description("Current USD/RUB exchange rate")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Provider bertanggung jawab menyiapkan data untuk ditampilkan. Metode getTimeline membuat jadwal pembaruan: pembaruan berikutnya dalam 15 menit. TimelineProvider menjamin widget menampilkan data terkini tanpa polling server yang konstan.

struct Provider: TimelineProvider {
    func getSnapshot(in context: Context,
                      completion: @escaping (CurrencyEntry) -> Void) {
        let entry = CurrencyEntry(date: Date(), rate: 92.5)
        completion(entry)
    }

    func getTimeline(in context: Context,
                     completion: @escaping (Timeline<CurrencyEntry>) -> Void) {
        let rate = CurrencyService().fetchRate()
        let entry = CurrencyEntry(date: Date(), rate: rate)
        let nextUpdate = Calendar.current.date(
            byAdding: .minute, value: 15, to: Date()
        ) ?? Date()
        let timeline = Timeline(entries: [entry], policy: .after(nextUpdate))
        completion(timeline)
    }
}

Timeline Provider dan Pembaruan Data

Timeline Provider — mekanisme sentral WidgetKit untuk mengelola data Today Widget. Alih-alih pembaruan berkala dengan timer (seperti di NCWidgetProviding lama), WidgetKit menggunakan konsep timeline — urutan catatan dengan stempel waktu. Sistem menampilkan catatan saat ini hingga kedaluwarsa, kemudian beralih ke catatan berikutnya atau meminta yang baru.

Kebijakan pembaruan

Timeline mendukung tiga kebijakan: .after(date) — pembaruan berikutnya pada tanggal yang ditentukan; .never — widget tidak diperbarui hingga panggilan eksplisit WidgetCenter.reloadAllTimelines; .atEnd — pembaruan setelah menampilkan catatan terakhir. Untuk Today Widget dengan nilai tukar, kebijakan .after dengan interval 15–30 menit adalah optimal. Efisiensi energi — keunggulan utama WidgetKit: sistem mengelompokkan pembaruan semua widget dalam satu jendela.

WidgetCenter: pembaruan terprogram

Jika data berubah sebelum timeline kedaluwarsa (misalnya, pengguna memperbarui nilai tukar di aplikasi), panggil WidgetCenter.shared.reloadTimelines(ofKind: "CurrencyWidget"). Ini akan meminta timeline baru dari Provider dan memperbarui tampilan. WidgetCenter juga memungkinkan memuat ulang semua widget aplikasi dengan satu perintah — nyaman setelah sinkronisasi data.

Rekomendasi Desain Widget

Apple menetapkan persyaratan ketat untuk desain Today Widget: konten harus terbaca dari jarak jauh, tanpa elemen berlebihan dan dengan hierarki yang jelas. Pelanggaran rekomendasi HIG (Human Interface Guidelines) adalah alasan penolakan saat publikasi di App Store. Tiga prinsip: glanceability, consistency, dan hierarchy.

Glanceability — keterbacaan sekilas

Pengguna menghabiskan kurang dari satu detik pada widget. Jangan menambahkan lebih dari 3–4 elemen data. Font — minimal 11pt untuk label, 17pt untuk nilai. Gunakan tebal (Semibold) untuk angka-angka kunci. Hindari pengguliran — Today Widget tidak bisa digulir.

Adaptasi ke ukuran

WidgetKit mendukung tiga ukuran: Small (170×170pt), Medium (364×170pt), Large (364×382pt). Untuk Today Widget di bagian “Hari Ini”, Medium adalah pilihan paling umum. Desain adaptif melalui EnvironmentValues: ubah kepadatan informasi tergantung ukuran. Small — satu angka, Medium — angka + grafik, Large — tabel.

Dukungan tema gelap dan Dynamic Type

Widget harus ditampilkan dengan benar dalam tema terang dan gelap tanpa tindakan tambahan dari pengembang — WidgetKit secara otomatis mengambil warna sistem. Dynamic Type untuk widget terbatas: ukuran font tetap, tetapi harus terbaca. UIColor.label dan UIColor.systemBackground — warna dasar untuk teks dan latar belakang di kedua tema.