arrow_backward Back to blog

How To: Refresh an iOS Hybrid App

If you’ve spent any time building iOS apps using tools like Cordova or PhoneGap, you’ll know that one of the biggest time-sucks is in viewing new changes to existing pages. The most common example of this would be building a Single Page Application using libraries like Backbone, Angular, or Ember.

The awful way

My flow, until recently, has been to start up the simulator from Xcode, test out my pages, stop the app from Xcode, then select Reset Content and Settings... from the iOS Simulator menu. This process is painfully slow, especially if you work iteratively like I do.

"Reset Content and Settings"

A better way

With the most recent updates to Safari, there’s now a way to refresh your app from the Web Inspector (the functionality has been around for a little while via keyboard short-cuts, but the explicit UI is new).

You can access this once your app is running by opening up Safari, selecting the Develop menu, iPhone Simulator (or iPad Simulator), then index.html.

"Safari Developer Menu"

Once there, select the Resources tab and you’ll see the index.html page selected, with a refresh icon to the right of the column. Click on that and you’ll get a proper page reload. Alternately, you can press cmd + shift + r to trigger the reload.

Please Note: If you need to run the cordova run ios command, you may still need to re-start the emulator/re-build your app to see the changes you have made.

"Reload Interface in Safari"

To make this even more efficient, I created an Xcode Service in Automator that will refresh the index.html page of the iPhone Simulator. The first time you run the workflow you’ll be prompted to give Xcode access to the Accessibility features; you’ll need to enable that to run the Service.

arrow_backBack

New Project Request













Top