How to Build an iOS 14 Widget for Hema Town: From Auth to UI

Widget Overview

iOS 14 introduces Widget, allowing key information such as schedule, to‑do, battery status to be displayed on the home screen. Widgets are lightweight, static, and meant for information display rather than deep app navigation.

Design Positioning

Widgets are intended for high‑frequency, important data (e.g., stock, weather) and should not be used as shortcuts; complex interactions are not supported.

Restrictions

No animation, only static pages.

Update frequency is managed by the system via machine learning.

No drag, scroll, or complex controls such as Switch.

Tapping a widget always opens the host app.

Widget Development Practice – Hema Town Example

The Hema Town mini‑game provides a natural use case for a widget that shows flower (reward) status. Development steps include:

Upgrade to Xcode 12 and add a Widget Extension.

Implement data loading and UI rendering.

Login and Authorization

Because the company’s login SDK does not support extensions, a token is obtained in the main app via MTOP, stored in an app group, and the widget accesses data through HTTPS with that token.

var token: String? {
    let bundleIdentifier = Bundle.main.bundleIdentifier!
    let defaults = UserDefaults(suiteName: "group." + bundleIdentifier)
    return defaults?.object(forKey: "widget.town.homeinfo.token") as? String
}

Token synchronization occurs on app launch, entering Hema Town, user login, and logout.

Data Updating

Widgets use a timeline of entries. Update policies such as atEnd, never, and after can be suggested, though the system ultimately decides.

For predictable data (e.g., weather) use multiple entries with atEnd.

For unpredictable data (e.g., stock) use after with a fixed interval.

In the Hema Town case, a single entry with after updates every 20 minutes, and getSnapshot returns real data for accurate preview.

UI Rendering

Widgets must be built with SwiftUI, which offers declarative syntax similar to Flutter and supports live previews.

Bundle Splitting

A separate Swift framework holds widget logic, while the host app contains the Widget Extension that references the framework, reducing changes to the shell project.

@main
struct HMTownWidget: Widget {
    let kind = "HMTownWidget"
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HMTownWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("盒马小镇")
        .description("快速查看盒花动态，访问盒马小镇收盒花")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Swift Bridge

Because the main app is Objective‑C, a Swift framework bridges WidgetCenter APIs to trigger updates after a flower is collected.

Analytics

Widget exposure cannot be measured directly; instead, click events carry tracking parameters in the URL that the host app parses.

App Review

The initial submission was rejected due to an invalid font from a Flutter dependency; removing the font resolved the issue.

Swift Side Effects

Supporting iOS 9 requires embedding Swift standard libraries for devices below iOS 12.2, increasing binary size by about 3 MB.

Conclusion

The new version (4.54.1) is released, but some issues remain, such as redundant navigation when opening the app from the widget and limited information on medium‑size widgets. Ongoing optimization aims to generate business growth.