In SwiftUI on Apple Watch, what is the best way to update a String that describes the interval since a Date with Always On State? - swiftui

Question

I'm building an Apple Watch app that uses SwiftUI.
New data periodically comes into the app from an outside source, and I keep track of when that last happened with a #Published Date (called lastUpdatedDate) inside an ObservableObject (store).
In the app, I want to use a SwiftUI Text struct to indicate to the user how long ago the data was updated.
I'm weighing different options, and I'm wondering what the best practice would be for something like this.
Solution #1 - Text.DateStyle
A very simple method I tried was using Text.DateStyle.relative:
Text(store.lastUpdatedDate, style: .relative)
This worked the way I wanted to some degree, because it kept the text up-to-date with the relative interval since the date had happened, but the text is not customizable. I do not want it to show the number of seconds, just minutes or hours.
Solution #2 - Computed Property
Inside the View where I want to display the Text, I have access to the ObservableObject, and added a computed property that uses a function that converts the Date to a String for the relative date (for example, 5 minutes ago) using an extension on Date with a RelativeDateTimeFormatter
Computed property:
private var lastUpdatedText: String {
store.lastUpdatedDate.timeAgoDisplay()
}
Date extension:
extension Date {
func timeAgoDisplay() -> String {
let formatter = RelativeDateTimeFormatter()
formatter.unitsStyle = .full
return formatter.localizedString(for: self, relativeTo: Date())
}
}
This seems like the best solution I've found so far, because it automatically updates every time the app is opened. The downside, however, is that it only seems to update when the app comes to the foreground (when another app or the Clock Face was previously active). This is probably fine, but it could be better on Series 5, Series 6, and Series 7, which have alway-on displays. On watchOS 8, with the Always On State, this text remains on the screen when the wrist is dropped, and when the wrist is raised again. The text can become outdated, because these events do not cause the lastUpdatedText computed property to be updated again.
Update: This is actually not a very good solution. Through more testing, I found out that it is a fluke that it was updating every time the app opened. It was only re-computing the property on app open because other items in the view were getting refreshed, and on its own it would not have actually re-computed every time the app was opened.
Other Possible Solutions
I've considered adding a second #Published variable in the ObservableObject that's a String containing the relative time interval. The downside of this is I would have to manually initialize and update that variable. If I do that, I could manually update the text based on lifecycle functions in ExtensionDelegate, like applicationWillEnterForeground(), but that only handles when the app first comes to the foreground (which is the same update frequency as the computed property). I haven't found any way to detect when the wrist is dropped or raised again, so it seems the only way I could keep it up to date is to set up one or more published Timers, and update the #Published String every minute, disabling and setting up the timer(s) every time the app goes into the background and returns to the foreground. Does that seem like a good solution? Is there a better solution I'm overlooking?
Solution
Based on the accepted answer, I was able to use a TimelineView to update periodically.
Even though I am only using minute granularity for the text that's displayed, I wanted the text to update to the second when the data was actually refreshed. To accomplish that part, I started by adding a new extension for Date:
extension Date {
func withSameSeconds(asDate date: Date) -> Date? {
let calendar = Calendar.current
var components = calendar.dateComponents([.era, .year, .month, .day, .hour, .minute, .second], from: self)
let secondsDateComponents = calendar.dateComponents([.era, .year, .month, .day, .hour, .minute, .second], from: date)
components.second = secondsDateComponents.second
return calendar.date(from: components)
}
}
Then, I created my view used the TimelineView to update the text every minute after the data is refreshed:
struct LastUpdatedTextView: View {
#ObservedObject var store: DataStore
var body: some View {
if let nowWithSameSeconds = Date().withSameSeconds(asDate: store.lastUpdatedDate) {
TimelineView(PeriodicTimelineSchedule(from: nowWithSameSeconds,
by: 60))
{ context in
Text(store.lastUpdatedText(forDate: lastUpdatedDate))
}
} else {
EmptyView()
}
}
}

Answer 1

Apple addresses this in Build A Workout App from WWDC21
They use TimelineView and context.cadence == .live to tell their formatter to not show milliseconds when the watch is in Alway on.
You could use that code to determine what to show.
struct TimerView: View {
var date: Date
var showSubseconds: Bool
var fontWeight: Font.Weight = .bold
var body: some View {
if #available(watchOSApplicationExtension 8.0, watchOS 8.0, iOS 15.0, *) {
//The code from here is mostly from https://developer.apple.com/wwdc21/10009
TimelineView(MetricsTimelineSchedule(from: date)) { context in
ElapsedTimeView(elapsedTime: -date.timeIntervalSinceNow, showSubseconds: context.cadence == .live)
}
} else {
Text(date,style: .timer)
.fontWeight(fontWeight)
.clipped()
}
}
}
#available(watchOSApplicationExtension 8.0, watchOS 8.0, iOS 15.0,*)
private struct MetricsTimelineSchedule: TimelineSchedule {
var startDate: Date
init(from startDate: Date) {
self.startDate = startDate
}
func entries(from startDate: Date, mode: TimelineScheduleMode) -> PeriodicTimelineSchedule.Entries {
PeriodicTimelineSchedule(from: self.startDate, by: (mode == .lowFrequency ? 1.0 : 1.0 / 30.0))
.entries(from: startDate, mode: mode)
}
}
struct ElapsedTimeView: View {
var elapsedTime: TimeInterval = 0
var showSubseconds: Bool = false
var fontWeight: Font.Weight = .bold
#State private var timeFormatter = ElapsedTimeFormatter(showSubseconds: false)
var body: some View {
Text(NSNumber(value: elapsedTime), formatter: timeFormatter)
.fontWeight(fontWeight)
.onChange(of: showSubseconds) {
timeFormatter.showSubseconds = $0
}
.onAppear(perform: {
timeFormatter = ElapsedTimeFormatter(showSubseconds: showSubseconds)
})
}
}