Apple App Clip(蘋果「輕應用」)詳解

百瓶技術發表於2022-01-04

公眾號名片
作者名片

前言

App Clip (Apple 官方稱之為「輕應用」)是你已有 App 的一個輕量級版本,它擁有你 App 的部分功能,可以把它看做已有 App 的 lite 版本。

App Clip 體積非常小,壓縮前包體積最大不超過 10 M,且無需經 App Store 下載,因此它能保證及時性,顯示 App Clip 卡片的同時它幾乎就已經安裝在了裝置上,響應迅速,如果你迫切希望使用者訪問某些功能也許 App Clip 能滿足你的需求。

本文涉及到的名詞含義約定如下:

App:App 指具有完整功能的應用程式,即上架 App Store 的那個應用程式。

App Clip:指本文要研究的輕應用。

閱讀本文你將學到

  1. 什麼是 App Clip?
  2. App Clip 能做什麼?
  3. App Clip 不能做什麼?
  4. 如何讓使用者發現你的 App Clip?
  5. 如何開發一個 App Clip?

可前往 GitHub 獲取本文配套 Demo(https://github.com/yaoming88/...)

什麼是 APP Clip?

App Clip 要注意的點很多,為了完整準確表述,同時避免掛出太多官方文件使讀者精力分散,筆者翻譯了部分官方文件,如你已經瞭解可跳過「什麼是 APP Clip?」部分直接看編碼部分。

App Clip 是使用者快速訪問和體驗 App 功能的絕佳方式。App Clip 是 App 功能的一小部分,可以在需要時隨取隨用。App Clip 採用輕量級檔案,執行速度快,方便使用者快速地開啟使用。不論是從餐廳叫外賣、租輛車還是首次設定新的聯網電器,使用者在幾秒之間就能開始並完成對你 App 的體驗。在他們體驗過後,你可以提供從 App Store 下載完整 App 的機會。

App 的一部分

App Clip 是 App 的一小部分,因此你可以使用 iOS SDK,在與完整 App 相同的 Xcode 專案中進行開發。另外,由於 App Clip 很小,即便尚未安裝到裝置上,也能快速開啟。準備好提交稽核時,你可以將它作為完整 App 的一部分在 App Store Connect 中進行管理。

下載完整 App

App Clip 提供了快速展示 App 價值的機會。要讓使用者更輕鬆地獲取完整 App,你可以適時在 App Clip 中顯示下載選項。你甚至還能保留使用者提供的任何資訊,並且無縫轉移到完整 App 中。

精簡設計

App Clip 專注於快速完成一項任務。在理想的 App Clip 體驗中,使用者可以在幾秒之間開始和完成某項任務。你可以通過以下方式進一步精簡體驗:

支援 Apple Pay

不要求使用者提供信用卡資訊,而選擇通過 Apple Pay 完成收款。

與「通過 Apple 登入」配合使用

為了更加便捷地提供個性化體驗,App Clip 可以使用「通過 Apple 登入」來登入你的 App 服務,不要求使用者填寫表單或設定新帳戶。

在需要時隨取隨用

App Clip 體驗的一個關鍵部分是發現途徑:

App Clip 碼

使用者發現 App Clip 的最佳方式。App Clip 碼外形美觀而獨特,使用者一看見就知道有 App Clip 等著他們探索。每個 App Clip 碼均編入一個 URL,還能加入 NFC 標籤,使用者可以用手機靠近讀取,或是用攝像頭掃描。

NFC 標籤

使用者只需將 iPhone 靠近你放置在特定位置的 NFC 標籤,即使是在鎖屏狀態,也可啟動 App Clip。

二維碼

將二維碼放置在特定的位置,讓使用者使用條形碼讀取器或「相機」App 掃描這個碼來啟動 App Clip。

Safari 瀏覽器 App 橫幅廣告

如果你的網頁配置了適用於 App Clip 的智慧 App 橫幅廣告,使用者只需輕點該橫幅,就能開啟 App Clip。

「資訊」中的連結

如果你在 App Clip 中啟用了共享功能,使用者可以通過 iMessage 資訊傳送連結,收到連結的人可以直接從「資訊」中開啟它。

「地圖」中的地點資訊卡

如果你的 App Clip 關聯了特定的位置,你可以在「地圖」的對應地點資訊卡為其登記,以便使用者能在相應位置看到並開啟 App Clip。

最近使用的 App Clip

App Clip 不會雜亂地顯示在主螢幕上,但使用者可以在全新 App 資源庫的「最近新增」類別中找到並啟動 App Clip。

8 小時通知

App Clip 可以採用一種新的通知型別,在使用者啟動你的 App Clip 後 8 小時內面向使用者顯示。使用者輕點一個通知,即可直接返回到你的 App Clip。

位置驗證

Apple 推出了專門配合 App Clip 使用的位置驗證 API,幫助你確認使用者掃描的 App Clip 碼、NFC 標籤或二維碼的實際位置與顯示的位置是否相符,你只需驗證一次即可。

多種 App Clip 體驗

一些 App 提供多種體驗,你可以對 App Clip 進行配置,以特別的方式支援每一種體驗。例如,一個餐廳 App 可以支援多家餐廳。App Clip 支援通過單個 App Clip 為每家餐廳打造獨特的體驗。

完整 App 體驗

如果使用者已在裝置上安裝你的 App,App Clip 碼和 App Clip 連結會開啟這個 App,而非對應的 App Clip。你的 App 應處理這個連結,為使用者提供與 App Clip 同樣的體驗。

App Clip 的限制

App Clip 是 App 的輕量級版本,在需要時隨時隨地提供其部分功能。它提供了一個重點突出的功能集,旨在立即啟動,保護使用者隱私並保護資源。因此,App Clip 有一些限制。在建立 App Clip 之前,請先檢視 App Clip 可用的技術(https://developer.apple.com/d...)。

確保你要使用的框架能在 App Clip 上正常工作

App Clip 使用 SwiftUI 和 UIKit 開發,並可以訪問與你的完整應用程式相同的框架。然而,以下框架在執行時提供的功能有限或無法提供功能:Assets LibraryBackground TasksCallKitCareKitCloudKitContactsContacts UICore MotionEventKitEventKit UIFile ProviderFile Provider UIHealthKitHomeKitMedia PlayerMessagesMessage UIPhotoKitResearchKitSensorKit, 和 Speech

保護使用者隱私

App Clip 為保護使用者隱私對一些許可權進行了限制,防止使用者跨應用程式和 App Clip 進行跟蹤,例如:

App Clip 還附帶有助於保護使用者資料的限制。他們無法訪問:

  • Apple Music 和媒體
  • 來自日曆、通訊錄、檔案、健康、資訊、提醒事項和照片等應用程式的資料
  • 運動和健身資料

此外,你不能在你的 App Clip 中使用 FaceID,因為 NSFaceIDUsageDescription 授權對 App Clip 不可用。但是,你可以使用本地身份驗證框架來使用 Touch ID 對使用者進行身份驗證。

注意:

你的完整應用程式只能有一個 App Clip,完整應用程式必須支援 App Clip 的所有功能。

編碼

相信閱讀完以上內容,你應該對 App Clip 是什麼能幹什麼十分清楚了,接下來一起看下 App Clip 的程式碼部分。

建立一個 Demo 工程

建立工程:

create-project

新增一個登入模組:

create-login-page

執行效果:

start

建立一個 App Clip target

App Clip 其實就是你原有工程裡新增的一個 target

create-clip-step1

create-clip-step2

create-clip-step3

create-clip-step4

create-clip-step5

簡直一模一樣

project-folder-structure

簡單寫幾句程式碼

code-snippet-page-main

code-snippet-clip-page-main

code-snippet-page-login

觀察效果

主工程執行效果:

choose-scheme-billion-bottle

billion-bottle-start

App Clip 執行效果:

choose-scheme-clip

clip-start

我們看到登入頁面沒有經過任何修改被 App Clip 完美複用,實際場景會稍微複雜些,需要隱藏三方登入入口。

App Clip Target 基本配置

配置環境變數

在 App Clip 這個 Target 上新增環境變數 APPCLIP,用以區分共享程式碼所處的當前環境

config-environment-variables

根據環境變數做適配

共享程式碼根據環境變數 APPCLIP 做適配:

code-snippet-environment-variables

將 App Clip 與你的網站關聯(Associated Domains

配置方面和支援 Universal Link 和 Web Credentials 相似,步驟如下:

  • 為 App 和 App Clip 的 target 新增 Associated Domain appclips:domain.com

config-associated-domain

  • 在 Server 的 App Site Association (通常是在網站 .well-known 下的 apple-app-site-association 檔案) 中新增這個域名對應的 appclips 條目:
{
  ...
  "appclips": {
    // App Clip 的  Bundle Identifier
    "apps": ["ABCED12345.com.example.MyApp.Clip"]
  }
}

如果你正在使用 Universal Link 則只需下載該檔案(domain/apple-app-site-association),並新增以上配置後讓運維同學幫你放到 Server 的指定位置即可。

注意: 當使用者為 App Clip 安裝相應的 App 時,完整的 App 將替換 App Clip。從那一刻起,每次呼叫都會啟動完整的應用程式,而不是 App Clip。因此,你必須將完整的應用程式與你的網站相關聯。此外,完整的應用程式必須處理所有呼叫並提供與 App Clip 提供的相同功能。

分析你要用 App Clip 實現的業務

App Clip 的設計初衷是免安裝,快速啟動,所以包大小非常有限,請把有限的功能留給能快速吸引使用者的功能或及時性的關鍵業務。

模組劃分(App 與 App Clip 共享程式碼提取)

如果你沒有分模組開發,則只需在共享原始檔處勾選 Clip 這個 target 即可

config-reused-code-target-membership

如果你使用 CocoaPods 分模組開發則更簡單,你只需在 Podfile 檔案裡 Clip 下依賴該模組即可。

config-reused-code-cocoapods

編寫功能程式碼

獲取 URL 攜帶的資訊

與 Universal Link 一樣,當 App Clip 被喚醒,App Clip 的 UserActivity 生命週期方法將被呼叫,基於你所使用的技術它將回撥:

基於 SwiftUI:onContinueUserActivity(_:perform:))

基於 Scene:scene(_:willContinueUserActivityWithType:)

基於 App Delegate:application(_:continue:restorationHandler:)

獲取到 NSUserActivity 後,就可以通過 webpageURL 獲取喚起的 URL 了。

程式碼裡區分是 APP 環境還是 App Clip 環境

參考上文「配置環境變數」和「根據環境變數做適配」。

開發階段除錯

在開發階段,可以通過設定 _XCAppClipURL 這個環境變數,執行 App Clip 這個 target 來模擬通過特定 URL 喚起的情況。當 Associated Domain 設定正確後,在 Xcode 中執行 App Clip,就可以拿到包含這個環境值的 NSUserActivity。這樣就可以模擬真實場景除錯了。

debug-environment-variables

與原生 APP 開發幾乎完全一樣,需要注意的是喚起時如何獲取 URL 攜帶的資訊。

真機測試

開發測試階段可以通過配置 Local Experiences(本地體驗)來測試你的 App Clip。

真機配置 App Clip 體驗

Setting -> Developer -> APP CLIPS TESTING -> Local Experiences -> Register Local Experiences -> 填寫測試資訊

create-local-experiences-step1

create-local-experiences-step2

create-local-experiences-step3

生成 App Clip Code

你可以使用 App Clip Code Generator 命令列工具或 App Store Connect 生成 App Clip Code

1、下載 App Clip Code Generator 並安裝

2、執行以下命令生成 App Clip Code

AppClipCodeGenerator generate --url https://appclip.example.com --index 9 --output ~/Desktop/filename.svg

app-clip-code-generator

我們可以看到生成了一個 svg 檔案,更多樣式請 移步官方文件

app-clip-code

提示:

要使用 App Store Connect 建立 App Clip Code,你首先需要上傳包含 App Clip 的 App 版本並建立高階 App Clip 體驗。如果你尚未這樣做 - 例如,在開發期間 - 請改用 App Clip Code Generator 命令列工具。

測試真機體驗

以上設定完成後就可以真機體驗你的 App Clip 了。

  • 攝像頭掃描
  • 手機靠近 NFC 標籤

資料遷移

當使用者下載完 App 時,App Clip 資料會自動遷移到完整 APP。

釋出

隨主應用提交到 App Store Connect,並按引導正確配置 App Clip 體驗即可。

總結

App Clip 開發屬於 iOS 原生開發,可以使用 SwiftUI 和 UIKit,Swift 和 Objective-C,開發過程幾乎跟原生開發完全一致,對 iOS 開發者來說學習成本很小。

在微信小程式盛行的當下 App Clip 在國內的發展前景還並不明朗,慶幸的是開發一個 App Clip 並不會佔用你過多資源,要知道重點是程式碼複用

最後推薦大家一款 App Clip Shazam,體驗方式:控制中心開啟「音樂識別」,當週圍有音樂播放時會彈出通知橫幅,點選該通知橫幅即可開啟該 App Clip 並定位到識別到的歌曲,實用又有科技感。

參考

1[[app-clips]](https://developer.apple.com/a...)(https://developer.apple.com/a...)

更多精彩請關注我們的公眾號「百瓶技術」,有不定期福利呦!


  1. 1

相關文章