Today Widget: คืออะไร ประเภท และการสร้างวิดเจ็ตการแจ้งเตือน

Today Widget คืออะไร

Today Widget (หรือที่รู้จักในชื่อวิดเจ็ตศูนย์การแจ้งเตือน) เป็นองค์ประกอบอินเทอร์เฟซของ iOS ที่แสดงข้อมูลสรุปจากแอปพลิเคชันโดยไม่ต้องเปิดใช้งาน ผู้ใช้เห็นวิดเจ็ตโดยการปัดไปทางซ้ายบนหน้าจอล็อกหรือหน้าจอหลัก วิดเจ็ตสามารถแสดงข้อมูลแบบไดนามิก — อัตราแลกเปลี่ยน ข่าวล่าสุด สถานะงาน สถานะอุปกรณ์

ในอดีต Today Widget ปรากฏใน iOS 8 ในฐานะส่วนขยายศูนย์การแจ้งเตือนที่ทำงานผ่านเฟรมเวิร์ก ศูนย์การแจ้งเตือน ด้วย iOS 14 Apple ได้เปิดตัว WidgetKit — สถาปัตยกรรมที่ออกแบบใหม่ทั้งหมดซึ่งอนุญาตให้วางวิดเจ็ตบนหน้าจอหลักได้โดยตรง Today Widget ในความหมายสมัยใหม่คือวิดเจ็ต WidgetKit ที่อยู่ในส่วน “วันนี้” (ส่วนวิดเจ็ตทางซ้ายของหน้าจอแรก)

ทำไมคุณถึงต้องการ Today Widget

เป้าหมายหลักคือลดเวลาในการเข้าถึงข้อมูล แทนที่จะเปิดแอปพลิเคชัน นำทางผ่านเมนูและรอการโหลด ผู้ใช้จะเห็นข้อมูลที่ต้องการทันที ตามข้อมูลจาก Apple (2024) แอปพลิเคชันที่มีวิดเจ็ตแสดงการมีส่วนร่วมของผู้ใช้ที่ สูงขึ้น 27% กรณีการใช้งานเพิ่มเติม: การดำเนินการด่วน (ทำเครื่องหมายงานว่าเสร็จสมบูรณ์) การตรวจสอบ (อัตราการเต้นของหัวใจ กิจกรรม) และสถานะ (การชาร์จแบตเตอรี่ การแจ้งเตือน)

WidgetKit เทียบกับ NCWidgetProviding

นักพัฒนา Today Widget มีสองแนวทาง: WidgetKit สมัยใหม่ (iOS 14+) และส่วนขยายแบบเก่า NCWidgetProviding (iOS 8–13) การเลือกขึ้นอยู่กับเวอร์ชัน iOS ขั้นต่ำที่รองรับ WidgetKit แนะนำสำหรับโปรเจกต์ใหม่ NCWidgetProviding สำหรับรองรับอุปกรณ์เก่า

เมื่อใดควรใช้ WidgetKit

หากแอปพลิเคชันของคุณรองรับ iOS 14 ขึ้นไป — ให้ใช้ WidgetKit มันมีความสามารถมากมาย: หลายขนาด การกำหนดค่าผ่าน intent การออกแบบใหม่กับ iOS 17 และลิงก์ลึก การประกาศของ SwiftUI ทำให้โค้ดวิดเจ็ตกระชับและอ่านง่าย Timeline Provider จัดการตารางการอัปเดตโดยอัตโนมัติโดยคำนึงถึงการใช้พลังงาน

เมื่อใดควรใช้ NCWidgetProviding

เฉพาะเมื่อจำเป็นต้องรองรับ iOS 9–13 NCWidgetProviding ใช้งานได้ง่ายกว่า — เป็น UIViewController ปกติที่มีโพรโทคอล อย่างไรก็ตามมันมีข้อจำกัด: ขนาดเดียว, UIKit เท่านั้น, ไม่มีการกำหนดค่า Apple แนะนำให้เปลี่ยนไปใช้ WidgetKit แม้ในโปรเจกต์เก่าโดยใช้ availability check: WidgetKit บน iOS 14+, NCWidgetProviding เป็นตัวสำรอง

ประเภทของ Today Widget

ใน iOS สมัยใหม่ มีวิดเจ็ตสามประเภทตามวัตถุประสงค์การใช้งาน แต่ละประเภทแก้ปัญหาของตัวเองและต้องการแนวทางที่แตกต่างในการออกแบบข้อมูลและอินเทอร์เฟซ การจำแนกประเภท ช่วยเลือกสถาปัตยกรรมที่เหมาะสมสำหรับแอปพลิเคชันของคุณ

วิดเจ็ตข้อมูล

แสดงข้อมูลคงที่หรืออัปเดตเป็นระยะ: สภาพอากาศ วันที่ อัตราแลกเปลี่ยน สถานะเซิร์ฟเวอร์ ข้อมูลจะอัปเดตตามตารางเวลาผ่าน Timeline Provider ผู้ใช้ไม่ได้โต้ตอบกับวิดเจ็ต — เพียงอ่าน วิดเจ็ตข้อมูล เป็นวิธีที่ง่ายที่สุดในการใช้งาน ไม่ต้องการการจัดการเหตุการณ์สัมผัสและทำงานในพื้นหลังโดยไม่ต้องมีสิทธิ์เพิ่มเติม

วิดเจ็ตแบบโต้ตอบ

ด้วย iOS 17 WidgetKit รองรับปุ่ม สวิตช์ และแถบเลื่อนในวิดเจ็ต ผู้ใช้สามารถดำเนินการ — ทำเครื่องหมายงาน หยุดเพลงชั่วคราว เปิดไฟ — โดยไม่ต้องเปิดแอปพลิเคชัน วิดเจ็ตแบบโต้ตอบ ใช้ App Intents เพื่อส่งการดำเนินการไปยังแอปพลิเคชันหลัก ข้อจำกัด: เฉพาะบนหน้าจอหลัก ไม่ใช่ในส่วน “วันนี้” จนถึง iOS 18

วิดเจ็ตที่กำหนดค่าได้

ผู้ใช้ปรับแต่งข้อมูลที่แสดงผ่านอินเทอร์เฟซระบบ — เลือกเมืองสำหรับสภาพอากาศ บัญชีสำหรับการเงิน หมวดหมู่สำหรับข่าวสาร ดำเนินการผ่าน Intents Extension และการกำหนดค่าใน WidgetBundle วิดเจ็ตที่กำหนดค่าได้เพิ่มความเป็นส่วนตัวและความเกี่ยวข้องของข้อมูลสำหรับผู้ใช้แต่ละคน

การสร้างวิดเจ็ต WidgetKit

มาดูกระบวนการสร้าง Today Widget ใน SwiftUI โดยใช้ WidgetKit วิดเจ็ตจะแสดงอัตราแลกเปลี่ยนปัจจุบันพร้อมการอัปเดตอัตโนมัติ WidgetKit ต้องการสามองค์ประกอบ: โครงสร้างวิดเจ็ต, Provider พร้อมการกำหนดค่า, และ View สำหรับการแสดงผล

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 มีหน้าที่เตรียมข้อมูลสำหรับการแสดงผล เมธอด getTimeline สร้างตารางการอัปเดต: การอัปเดตครั้งต่อไปใน 15 นาที TimelineProvider รับประกันว่าวิดเจ็ตจะแสดงข้อมูลล่าสุดโดยไม่ต้องสอบถามเซิร์ฟเวอร์อย่างต่อเนื่อง

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 และการอัปเดตข้อมูล

Timeline Provider เป็นกลไกหลักของ WidgetKit สำหรับจัดการข้อมูล Today Widget แทนการอัปเดตเป็นระยะด้วยตัวจับเวลา (เหมือนใน NCWidgetProviding แบบเก่า) WidgetKit ใช้แนวคิดของ timeline — ลำดับของรายการที่มีการประทับเวลา ระบบจะแสดงรายการปัจจุบันจนกว่าจะหมดอายุ จากนั้นสลับไปยังรายการถัดไปหรือขอรายการใหม่

นโยบายการอัปเดต

Timeline รองรับสามนโยบาย: .after(date) — การอัปเดตครั้งต่อไปในวันที่กำหนด; .never — วิดเจ็ตจะไม่อัปเดตจนกว่าจะมีการเรียก WidgetCenter.reloadAllTimelines อย่างชัดแจ้ง; .atEnd — อัปเดตหลังจากแสดงรายการสุดท้าย สำหรับ Today Widget ที่มีอัตราแลกเปลี่ยน นโยบาย .after ที่ช่วงเวลา 15–30 นาทีเหมาะสมที่สุด ประสิทธิภาพการใช้พลังงาน เป็นข้อได้เปรียบสำคัญของ WidgetKit: ระบบจะจัดกลุ่มการอัปเดตของวิดเจ็ตทั้งหมดในหน้าต่างเดียว

WidgetCenter: การอัปเดตโดยโปรแกรม

หากข้อมูลเปลี่ยนแปลงก่อนที่ timeline จะหมดอายุ (เช่น ผู้ใช้อัปเดตอัตราในแอปพลิเคชัน) ให้เรียก WidgetCenter.shared.reloadTimelines(ofKind: “CurrencyWidget”) การดำเนินการนี้จะขอ timeline ใหม่จาก Provider และอัปเดตการแสดงผล WidgetCenter ยังอนุญาตให้โหลดวิดเจ็ตทั้งหมดของแอปพลิเคชันซ้ำด้วยคำสั่งเดียว — สะดวกหลังจากการซิงโครไนซ์ข้อมูล

แนวทางการออกแบบวิดเจ็ต

Apple กำหนดข้อกำหนดที่เข้มงวดสำหรับการออกแบบ Today Widget: เนื้อหาต้องอ่านได้ในพริบตา โดยไม่มีองค์ประกอบที่ไม่จำเป็นและมีลำดับชั้นที่ชัดเจน การละเมิดคำแนะนำ HIG (Human Interface Guidelines) เป็นเหตุผลในการปฏิเสธเมื่อเผยแพร่บน App Store สามหลักการ: การมองเห็นได้ในพริบตา ความสอดคล้อง และลำดับชั้น

การมองเห็นได้ในพริบตา — อ่านได้ในครั้งเดียว

ผู้ใช้ใช้เวลาน้อยกว่าหนึ่งวินาทีกับวิดเจ็ต อย่าเพิ่มองค์ประกอบข้อมูลมากกว่า 3–4 รายการ แบบอักษร — ขั้นต่ำ 11pt สำหรับป้ายกำกับ 17pt สำหรับค่า ใช้ตัวหนา (Semibold) สำหรับตัวเลขสำคัญ หลีกเลี่ยงการเลื่อน — Today Widget ไม่เลื่อน

การปรับตามขนาด

WidgetKit รองรับสามขนาด: เล็ก (170×170pt), กลาง (364×170pt), ใหญ่ (364×382pt) สำหรับ Today Widget ในส่วน “วันนี้” ขนาดกลางเป็นตัวเลือกที่พบบ่อยที่สุด การออกแบบแบบปรับได้ ผ่าน EnvironmentValues: เปลี่ยนความหนาแน่นของข้อมูลตามขนาด เล็ก — ตัวเลขเดียว กลาง — ตัวเลข + แผนภูมิ ใหญ่ — ตาราง

การรองรับโหมดมืดและ Dynamic Type

วิดเจ็ตควรแสดงอย่างถูกต้องในธีมสว่างและมืดโดยไม่ต้องดำเนินการเพิ่มเติมจากนักพัฒนา — WidgetKit จะรับสีของระบบโดยอัตโนมัติ Dynamic Type สำหรับวิดเจ็ตมีข้อจำกัด: ขนาดแบบอักษรคงที่ แต่ต้องอ่านได้ UIColor.label และ UIColor.systemBackground เป็นสีพื้นฐานสำหรับข้อความและพื้นหลังในทั้งสองธีม