How to download a .vcf file in iOS WKWebView app to save it into iPhone's contacts directly?

Question

I already have the .vcf file saved on my local server (node.js) and am running the WKWebView on my iPhone as an iOS application. How can I download the .vcf file from the WKWebView app to my iPhone's contacts? When I try downloading the file on an actual browser, it works, but it doesn't work on the iOS WKWebView app. Maybe, is there something like a download listener for iOS, similar to the one for android? Any help will be deeply appreciated. Stuck on it for quite long!! Thanks a ton!

Answer 1

Part 1: Get VCF file URL from Website

Set script message handler on WKWebView, use below code when initialising WKWebView:

webView?.configuration.userContentController.add(self, name: "MyHandler")

You have to set WKScriptMessageHandler delegate.

Add below code to your website's download button click event:

window.webkit.messageHandlers.MyHandler.postMessage({"message":"Start Download", "vcf_url":"https://www.yourwebsite.com/path/file.cvf"})

didReceiveScriptMessage will called when user clicked on download button on website. Here you will receive ["message":"Start Download", "vcf_url":"https://www.yourwebsite.com/path/file.cvf"] object.

Part 2: Get VCF file data and Add to Contacts

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print(message.body)
        if let dic = message.body as? [String:String] {
            if let url = dic["vcf_url"] {
            let fileUrl = URL(fileURLWithPath: url)
            do {
                let data = try Data(contentsOf: fileUrl)
                let contacts = try CNContactVCardSerialization.contacts(with: data)
                let contactStore = CNContactStore.init()
                contactStore.requestAccess(for: CNEntityType.contacts, completionHandler: { (granted, accessError) -> Void in
                    if granted {
                        let saveRequest = CNSaveRequest()
                        for contact in contacts {
                            let newContact = CNMutableContact()
                            newContact.givenName = contact.givenName
                            newContact.familyName = contact.familyName
                            newContact.phoneNumbers = contact.phoneNumbers
                            saveRequest.add(newContact, toContainerWithIdentifier: "")
                            do {
                                try contactStore.execute(saveRequest)
                                // Contact saved successfully
                            } catch let error {
                                print("Error - \(error.localizedDescription)")
                            }
                        }
                    }
                })
            } catch let error {
                print("Error - \(error.localizedDescription)")
            }
        }        
    }

Here, newContact.imageData = contact.imageData can be used to save image if it is not nil.

I have not illustrated all the property of contact in example, but you can use as you like.