How to develop your own WhatsApp app for your iPad Pro

Bought my first iPad Pro few months back and found that there is no official WhatsApp app for iPad. There are few unofficial WhatsApp app for iPad on the AppStore but most of them are either not working as expected or it’s a PAID app.

And yes, you still can access WhatsApp Web on Safari but you won’t have notification feature as well as the page get reloaded everything you switch between apps on your iPad.

After doing some search on Google, I decided to develop my own iPad WhatsApp app leveraging on WhatsApp Web version.

Managed to pull it off after 2 days of development and submitted to Apple for review as a free app.

However after 24 hours, it got rejected by Apple due reasons below.

Tried to explain to them that it is not to copy WhatsApp but as a plugin to enable Apple users to use WhatsApp on iPad. End up, their “robot” come back with the exact same answer.

So I decided to put it up to GitHub as open source with short explanation on the code here.

First, download the full code from GitHub as reference.

The basic idea is to wrap WhatsApp Web as webview in the app. In other words, put a WKWebView in your app and load WhatsApp Web (http://web.whatsapp.com) on this WKWebView.

But we have 2 issues here,

First since it’s a webview, there is no Push Notification feature. Second issue is how to prevent the app from been killed by iPadOS when it go to background. Actually there is third issue where we need to prevent the WebView to go into inactive mode so that it able to received the Web Push notification. and doesn’t get reload everytime user open the app from background.

Push Notification

WhatsApp Web support Web Push notification for desktop browser, so we need amend the User-Agent in header in order to pretend as desktop browser. To do this, you just need to set the custom user agent in WKWebView as below;

webView.customUserAgent = “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15”

Ok, after setting the above, WhatsApp will return the desktop view of WhatsApp Web. Next we need to inject javascript (UserScript.js) to our WKWebView in order to listen to any Web Push Notification.

let userScriptURL = Bundle.main.url(forResource: “UserScript”, withExtension: “js”)!

let userScriptCode = try! String(contentsOf: userScriptURL)

let userScript = WKUserScript(source: userScriptCode, injectionTime: .atDocumentStart, forMainFrameOnly: false)

let webConfiguration = WKWebViewConfiguration()

webConfiguration.userContentController.addUserScript(userScript)
webConfiguration.userContentController.add(self, name: “notify”)

The UserScript.js contain a class (NotificationOverride) that we will set it to override the window.notification class.

window.Notification = NotificationOverride;

In our NotificationOverride class, we need to override the constructor method in order to push the notification to our swift code.

constructor (messageText, options) {
window.webkit.messageHandlers.notify.postMessage(messageText + “|” + options.body);
}

And in our swift view controller, we have a delegate callback for userContentController that will capture the notification from webkit and push it as native app notification.

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)

Application running in the background

iPadOS app will be suspended when it went to background. Hence if you want your webkit to be able to received notification, you need to keep alive your application even when user put the app in background. You can do this by requesting for location update.

locationManager = CLLocationManager()
locationManager?.allowsBackgroundLocationUpdates = true
locationManager?.pausesLocationUpdatesAutomatically = false
locationManager?.distanceFilter = kCLDistanceFilterNone
locationManager?.delegate = self
locationManager?.requestAlwaysAuthorization()
locationManager?.startUpdatingLocation()
locationManager?.startMonitoringVisits()
locationManager?.startMonitoringSignificantLocationChanges()

This will keep the app alive even it went to background.

And whenever there is location change callback, you can call the WKWebView to evaluate any javascript to keep the WKWebView active as well.

If you interested to use WhatsApp on your iPad, you can download the full code from GitHub and install it. Enjoy !