Today Widget: nó là gì, các loại và tạo widget thông báo

Today Widget là gì

Today Widget (còn được gọi là widget Trung tâm thông báo) là một phần tử giao diện iOS hiển thị thông tin tóm tắt từ một ứng dụng mà không cần khởi chạy nó. Người dùng thấy widget bằng cách vuốt sang trái trên Màn hình khóa hoặc trên Màn hình chính. Widget có thể hiển thị dữ liệu động — tỷ giá hối đoái, tin tức mới nhất, trạng thái tác vụ, trạng thái thiết bị.

Trong lịch sử, Today Widget xuất hiện trong iOS 8 như một tiện ích mở rộng Trung tâm thông báo được triển khai thông qua framework Trung tâm thông báo. Với iOS 14, Apple đã giới thiệu WidgetKit — một kiến trúc được thiết kế lại hoàn toàn cho phép đặt widget trực tiếp trên Màn hình chính. Today Widget theo nghĩa hiện đại là một widget WidgetKit được đặt trong phần “Hôm nay” (phần widget ở bên trái màn hình đầu tiên).

Tại sao bạn cần Today Widget

Mục tiêu chính là giảm thời gian truy cập thông tin. Thay vì mở ứng dụng, điều hướng qua các menu và chờ tải, người dùng ngay lập tức thấy dữ liệu cần thiết. Theo Apple (2024), các ứng dụng có widget cho thấy mức độ tương tác của người dùng cao hơn 27%. Các trường hợp sử dụng bổ sung: hành động nhanh (đánh dấu tác vụ đã hoàn thành), giám sát (nhịp tim, hoạt động) và trạng thái (sạc pin, thông báo).

WidgetKit so với NCWidgetProviding

Nhà phát triển Today Widget có hai cách tiếp cận: WidgetKit hiện đại (iOS 14+) và tiện ích mở rộng kế thừa NCWidgetProviding (iOS 8–13). Lựa chọn phụ thuộc vào phiên bản iOS tối thiểu được hỗ trợ. WidgetKit được khuyến nghị cho các dự án mới, NCWidgetProviding để hỗ trợ các thiết bị cũ.

Khi nào sử dụng WidgetKit

Nếu ứng dụng của bạn hỗ trợ iOS 14 trở lên — hãy sử dụng WidgetKit. Nó cung cấp các khả năng phong phú: nhiều kích thước, cấu hình qua intents, thiết kế lại với iOS 17 và liên kết sâu. Tính khai báo của SwiftUI làm cho mã widget trở nên nhỏ gọn và dễ đọc. Timeline Provider tự động quản lý lịch cập nhật với việc tính đến mức tiêu thụ điện năng.

Khi nào sử dụng NCWidgetProviding

Chỉ khi cần hỗ trợ iOS 9–13. NCWidgetProviding đơn giản hơn để triển khai — nó là một UIViewController thông thường với một giao thức. Tuy nhiên, nó bị hạn chế: một kích thước duy nhất, chỉ UIKit, không cấu hình. Apple khuyến nghị chuyển sang WidgetKit ngay cả cho các dự án cũ bằng cách sử dụng availability check: WidgetKit trên iOS 14+, NCWidgetProviding làm phương án dự phòng.

Các loại Today Widget

Trong iOS hiện đại, có ba loại widget theo mục đích chức năng. Mỗi loại giải quyết vấn đề riêng của nó và yêu cầu cách tiếp cận khác nhau đối với thiết kế dữ liệu và giao diện. Phân loại giúp chọn kiến trúc phù hợp cho ứng dụng của bạn.

Widget thông tin

Hiển thị thông tin tĩnh hoặc được cập nhật định kỳ: thời tiết, ngày tháng, tỷ giá hối đoái, trạng thái máy chủ. Dữ liệu được cập nhật theo lịch trình thông qua Timeline Provider. Người dùng không tương tác với widget — chỉ đọc. Widget thông tin là loại đơn giản nhất để triển khai, không yêu cầu xử lý sự kiện chạm và hoạt động trong nền mà không cần thêm quyền.

Widget tương tác

Với iOS 17, WidgetKit hỗ trợ các nút, công tắc và thanh trượt trong widget. Người dùng có thể thực hiện hành động — đánh dấu tác vụ, tạm dừng nhạc, bật đèn — mà không cần mở ứng dụng. Widget tương tác sử dụng App Intents để chuyển hành động đến ứng dụng chính. Hạn chế: chỉ trên Màn hình chính, không phải trong phần “Hôm nay” cho đến iOS 18.

Widget có thể cấu hình

Người dùng tùy chỉnh dữ liệu hiển thị thông qua giao diện hệ thống — chọn thành phố cho thời tiết, tài khoản cho tài chính, danh mục cho tin tức. Được triển khai thông qua Intents Extension và cấu hình trong WidgetBundle. Widget có thể cấu hình tăng tính cá nhân hóa và mức độ liên quan của thông tin cho mỗi người dùng.

Tạo widget WidgetKit

Hãy xem quy trình tạo Today Widget trong SwiftUI bằng WidgetKit. Widget sẽ hiển thị tỷ giá hối đoái hiện tại với các cập nhật tự động. WidgetKit yêu cầu ba thành phần: cấu trúc widget, Provider với cấu hình và View để hiển thị.

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 chịu trách nhiệm chuẩn bị dữ liệu để hiển thị. Phương thức getTimeline tạo lịch cập nhật: lần cập nhật tiếp theo sau 15 phút. TimelineProvider đảm bảo widget hiển thị dữ liệu cập nhật mà không cần liên tục truy vấn máy chủ.

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 và cập nhật dữ liệu

Timeline Provider là cơ chế trung tâm của WidgetKit để quản lý dữ liệu Today Widget. Thay vì cập nhật định kỳ bằng bộ hẹn giờ (như trong NCWidgetProviding cũ), WidgetKit sử dụng khái niệm timeline — một chuỗi các mục có dấu thời gian. Hệ thống hiển thị mục hiện tại cho đến khi hết hạn, sau đó chuyển sang mục tiếp theo hoặc yêu cầu một mục mới.

Chính sách cập nhật

Timeline hỗ trợ ba chính sách: .after(date) — cập nhật tiếp theo vào ngày được chỉ định; .never — widget không cập nhật cho đến khi gọi WidgetCenter.reloadAllTimelines một cách rõ ràng; .atEnd — cập nhật sau khi hiển thị mục cuối cùng. Đối với Today Widget với tỷ giá hối đoái, chính sách .after với khoảng thời gian 15–30 phút là tối ưu. Hiệu quả năng lượng là một lợi thế chính của WidgetKit: hệ thống nhóm các bản cập nhật của tất cả các widget trong một cửa sổ.

WidgetCenter: cập nhật theo chương trình

Nếu dữ liệu thay đổi trước khi timeline hết hạn (ví dụ: người dùng đã cập nhật tỷ giá trong ứng dụng), hãy gọi WidgetCenter.shared.reloadTimelines(ofKind: “CurrencyWidget”). Điều này sẽ yêu cầu một timeline mới từ Provider và cập nhật hiển thị. WidgetCenter cũng cho phép tải lại tất cả các widget của ứng dụng bằng một lệnh duy nhất — thuận tiện sau khi đồng bộ dữ liệu.

Hướng dẫn thiết kế widget

Apple đưa ra các yêu cầu nghiêm ngặt đối với thiết kế Today Widget: nội dung phải đọc được trong nháy mắt, không có các yếu tố không cần thiết và có thứ bậc rõ ràng. Vi phạm các khuyến nghị HIG (Nguyên tắc giao diện người dùng) là lý do từ chối khi xuất bản trên App Store. Ba nguyên tắc: khả năng đọc nhanh, nhất quán và thứ bậc.

Khả năng đọc nhanh — đọc trong nháy mắt

Người dùng dành chưa đầy một giây cho một widget. Không thêm quá 3–4 phần tử dữ liệu. Phông chữ — tối thiểu 11pt cho nhãn, 17pt cho giá trị. Sử dụng in đậm (Semibold) cho các số chính. Tránh cuộn — Today Widget không cuộn.

Thích ứng với kích thước

WidgetKit hỗ trợ ba kích thước: Nhỏ (170×170pt), Vừa (364×170pt), Lớn (364×382pt). Đối với Today Widget trong phần “Hôm nay”, kích thước Vừa là lựa chọn phổ biến nhất. Thiết kế thích ứng thông qua EnvironmentValues: thay đổi mật độ thông tin tùy theo kích thước. Nhỏ — một số, Vừa — số + biểu đồ, Lớn — bảng.

Hỗ trợ chế độ tối và Dynamic Type

Widget sẽ hiển thị chính xác trong giao diện sáng và tối mà không cần hành động bổ sung của nhà phát triển — WidgetKit tự động lấy màu hệ thống. Dynamic Type cho widget bị giới hạn: kích thước phông chữ cố định, nhưng phải dễ đọc. UIColor.label và UIColor.systemBackground là các màu cơ bản cho văn bản và nền trong cả hai giao diện.