iOS WebView App

download iOS WebView App

of 48

  • date post

    11-Sep-2014
  • Category

    Technology

  • view

    5.763
  • download

    7

Embed Size (px)

description

社内iOS WebVeiwアプリ勉強会の資料に補足追加した物。 iOSのハイブリッドアプリ開発における、UIのパフォーマンスや設計について。

Transcript of iOS WebView App

  • iOS WebView App@hagino3000

    2013-12-12

    at VOYAGE GROUP

  • Android

  • WebView

    WebUI

  • HTML, CSS, JS or NOT

    Single Page Web App or NOT UI or NOT

  • HTML, CSS, JS

  • Single Page Web App

    Single Page JS

    JSSencha Touch, AngularJS etc...

    Multi Page

  • () Multi UIWebView

    UIWebView

  • iOSUI

  • iOSUI

    NavigationBar, UIAlertView, UIActionSheet etc..

    ()

    UI

    Polyfill

  • UIWebView

  • UIWebView

    iOS Version Browser Component

    iOS 6 iOS Safari 6.x

    iOS 7 iOS Safari 7.0

    http://caniuse.com/#compare=ios_saf+6.0-6.1,ios_saf+7.0

  • UIWebView

    UIScrollView

    HTML Content()

    Navigation Bar

    Contents A

    rea (iOS6)

    Contents A

    rea (iOS7)

    document.scrollTop

  • ViewPort

  • Single Page Web AppHeight 100%

    ()

    scrollView

  • // UIScrollViewwebView.scrollView.scrollEnabled = NO;

    /* CSS */article.page{ box-sizing: border-box; position: absolute; width: 100%; height: 100%; top 0; left: 0; overflow: scroll; -webkit-overflow-scrolling: touch;}

  • scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;// UIScrollViewDecelerationRateFast

    scrollView

    CSS

    UIScrollViewRateNormal

  • NavigationBar

    NavigationBar (iOS7)

    navbarscrollView

    webView.scrollView.contentInset webView.scrollView.contentOffset webView.scrollView.scrollIndicatorInsets

  • position: fixed

    iScroll onScrollposition:fixed

    https://github.com/cubiq/iscroll View

  • 1. or

    2. Keyboard Window

    3. document.scrollTop

    Keyboard Window

    scrollViewscrollTop

    JavaScript

  • body { /* */ -webkit-user-select:none; /* */ -webkit-touch-callout:none; /* */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

  • To WebView

    NSString *js = @window.App.hello();;[self.webView stringByEvaluationgJavaScriptFromString:js];

    // sessionId, userId etc.. NSString *js = [NSString stringWithFormat: @window.App.deviceReady({\ sessionId: %@,\ userId: %@,\ apiBase: %@\ });, self.sessionId, self.user_id, @http://api.hoge.com]; [self.webView stringByEvaluatingJavaScriptFromString:js];

  • From WebView

    1. location

    2. UIWebViewDelegateshouldStartLoadWithRequest

    3.

    4. UIWebViewstringByEvaluatingJavaScriptFromString

    PhoneGap

    https://github.com/phonegap/phonegap/blob/master/lib/ios/CordovaLib/cordova.js

  • // JSvar transactionId = 0;function nativeBridge(action, params, callback) { // var transactionId = transactionId++; callbacks[transactionId] = callback; var data = encodeURIComponent(JSON.stringify({ transactionId: transactionId, params: params })); // iframelocationWebViewDelegate // var frame = $('').attr('src', 'MyActionHandler://' + action + '/' + data ).css({display: "none"}); $(document.body).append(frame); frame.remove();}

  • // Objective-C- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { // Check schema if ([[request.URL.scheme lowercaseString] isEqualToString:@MyActionHandler]) { // return NO; } return YES;}

  • App.nativeBridge(alert, { title: Error, message:Sorry..., buttonTitle: OK}, function(){ // UIAlertViewOK})

  • Window Alert Confirm ActionSheet

  • UIWebViewDelegateshouldStartLoadWithRequest (iframe)

    (iframe)

    XMLHttpRequest scriptlinkimg

    NSURLProtocol

  • (ex Safari)

    NSMutableURLRequestcookie

    (NSURLProtocol)

  • Click

    touchstartclick300msec

    FastClick.js

    click jQuery mobilevclick

    clicktouchend()

  • DOM

    DOM GPU

    -webkit-transform: translate3d

    offsetHeight

    DOM

  • DOM

    iOS

    iOS SDKUITabelViewCellDOM

  • Chrome and

    iPhone and

    ()

  • (Alert, ActionSheet ...)

    AppDelegate

    Push, Navigationbar button, on/offline..

    Chrome iPhone5, 4S etc...

  • Chrome

  • grunt auto-reload JS, HTML

    CSSDOM

    window.onerrorXcode()

    Safari

    iOS

  • Network Link Conditioner

    3G

  • API

  • RESTful API Request

    content-type: application/json Response

    content-type: application/json

    JavaScript(ex. backbone.js)

  • APICross Domain XHR

    HTML, JS, CSSlocalhost (grunt server)

    APIAWSAjax

    or

    OPTIONSAPICORS

  • UI ()