Widgets Code-along, part 3: Advancing timelines

ハイライト

ウィジェット コードの 3 番目のエピソードでは、SwiftUI を使用してウィジェット拡張機能内で URLSession を処理する方法を示します。 Link アプリのコンテンツにジャンプするには、 WidgetBundle 複数のウィジェットを公開し、Intent Extension を介して構成のための動的なオプションを提供します。

主要内容

エピソード 3 は、基本的なタイムラインがすでにあるプロジェクトの続きです。新しいリーダーボード ウィジェットには、健康状態によって並べ替えられた役割が表示されます。問題が発生します。ウィジェットはデータをフェッチする必要があり、各行はアプリ内のキャラクターの詳細にジャンプする必要があり、元の Ranger Detail ウィジェットと一緒にウィジェット ギャラリーに表示する必要もあります。

これらの要件は、ウィジェット拡張の境界で固定されています。ネットワーク リクエストがホスト アプリによって引き継がれると想定することはできません。クリック可能な領域はウィジェットの SwiftUI ビュー内に収まる必要があります。一つしかありえません @main 同じ拡張子内で。アプリに書き込みメソッドを直接インポートすると、開発者はすぐにこれらの境界に遭遇することになります。

Apple は、このコードに沿って境界を 1 つずつ細分化します。タイムライン プロバイダーは完了ハンドラーを使用して非同期リクエストをサポートします。ウィジェット自体は、バックグラウンド セッションを含む、ウィジェットが作成する URLSession に応答します。 SwiftUI Link ウィジェット コンテンツの行をディープ リンク エントリに変換できます。 WidgetBundle 複数のウィジェットを同じ拡張機能に配置する責任があります。 Intent Extension は、元のハードコーディングされた構成リストを動的なオプションに置き換えます。

最終的には、実際のアプリに近いウィジェットが作成されます。データをフェッチし、指定されたコンテンツにジャンプし、拡張機能に複数のエントリを提供し、構成リストがリモート データの変更に従うことができるようにします。

詳細

1. ウィジェット拡張機能でデータを取得する

(01:28) Leaderboard ウィジェットのデータは、 loadLeaderboardData 非同期リクエスト CharacterDetail。トランスクリプトには、タイムライン プロバイダー API が完了ハンドラーを使用して、ネットワーク フェッチなどの非同期タスクに簡単にアクセスできるようにすることが明確に記載されています。

このセッションには公開されている「コード」タブ スニペットはありません。トランスクリプトに表示される呼び出しフォームのみが以下に保持され、ビジネスの実装は完了していません。

CharacterDetail.loadLeaderboardData
URLSession
data task

キーポイント:

• loadLeaderboardData リーダーボード データの非同期エントリです。
• タイムライン プロバイダーは、完了ハンドラーに依存して、非同期タスクが完了するのを待ちます。
• セッションは通常のインプロセス URL セッションで示されます。
• このリクエストはローカル ファイルを使用してリモート フェッチをシミュレートします。実際のプロジェクトでは、通常、リモート Web サービスが呼び出されます。

(02:20) バックグラウンド セッションにはウィジェットに特別な点があります。つまり、完了時に拡張機能のホスティング アプリは起動しません。ウィジェットは、バックグラウンド セッションを含む、ウィジェット自体が作成したすべての URLSession に応答します。

onBackgroundURLSessionEvents
sessionIdentifier
completion block

キーポイント:

• onBackgroundURLSessionEvents はウィジェット設定の修飾子です。
• アプリにおける一般的なアプリケーションデリゲートコールバック責任に対応します。
• システムが提供するのは、 sessionIdentifier そして完了ブロック。
• トランスクリプトでは、管理方法がアプリ内と同じであることのみが説明されており、特定のキューや永続化戦略については詳しく説明されていません。

2. SwiftUI Link を使用してウィジェット内にジャンプします

(03:20) リーダーボードの各行は、 HStack で AllCharactersView。目標は、キャラクターをクリックすると、そのキャラクターの情報ページが直接開くことです。

Link(destination: character.url) {
    HStack {
        ...
    }
}

キーポイント:

• Link は、セッションで指定された新しい SwiftUI API です。
• destination ロール独自の URL を使用します。
• オリジナル HStack この行の内容はまだ保持されています。
• ウィジェットの行をクリックすると、システムはその行を強調表示し、対応するキャラクターの詳細を開きます。

3. WidgetBundle を使用して複数のウィジェットを公開する

(04:36) プロジェクトにはリーダーボード ウィジェットとレンジャー詳細ウィジェットがありますが、存在できるのは 1 つだけです @main プロセス中です。解決策は移動することです @main 単一のウィジェットからバンドルまで。

@main -> WidgetBundle
WidgetBundle -> Leaderboard widget
WidgetBundle -> Ranger Detail widget

キーポイント:

• WidgetBundle 同じ拡張子で複数のウィジェットを宣言するために使用されます。
• @main 2 つのウィジェットに別々に配置されるのではなく、バンドルに配置されます。
• セッションでのデモンストレーションの結果、Leaderboard ウィジェットと Ranger Detail ウィジェットの両方がウィジェット ギャラリーに表示されます。
• この構造は、複数の情報入口を提供するアプリに適しています。

4. インテント拡張を使用して動的構成オプションを提供する

(05:31) 前のエピソードにはすでに構成可能なウィジェットがありましたが、オプションのリストはハードコーディングされていました。 3 番目のエピソードでは、SiriKit インテントのパラメータのタイプがカスタム タイプに変更され、動的リストが Intent Extension によって提供されます。

IntentHandler
identifier
displayString
CharacterDetail.remoteCharacters
Intent identifier -> characterFromName

キーポイント:

• カスタム インテント タイプには 2 つの属性があります。 identifier そして displayString デフォルトでは。
• これらの値は以下から来ています IntentHandler。 ・オプション提供処理もタイムライン方式と同様に非同期で呼び出されます。
• 追加 CharacterDetail.remoteCharacters セッション内のオプション リストに追加して、ネットワークからさらに多くの文字を取得することをシミュレートします。
• ウィジェットはユーザーの選択を読み取るときに、インテント識別子を使用して対応するロールを取得します。

(08:01) 構成インターフェイスが最終的に表示され、元のオプション Power Panda、Egghead、Spouty とリモート オプション Mr Spook、Cake、Octo が表示されます。ユーザーが Mr. Spook を選択すると、ホーム画面のウィジェットにそのキャラクターが表示されます。

重要ポイント

1. リモートランキングウィジェットを作成する

• 何をすべきか: サーバーのリーダーボードをホーム画面に表示し、最新のスコアまたはステータスで並べ替えます。
• 実行する価値がある理由: セッションは、Leaderboard ウィジェットが非同期リクエストを通じてロール リストを取得することを明確に示しています。
• 開始方法: まず、タイムライン プロバイダーを既存のフェッチ メソッドに接続します。リクエストがバックグラウンドで完了する可能性がある場合は、接続します onBackgroundURLSessionEvents ウィジェットの設定について。

2. クリック可能なリスト ウィジェットを作成する

• 手順: ウィジェットの各行で、アプリ内の対応する詳細ページが開かれるようにします。
• 実行する価値がある理由: セッションではラッピングをデモンストレーションします HStack SwiftUIに Link そして宛先がロール URL を指すようにします。
• 開始方法: 次を使用して、リスト内の各エンティティの URL を準備します。 Link(destination:) ウィジェット行の外側。

3. 1 つの拡張機能を使用して複数のウィジェットを提供する

• 内容: 概要ウィジェットと詳細ウィジェットの両方を提供します。
• 実行する価値がある理由: このセッションでは、Leaderboard ウィジェットと Ranger Detail ウィジェットが同時にウィジェット ギャラリーに入ることが示されています。 WidgetBundle。
• 開始方法: 移動 @main に WidgetBundle バンドル本体に複数のウィジェットをリストします。

4. サーバー側主導のウィジェットを構成する

• 内容: ユーザーがウィジェットを構成するときに、最新のプロジェクト、デバイス、ロール、またはフォローしている人々を表示できるようにします。
• 実行する価値がある理由: セッションは、インテント拡張を通じてハードコーディングされたリストを動的オプションに拡張します。
• 開始方法: インテントパラメータをカスタムタイプに変更し、オプションを返します identifier そして displayString で IntentHandler、ウィジェット内の識別子を介してエンティティを取得します。

関連セッション

• ウィジェット コードと一緒に、パート 1: 冒険が始まります — ウィジェット プロジェクト、プロバイダー、および基本的なタイムラインを作成することから始めます。
• ウィジェット コードアロング、パート 2: 代替タイムライン — タイムライン、システム インテリジェンス、複数のウィジェット ファミリと構成について引き続き説明します。
• ウィジェット用の SwiftUI ビューの構築 — SwiftUI を使用してウィジェットに適した一目でわかるビューを構築する方法について説明します。
• ウィジェットに構成とインテリジェンスを追加 — 構成可能なウィジェット、Siri の提案、スマート スタックに関連する機能を詳しく説明します。
• 優れたウィジェットをデザインする — コンテンツ、色、サイズ、レイアウト、タイポグラフィーの観点から見た完全なウィジェット デザイン原則。