Monthly Archives: September 2013

Loading files locally from a iOS webview

Ran into this issue yesterday. I am using a webView to develop a prototype in HTML5. The problem is that my webView accesses an external file index.html. If you try and file the standard file:// protocol you will get strange security issues and the files wont load. The solution is below, basically we had to use myapp:// protocol which is defined by the iOS app.

#---- Place this by your webview

[NSURLProtocol registerClass:[NSURLProtocolCustom class]];

#---- "NSURLProtocolCustom.h"

@interface NSURLProtocolCustom : NSURLProtocol
@end

#---- "NSURLProtocolCustom.m"

#import "NSURLProtocolCustom.h"

@implementation NSURLProtocolCustom

+ (BOOL)canInitWithRequest:(NSURLRequest*)theRequest
{
    if ([theRequest.URL.scheme caseInsensitiveCompare:@"myapp"] == NSOrderedSame) {
        return YES;
    }
    return NO;
}

+ (NSURLRequest*)canonicalRequestForRequest:(NSURLRequest*)theRequest
{
    return theRequest;
}

- (void)startLoading
{
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:self.request.URL 
                                                        MIMEType:@"image/png" 
                                           expectedContentLength:-1 
                                                textEncodingName:nil];

    NSMutableString *FileName  = [[self.request.URL.absoluteString stringByReplacingOccurrencesOfString:@"myapp://" withString:@""] stringByReplacingOccurrencesOfString:@".png" withString:@""]; 
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:FileName ofType:@"png"];  
    NSData *data = [NSData dataWithContentsOfFile:imagePath];

    NSLog(@"---- DATA URL"); 
    NSLog(imagePath); 

    [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
    [[self client] URLProtocol:self didLoadData:data];
    [[self client] URLProtocolDidFinishLoading:self];
}

- (void)stopLoading
{
    NSLog(@"request cancelled. stop loading the response, if possible");
}

@end

Detect ipad with standard CSS

It is possible to detect ipad users and simply over ride their css properties. Most of the examples from the internet tubes didn’t seem to work. These did:

.ui-page {
	min-height: 480px;
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

	.ui-page {
		min-height: 1024px !important;
	}
}

@media only screen and (min-device-width: 961px) and (max-device-width: 2048px) and (orientation:portrait) {
/** Ipad3 ***/ 
	.ui-page {
		min-height: 2048px !important;
	}
}