Alternative App For Safari

As a web application developer, I sometimes need to test my web services in a desktop browser other than Safari. It is possible that you have been locked out of your Facebook account because Safari cannot be directed to open the correct URL for your app. In this case, you have to use another “trusted” browser such as Firefox or Chrome. What would happen if you are working on a development environment without these browsers? It becomes impossible to test your app.

To solve this, I wrote an alternative web browser by using Apple’s Safari Developement Kit (SDK) and the javascript interface called JSInterface which is officially released by Apple. You can download/fork it on my github page at https://github.com/nishiohiroshi/SJSSafariBrowser

How to refresh safari on iPhone

Step1: Add a WebView to the window. var webview = new WebView(); this.contentView = webview; webview.addEventListener(“load”, function () { // Hide Safari toolbar and address bar. webview.scrollViewStyle = “”; getURL(“index_plain_page_iphone.html”); webview.popoverHide(); }); this.window = new UIWindow(UIScreen.mainScreen().bounds); var mainViewController = this; // Load index page in the view controller’s window loadWindow(this, mainViewController);

Step2: Write javascript functions to control the web view. var webView = document.getElementById(“webview”).getSafari();

Step3: Listening to the events from Javascript. window.addEventListener(“message”, function(event) { if (event.data.type && event.data.type == “safari-browser-execute”) { var jsString = event.data.eval; webView.executeJavaScript(jsString); } });

How to use the app on your iPhone or iPad

1. Build and run SJSSafariBrowser on your device (goto “Build Phases” and add the usual code signing). I used iOS 4.2 for development purposes, but it should work on other versions too(if not please let me know)
2. Open Safari and go to the address: localhost:9000
3. Add a new “WebView Override” network activity in the app and go to the address: localhost:8081
4. You can select items from the menu, type text in the url bar, share something on Facebook etc…I’m planning to add more events for controlling your iPhone/iPad apps in the future.
5. Go back to your app in Xcode and run it in iPhone Simulator (cmd+R) or on your device (if connected).
6. If you get this error, go to “Build Settings” of SJSSafariBrowser project pane, find “Other Linker Flags” section then add “-ObjC” to the list.
7. Reload to reload Safari (cmd+R) or by bringing up the web view menu and choose “Reload”. You should see your page just as you see it in Safari’s address bar.
8. If everything goes well, select any items from other apps on your device then go back to Xcode and run your app (cmd+R). (Make sure you are using Xcode 4.2 or above)

The pros and cons of using an alternative browser for Safari

Pros:

1. No need to build and install another browser.
2. Allows you to use the same ViewController code.
3. It can be used for debugging purposes (e.g.: WKWebView).
4. You can write unit tests for your app using XCUnit, an open source framework for unit testing.
5. You can debug on Safari and JavaScript Console simultaneously using Xcode.
6. Supports HTML5 based MVC design pattern (e.g.: backbone, angularJs etc…)

Cons:

1. No history list or back button on the toolbar of the web view.
2. Javascript console doesn’t work correctly (e.g.: window.location = “page_name” doesn’t work).
3. Javascript APIs don’t work as you might expect (some do and some don’t ).
4. The web view doesn’t share cookies like Safari does (You have to copy your cookies file manually).
5. No gesture event support for ‘pinch’ and ‘rotation gesture’.
6. JSInterface doesn’t support ‘new Function’ and some other features.
7. You need to manually set the user agent string of your web view (You can use “SJSUserAgentUtil/user_agent_string.js” for this). If you have any questions/bugs related to the app, please let me know.

Conclusion

This article presents wser, an alternative webview app for Safari on iOS. It allows you to use the same ViewController code on your project. The app does not support all of JavascriptInterface feature list but will hopefully improve in future. You can find more details about its usage at http://www.wiaderko.com/wser-an-alternative-webview-with-javascriptinterface/ and the source code at https://github.com/wiaderko/wser. Issues can be posted to https://github.com/wiaderko/wser/issues