WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Configure and link your App Clips

Configure and link your App Clips

WWDC 2020App ClipsUniversal LinksSafariApp Store Connect
元の動画を見る

ハイライト

App Clip は登録された URL を通じて起動されます。開発者はそれを apple-app-site-association ファイルに追加する必要がありますappclipsApp Clipターゲットの関連付けと追加appclips:関連付けられたドメインであり、SwiftUI または UIKit で処理されますNSUserActivityTypeBrowsingWebユーザーを対応するタスクに誘導します。

主要内容

男がスムージー スタンドの前に立って、飲み物を注文しようとしています。彼女が NFC タグをタップすると、App Clip カードが画面の下部に表示されました。 「開く」をクリックした後、注文ページに直接移動し、最終的に Apple Pay で購入を完了しました。完全なアプリをインストールするために待つ必要も、ホームページからメニューを検索する必要もありません。トリガーポイントには URL がエンコードされています。システムはこの URL を使用して登録された App Clip エクスペリエンスを検索し、その URL をNSUserActivityApp Clipにお任せください。 (00:49)

このセッションではリンクリンクを扱います。 App Clip ターゲットだけでは十分ではありません。 Web サイト、App Clip、App Store Connect、Safari ページはすべて、同じ URL システムに合わせる必要があります。 Web サイトは、apple-app-site-association ファイルを使用して、どの App Clip がドメイン名を処理できるかを宣言します。 App Clip ターゲットは、関連付けられたドメイン資格を使用して受け入れるappclips:ドメイン;コードの読み取りNSUserActivityTypeBrowsingWebアプリ内の URL。 App Store Connect はユーザーに表示されるカードを決定します。スマート アプリ バナーは、Safari ページを同じエクスペリエンスに接続します。 (03:38)

URL の設計が成功の鍵となります。 App Store Connect の高度な App Clip エクスペリエンスは、最も具体的なプレフィックス マッチングを使用するため、レンタカー ストアはサインアップするだけで済みます。https://bikesrental.example/rent、異なるクエリ文字列を持つ車両リンクが同じカードに含まれるようにします。チェーンのコーヒー ショップは、一般的な店舗のプレフィックスを登録してから、クパチーノの旗艦店のより具体的な URL を個別に登録することもできます。 (11:20)

詳細

Web サイトと App Clip の間の関連付けを確立する

(05:04) App Clip Web サイト URL のコンテンツをレンダリングするには、システムはまず Web サイトと App Clip の間の関係を検証する必要があります。メソッドはサーバーのルートディレクトリにあります.well-knownapple-app-site-association ファイルをディレクトリに配置し、ルート辞書に追加します。appclipsエントリ。

{
    "appclips": {
        "apps": [ "ABCDE12345.example.fruta.Clip" ]
    }
}

キーポイント:

  • appclipsは、apple-app-site-association ルート辞書の新しいエントリであり、次と組み合わせることができます。webcredentials、applinks既存のエントリが共存するまで待ちます。 -appsこの例では、配列には App Clip アプリ識別子が含まれていますABCDE12345.example.fruta.Clipチーム ID と App Clip バンドル識別子を表します。
  • Xcode 側では、関連ドメイン機能を App Clip ターゲットに追加し、appclips:your-website-domain。

SwiftUI アプリのライフサイクルで起動 URL を処理する

(06:17) 関連するドメインを構成した後、App Clip はシステムから渡された Web 閲覧アクティビティを読み取る必要があります。 SwiftUI アプリのライフサイクルは直接実行できます。WindowGroupルートビューにぶら下がっていますonContinueUserActivity。

import SwiftUI

@main
struct AppClip: App {
    var body: some Scene {
        WindowGroup {
           ContentView()
              .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { userActivity in
                  guard let incomingURL = userActivity.webpageURL,
                        let components = NSURLComponents(url: incomingURL,
                            resolvingAgainstBaseURL: true)
                  else {
                      return
                  }

                  // Direct to the linked content in your app clip.
              }
        }
    }
}

キーポイント:

  • NSUserActivityTypeBrowsingWebこれを Web ページ URL からの起動のみを処理するように制限します。 -userActivity.webpageURLこれは、App Clip をトリガーする完全な URL です。実際のビジネスでは、通常、パスまたはクエリ文字列からタスク パラメーターを取得します。 -NSURLComponentsコードが URL を解析できるようにします (デモで URL を読み取るなど)。smoothie=BerryBlue次に、データ ソースを対応するドリンクに切り替えます。
  • ユーザーがフル アプリにアップグレードすると、同じリンクでフル アプリが開かれるため、フル アプリにも対応するユニバーサル リンク処理ロジックが必要です。

UIKit シーンのライフサイクルで同じことを処理します

(06:54) App Clip が UIKit シーンベースのライフサイクルを使用する場合、入り口は次のとおりです。UISceneDelegate。ロジックは SwiftUI と同じです。アクティビティの種類を確認し、URL を取得して、ユーザーをリンク コンテンツに誘導します。

// Handle NSUserActivity in UISceneDelegate.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    func scene(_ scene: UIScene, continue userActivity: NSUserActivity)
    {
        // Get URL components from the incoming user activity
        guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
            let incomingURL = userActivity.webpageURL,
            let components = NSURLComponents(url: incomingURL,
                resolvingAgainstBaseURL: true)
        else {
            return
        }

        // Direct to the linked content in your app clip.
    }

}

キーポイント:

  • scene(_:continue:)シーンベースのアプリ受信ですかNSUserActivity入り口。 -activityTypeチェックすると、Web ページによって開始されないアクティビティをブロックできます。 -incomingURL解析が成功したら、ホームページに止まらず、URL に対応するメニュー、予約、レンタル、または支払いのページを直接開く必要があります。

デフォルトおよび高度な App Clip エクスペリエンスを構成する

(08:32) App と App Clip を含むビルドを送信すると、App Store Connect に App Clip 構成領域が表示されます。デフォルトのエクスペリエンスでは、カード画像、字幕、アクション動詞が使用されます。 Safari スマート アプリ バナー、メッセージ リンク バブル、およびデフォルトのアプリ クリップ カードはすべて、このメタデータのセットを使用します。

(09:17) App Clip を NFC、QR コード、マップ、Siri の近くの候補などから起動する場合は、高度な App Clip エクスペリエンスを設定する必要があります。それぞれの高度なエクスペリエンスは URL にバインドされており、独立した画像、タイトル、字幕、動作動詞を設定したり、物理的な場所を関連付けたりできます。

(11:20) URL マッチングでは、最も具体的なプレフィックス マッチングが使用されます。短いプレフィックスを登録すると、多数の同様のリンクをカバーでき、より具体的な URL を登録すると、特別な店舗や特別なタスクのカードを変更できます。登録 URL がプレフィックスとしてのみ使用されている場合でも、App Clip は登録 URL とまったく同じ起動を処理できなければなりません。これは、近くにあるマップや Siri の提案がこの URL で直接開かれる可能性があるためです。

Safari ページで App Clip を開かせる

(14:35) Safari スマート アプリ バナーは、HTML メタ タグを介して App Clip にアクセスします。ウェブページは残りますapp-id、App Clip バンドル識別子を追加します。このようにして、iOS 14 では App Clip エントリを表示でき、古いシステムでも完全な App の App Store リンクにフォールバックできます。

<meta name="apple-itunes-app"
    content="app-clip-bundle-id=com.example.fruta.Clip,
    app-id=123456789">

キーポイント:

  • name="apple-itunes-app"スマートアプリバナーのメタタグ名を継承します。 -app-clip-bundle-idApp Clipのバンドル識別子へのポインタ。 -app-id引き続き完全なアプリを指し、古いシステムを提供し、アプリのダウンロード シナリオを完了します。
  • Safari は、バナーを表示する前に、Web サイトと App Clip のドメインの関連付けを検証します。

Xcode と TestFlight を使用して実際のエントリ ポイントをカバーする

(07:16) 開発段階はXcodeスキームの環境変数で設定できます_XCAppClipURL。 App Clip を実行するとき、システムはこのテスト URL を渡し、URL 解決とページ ジャンプの検証を容易にします。

(21:19) App Store Connectに送信した後、TestFlightのApp Clip領域にテスト呼び出しポイントを追加できます。テスターは実際の NFC タグや QR コードを必要とせず、設定されたタイトルと URL に応じてさまざまなエクスペリエンスを開くことができます。

重要ポイント

QR コードをスキャンしてストアで注文します App Clip

  • やるべきこと: レストラン、コーヒーショップ、飲料屋台用のテーブルタグ QR コードまたは NFC タグを生成し、それを開いて現在の店舗の注文ページに直接入力します。
  • 実行する価値がある理由: セッションの Fruta デモは、URL が特定のタスク パラメーターを運ぶことができ、App Clip がそれを読み取った後、対応する製品またはストアを直接選択できることを証明しています。
  • 開始方法: ストア URL プレフィックスを登録し、App Store Connect で高度なエクスペリエンスを構成し、SwiftUI で構成しますonContinueUserActivityクエリ項目を解析し、現在のメニュー状態を設定します。

備品レンタル入口

  • 手順: 自転車、モバイルバッテリー、ロッカー、その他の機器に固有の URL を添付し、コードをスキャンして、対応する機器のレンタルまたはロック解除のページにアクセスします。
  • 実行する価値がある理由: プレフィックス マッチでは、リース プレフィックスのみを登録できるため、クエリ文字列を通じてさまざまなデバイス ID を区別できるため、各デバイスのエクスペリエンスを登録するメンテナンス コストが不要になります。
  • 開始方法: URL クエリ文字列にデバイス ID を入力し、App Clip で使用しますNSURLComponentsパラメータを解析すると、バックエンドはデバイス ID ごとにステータスと実行可能なアクションを返します。

チェーン店向けのレイヤードカード

  • 対処方法: ほとんどのストアは同じ App Clip カードを使用し、旗艦店やイベント ストアはカスタマイズされた画像と字幕を使用します。
  • 実行する価値がある理由: 高度なエクスペリエンスでは、最も具体的なプレフィックス マッチが使用されるため、ユニバーサル プレフィックスと特別な URL を共存できます。
  • 開始方法: まずは登録してくださいhttps://brand.example/store/この種の一般的なプレフィックスは、キー ストアのより具体的な URL を登録し、App Store Connect でさまざまなメタデータを構成するために使用されます。

Web サイトのページから App Clip にアクセス

  • 内容: 予約、簡単な購入、注文の順番待ちなど、App Clip でより迅速に完了できる Web ページに Safari スマート アプリ バナーを表示します。
  • 価値がある理由: スマート アプリ バナーは、アプリ全体の整合性を維持しながら、Web ページへのアクセスを App Clip に変換して開くことができます。app-id後退する。
  • 開始方法: ウェブ上で参加しますapple-itunes-appメタタグ、記入してくださいapp-clip-bundle-idそしてフルアプリapp-idをクリックし、AASA ファイルと関連ドメインが展開されていることを確認します。

TestFlight エクスペリエンス マトリックス

  • やるべきこと: オンラインにする前に、デフォルトのエクスペリエンス、NFC/QR エクスペリエンス、特別なストア エクスペリエンス、Safari バナー エクスペリエンスをカバーする、各タイプの入り口のテスト コール ポイントを確立します。
  • 実行する価値がある理由: セッションでは、TestFlight が App Clip 呼び出しポイントを追加でき、テスターはさまざまな URL に対応する App Clip カードとジャンプを検証できると述べました。
  • 開始方法: 各キー URL を TestFlight の App Clip テスト入口に書き込み、テスターに​​カードのメタデータ、開始結果、およびランディング ページ パラメーターを記録するよう要求します。

関連セッション

  • App Clip を探索する — まず、App Clip の位置付け、トリガー エントリ、および完全なアプリ全体との関係を理解し​​ます。
  • App Clip を合理化する — App Clip のタスク フォーカス、トランザクション フロー、通知、位置確認、アップグレード パスの最適化を継続します。
  • 優れた App Clip をデザインする — App Clip のカード、プロセス、アプリ全体をダウンロードするためのヒントをデザインします。
  • App Store Connect の新機能 — App Store Connect での App Clip エクスペリエンスと TestFlight テストの構成について説明します。
  • ユニバーサル リンクの新機能 - ユニバーサル リンク、関連ドメイン、および AASA ファイルのリンク ベースを完成させます。

コメント

GitHub Issues · utterances