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.
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
iPhone Simulator (or
iPad Simulator), then
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.
cordova run ioscommand, you may still need to re-start the emulator/re-build your app to see the changes you have made.
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.