# What's new in App Clips --- # 大綱 1. 介紹 Great App 是如何使用 App Clips 1. App Clips 於 Safari 及 WebView 的新特點 1. 本地如何更有效率地測試 App Clips 1. App Clips Code 設計與製作 --- ## 1. 其他 App 是如何使用 App Clips ---- 1. 遊戲試玩 1 分鐘 1. 抖音 1. 地圖點餐 1. Search、Nearby 1. 停車樁、充電寶、AR家具展示 1. 海報訂票 KKDAY ... Note: 會出現在 safaris 的 banner 很適合做 OMO，例如打開地圖走去康是美時就可以先點與購買，然後到店取貨。導航購物兩不誤。 ---- 遊戲試玩  ---- 抖音  ---- 地圖點餐  ---- Search、Nearby  --- ## 2. App Clips Card in Safari ---- 1. 多了置中、全尺寸的卡片 （iOS 15）  Note: apple-itunes-app meta tag -> smart app banner 可以在 meta tag 設定就可以出現了 If they choose "View in Safari," Safari will remember the choice and not show the card next time the page is loaded again. And it will fall back to the original banner. 使用者可以決定下次打開還要不要看到 ---- 與 small banner 的差異 | Column 1 | small banner | medium cards | | -------- | --------------------------- | ------------------ | | 版本 | iOS14 | iOS15 | | 步驟 | 繁雜（看->open->同意->打開) | 簡潔（置中->打開） | | 其他 | 永遠出現 | 使用者決定是否隱藏 | ---- #### 如何設置新卡片樣式於 Safari 新增一行Code 即可  ---- #### 於 SafariViewController 效果  Note: 推特可以認出 clips 的網址，並且點擊後可以有效外開 ---- 小結 1. 於網頁加上簡單的 meta tag code 就可以輕易將原先的 small banner 變成 medium card 模式 (輕鬆支援 safari、及 safariviewcontroller) --- ## 3. 本地如何更有效率地測試 App Clips Note: 開發很方便的優化 --- ### 特點 1. 本地測試（無需註冊） 1. 支援 NFC、QRcode、App Clip Code、Safar、Message 1. 不支援 地圖、location suggest、Spotlight 1. 需透過 Xcode install、App Clips Beta Testing --- ### 設定 ---- 設定 Step 1  ---- 設定 Step 2  ---- 設定 Step 3  --- ## 4. App Clips Code --- ### 樣式 ----  Note: NFC 適合使用者容易接觸到的，例如線下商店的桌子、儀器旁邊、商品櫥窗 QRcode 適合使用者接觸不到的，例如email通知信 --- ### 如何製作 ---- 1. Command Line Tool  Note: 如果需要自動化使用URL大量產生、測試、開發的話建議使用第一個。 ---- 2. 直接從 connect 下載  ---- 1. command line tool 1. 下載 1. 於 terminal 輸入 AppClipCodeGenerator 提供SVG Note: 不想特別講 [連結][(https://](https://developer.apple.com/documentation/app_clips/creating_app_clip_codes/creating_app_clip_codes_with_the_app_clip_code_generator)) https://developer.apple.com/app-clips/resources/ https://developer.apple.com/download/all/?q=App%20Clip --- ### 製作 Guideline ---- 1. 平滑  ---- 2. 符號要正  ---- 3. 不要太小  ---- 4. 要看的清楚  ---- 5. 可以添加清楚的文字  --- ### 最後實際操作場景 ---- https://imgur.com/a/7XMkqaD ---- Example