標籤彙整: safari

AR Quick Look 讓你在網站及 App 中展示 3D 模型及拍照

AR Quick Look 是 iOS 12 的新功能,可以在網站及 App 中展示 3D 模型,更可以在 AR 模式與之拍照。

以下分別是網站及 App 的程式碼,素材皆來自 AR Quick Look Gallery ,若想自行產生 usdz 格式的檔案請參考這篇文章

 


網站 (只有 iOS 12 Safari 實機才有效果)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>AR Test</title>
    </head>
    <body>
        <h1>AR Quick Look in Websites</h1>
        <p>這是從 https://developer.apple.com/arkit/gallery/ 下載的模型,僅供測試用。</p>
        <p>需使用 iOS 12 的 Safari 觀看。</p>
        <a href="cupandsaucer.usdz" rel="ar">
            <img src="cupandsaucer.jpg" width=200>
        </a>
    </body>
</html>

 


App (只有 iOS 12 實機才有效果)

import UIKit
import QuickLook

class ViewController: UIViewController, QLPreviewControllerDataSource, QLPreviewControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
        
        return 1
    }
    
    func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
        
        let url = Bundle.main.url(forResource: "cupandsaucer", withExtension: "usdz")!
        return url as QLPreviewItem
    }
    
    @IBAction func buttonPressed(_ sender: UIButton) {
        
        let previewController = QLPreviewController()
        previewController.dataSource = self
        previewController.delegate = self
        self.present(previewController, animated: true)
    }
}

 


參考資料
https://developer.apple.com/arkit/

實現 iOS App 與網站之間互通的 Universal Links

Universal Links 是網站與應用程式之間的橋樑,可以將使用者從網站導引至應用程式。比如說有個網址是 http://www.example.com/book/12345678 ,在 iOS 上用 Safari 瀏覽時剛好也有安裝 App 端,網頁最上方就會出現一個  "在「XXX」App 中打開" 的橫幅,點擊就會開啟 App 端進到指定的頁面。

你可能對於 URL Schemes 不陌生,以前要從網頁連到 App 需要判斷是否有安裝該 App,然後分別連到 App 下載頁面或是開啟 App 到某一頁。現在有了 Universal Links 確實方便許多,至少已安裝的部分系統已經幫你處理好了。

 

Apple Developer 設定

先去 iOS App IDs 確定該 ID 的 Associated Domains 為啟用狀態。

 

Xcode 專案設定

Target → Capabilities → 打開 Associated Domains → + → "applinks:example.com"

 

Web 設定

新增一個 apple-app-site-association 檔案(沒有副檔名),內容如下:

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "D3KQX62K1A.com.example.DemoApp",
                "paths": [
                    "*"
                ]
            }
        ]
    }
}

若已有這個檔案,只要加入 applinks 這個層級並保持 JSON 結構即可。
D3KQX62K1A 為 Team ID ,可以從這裡找到。
com.example.DemoApp 為 Bundle Identifier 。
paths 裡寫 "*" 代表整個網站都會處理,初期為測試方便所以先全部接收,如果只想接收 /book 就寫 "/book"。另外除了 "*" 也能搭配使用 "?" 及 "NOT" 使用。

將此檔案放在網站的 .well-known 資料夾下,整個網址就像這樣 https://example.com/.well-known/apple-app-site-association ,需注意必須要 https:// 開頭,如果有子網域也要分別作設定。每當 App 安裝或是更新版本才會去抓 apple-app-site-association 。

 

程式碼設定

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
        
    // 來源是網頁或網址
    if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
        let incomingURL = userActivity.webpageURL,
        let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true),
        let path = components.path {
            
        print("path = \(path)")
            
        // 如果之前有做 URL Schemes 處理,可以搭配使用
        /*  書籍資訊
            https://www.example.com/book/12345678
            com.example.DemoApp://book/12345678
         */
        if path.hasPrefix("/book/"), let bookID = path.components(separatedBy: "/").last, bookID.count >= 10 {
            // 跳轉到書籍詳細資訊
            return true
        }
        return false
    }
        
    return false
}

 


 在 iOS 使用 Safari 瀏覽此網址,可以看到上方的橫幅。若沒有看到可以捲動一下頁面,它有時會隱藏。接著把網址放到備忘錄並對他長按放開,會多出一個 "在「XXX」中打開" 的選項。

 Apple 也有提供工具來檢驗,如果出現 Error no apps with domain entitlements 也不用太糾結,可能是有此功能的新版本未正式上線的關係,只要確定網頁上方有出現橫幅就是成功了。

 


 
參考資料
https://developer.apple.com/ios/universal-links/
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/enabling_universal_links
https://developer.apple.com/documentation/uikit/core_app/allowing_apps_and_websites_to_link_to_your_content/handling_universal_links

在 iOS App 裡實現密碼自動填寫

想像一下這個使用情境,某個服務有 Web 也有 App,若使用者有用 Safari 登入並記住密碼,那麼在 App 裡點擊 Text Field 的鍵盤會提示是否要用已儲存的密碼,點擊後帳號密碼就會填入對應的 Text Field 中,使用者完全不用自行輸入非常方便。

若要實現這功能需要從 App 以及 Web 兩邊都做設定,且系統需求為 iOS 11 以上。

 

Apple Developer 設定

先去 iOS App IDs 確定該 ID 的 Associated Domains 為啟用狀態。

 

Xcode 專案設定

Target → Capabilities → 打開 Associated Domains → + → "webcredentials:example.com"

 

Web 設定

新增一個 apple-app-site-association 檔案(沒有副檔名),內容如下:

{
    "webcredentials": {
        "apps": [
            "D3KQX62K1A.com.example.DemoApp",
            "D3KQX62K1A.com.example.DemoAdminApp"
        ]
    }
}

若已有這個檔案,只要加入 webcredentials 這個層級並保持 JSON 結構即可。
D3KQX62K1A 為 Team ID ,可以從這裡找到。
com.example.DemoApp 為 Bundle Identifier 。

將此檔案放在網站的 .well-known 資料夾下,整個網址就像這樣 https://example.com/.well-known/apple-app-site-association ,需注意必須要 https:// 開頭,如果有子網域也要分別作設定。每當 App 安裝或是更新版本才會去抓 apple-app-site-association 。

 


現在你可以試試先在網站登入並儲存密碼,儲存的密碼可在 設定 → 帳號與密碼 → App 與網站密碼 裡找到。

然後回到 App 的登入畫面裡點擊 Text Field 應該就可使用儲存的帳號密碼了,雖然這只是單向的。

 


你可能會發現並非所有的 Text Field 都會出現,因為預設是以 secureTextEntry 這屬性來判斷是否為密碼,若沒指定則需要另外要用 textContentType 來指定:

userTextField.textContentType = .username
userTextField.keyboardType = .emailAddress
passwordTextField.textContentType = .password

newPasswordTextField.textContentType = .newPassword
confirmPasswordTextField.textContentType = .newPassword

singleFactorCodeTextField.textContentType = .oneTimeCode

 

參考資料
https://developer.apple.com/documentation/security/password_autofill/
https://developer.apple.com/documentation/security/password_autofill/setting_up_an_app_s_associated_domains
https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_a_text_input_view