Slide 1

Slide 1 text

NJKWebViewProgress id:ninjinkun / @ninjinkun Thursday, May 30, 13

Slide 2

Slide 2 text

NJKWebVIewProgress is • UIWebView Progress Interface • UIWebView doesn't have official progress interface • Available with NJKWebVIewProgress https://github.com/ninjinkun/NJKWebViewProgress Thursday, May 30, 13

Slide 3

Slide 3 text

NJKWebVIewProgress is • Don’t use private methods • AppStore safe • Easy to integrate • Over 300ˑ on GitHub! https://github.com/ninjinkun/NJKWebViewProgress Thursday, May 30, 13

Slide 4

Slide 4 text

DEMO Thursday, May 30, 13

Slide 5

Slide 5 text

Count Loading Resources UIWebView Hacks • Hook UIWebViewDelegate - (void)webViewDidStartLoad:(UIWebView *)webView { _loadingCount++; _maxLoadCount = fmax(_maxLoadCount, _loadingCount); [self startProgress]; } - (void)webViewDidFinishLoad:(UIWebView *)webView { _loadingCount--; [self incrementProgress]; } Thursday, May 30, 13

Slide 6

Slide 6 text

Count Loading Resources UIWebView Hacks • Increment Progress based on loading count float remainPercent = (float)_loadingCount / (float)_maxLoadCount; float increment = (maxProgress - progress) * remainPercent; progress += increment; progress = fmin(progress, maxProgress); [self setProgress:progress]; Thursday, May 30, 13

Slide 7

Slide 7 text

WebView Running State UIWebView Hacks • document.readyState • “loading” => Not represent • “interactive” => Represent, DOM access enable • “complete” => Finish • - (void)webViewDidFinishLoad:(UIWebView *)webView • Loading is not completed set “load” event hander Thursday, May 30, 13

Slide 8

Slide 8 text

UIWebView RPC UIWebView Hacks • ViewController → UIWebView • stringByEvaluatingJavaScriptFromString: • Simple! Thursday, May 30, 13

Slide 9

Slide 9 text

UIWebView RPC UIWebView Hacks • UIWebView→ ViewController • Use Iframe • Don’t use location.href • It changes mainDocumentURL • Inspired by Cordova • Iframe can detect in webView:shouldStartLoadWithRequest:navigationType: BOOL isTopLevelNavigation = [request.mainDocumentURL isEqual:request.URL]; window.addEventListener('load',function() { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = '%@'; document.body.appendChild(iframe); }, false); Thursday, May 30, 13

Slide 10

Slide 10 text

Progress Property • Fit to user’s mental model • Try and error • Inspired by WebKit’s implementation • Start Loading. 0.1 • Document not represent. updating progress Max 0.5 • Document represent. updating progress Max 0.9 • Complete. 1.0 Thursday, May 30, 13

Slide 11

Slide 11 text

UIWebViewDelegate Proxy Easy to integrate • NJK needs UIWebViewDelegate hook • But my project already use UIWebViewDelegate • Needs easy integration • NJK perform as a proxy object progressProxy = [[NJKWebViewProgress alloc] init]; webView.delegate = progressProxy; progressProxy.webViewProxyDelegate = self; progressProxy.progressDelegate = self; Thursday, May 30, 13

Slide 12

Slide 12 text

UIWebViewDelegate Proxy Easy to integrate .delegate UIWebView ViewController Thursday, May 30, 13

Slide 13

Slide 13 text

UIWebViewDelegate Proxy Easy to integrate • All messages forward to webViewProxyDelegate NJKWebView Progress .webViewProxy Delegate .delegate UIWebView ViewController .progressDelegate Thursday, May 30, 13

Slide 14

Slide 14 text

CocoaPods Easy to integrate • CocoaPods is awesome! • Easy to install • Add one line • Add .podspec file before git push • LICENSE file needed Thursday, May 30, 13

Slide 15

Slide 15 text

Method Forwarding Provide for future iOS • Generally called “Method Missing” • Prepare for appending UIWebViewDelegate methods • Can forward new method to webViewProxyDelegate - (NSMethodSignature *)methodSignatureForSelector:(SEL)selector { NSMethodSignature *signature = [super methodSignatureForSelector:selector]; if(!signature) { if([_webViewProxyDelegate respondsToSelector:selector]) { return [(NSObject *)_webViewProxyDelegate methodSignatureForSelector:selector]; } } return signature; } - (void)forwardInvocation:(NSInvocation*)invocation { if ([_webViewProxyDelegate respondsToSelector:[invocation selector]]) { [invocation invokeWithTarget:_webViewProxyDelegate]; } } Thursday, May 30, 13

Slide 16

Slide 16 text

Progress UI • NJK doesn’t takes “Progress UI” • UIProgressBar • Feel slow with animation • Kill animation or make your own progress UI • Sleipnir Mobile has interesting progress bar • They call “Psychological Representation” Thursday, May 30, 13

Slide 17

Slide 17 text

My First GitHub Hit • For Open Source Software • Portability • Easy Integration • Documentation • Solid code • Inspired by @_Ishkawa Thursday, May 30, 13

Slide 18

Slide 18 text

Wrap Up • NJKWebViewProgress is UIWebView Progress Interface • You can implement WebView Progress UI • Using several UIWebView hacks • But AppStore safe • Easy to integrate • Proxy Pattern, CocoaPods • NJK is my new signature • GitHubˑ is pleasure • I hope official progress interface!!! Thursday, May 30, 13

Slide 19

Slide 19 text

For Student Hatena Summer Internship • 8/12 - 9/6 @ Hatena HQ, Kyoto • Learning • Web App basics (Perl, SQL, HTTP, WAF, HTML, JavaScript) • iOS App, Big Data, Service Design • Commit • Plan, design, implement your idea to actual services • Deploy, Release, Get feedback • Salary, Hotel, Free Launch, Free Drink • Due 6/16 Search with “͸ͯͳΠϯλʔϯ” Thursday, May 30, 13