objective c - iOS Cache a UIWebView

Question

I've written an iOS app that loads up an HTML5 web application inside a UIWebView. I'm trying to make the app cache everything in the UIWebView for use while on a 3G connection rather than load it all again.

It needs to follow all links while on a WiFi connection and download all pages and images. When on a 3G connection it should then load everything from the cache.

Is this possible? Any ideas on where I should start? Do I need to make my HTML5 application load all pages in the background rather than have the app do it?

Thanks for any help!

Answer 1

Firstly I would use Reachability to detect if there is a WIFI connection and your server is accessible. This way you can handle both 3G connectivity and no internet connection in the same way. (accessing the cached pages). It also means you can use the cache if you have WIFI but still cannot reach your server.

Reachability sample code

I would either download a zip file of your web pages and all the associated assets (if it is a fairly static website) and unzip and store them in the local file system. You can then point your UIWebView to the local directory when there is not WIFI.

You could use something like Zip Archive to handle this

ZipArchive GitHub page

If this is not an option then you could get the HTML from the page when you load it in the UIWebView. The problem with doing this is you are reliant on the user accessing pages in order to cache them.

You can use this to get the HTML code and store it locally:

 // Determile cache file path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *filePath = [NSString stringWithFormat:@"%@/%@", [paths objectAtIndex:0],@"index.html"];   

// Download and write to file
NSURL *url = [NSURL URLWithString:@"http://www.google.co.uk"];
NSData *urlData = [NSData dataWithContentsOfURL:url];
[urlData writeToFile:filePath atomically:YES];

// Load file in UIWebView
[web loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]]];

You could use this code to get all the web pages in the background as well. To do this you will either need to hard code all the required URLs and look them up individually or better still download a list of web pages from your site first.

You could create a web service (JSON is probably your best option for this) giving a list of URLs to download. You could then parse through this JSON and use the URLs to feed into the code above and cache the HTML locally.

Just remember to be careful with your hyperlinks and links to any images and CSS within your HTML as this will break your cached website if they are looking for your full online URL rather than a relative path.