iOS 11 WKWebView3 주요 새로운 기능(WWDC 2017)

14213 단어 SwiftWKWebViewiOS

iOS 11 WKWebView (WWDC 2017)


WWDC 2017 Customized Loading in WKWebView 비디오에서 얻은 정보입니다.
현재 iOS 11은 베타1이기 때문에 변경이 있을 수 있다.
iOS 11의 WKWebView에는 세 가지 큰 변경 사항이 추가됩니다.
  • 쿠키 관리
  • 컨텐츠 블록
  • URL Scheme의 사용자 정의 리소스를 사용한 주입
  • 어느 것이든 늘 원하던 기능이죠.그럼 한번 봅시다.

    쿠키 관리


    지금까지 WKWebView 쿠키는 처리하기가 매우 어려웠지만 iOS 11은 마침내 제어할 수 있게 되었다.
  • 쿠키별 추가/삭제
  • 모든 쿠키에 대한 액세스
  • HTTP-only 쿠키(JavaScript에서 참조할 수 없는 쿠키)
  • 에도 액세스할 수 있음
  • 쿠키 스토어 변경 모니터링
  • 쿠키 작업은 비동기적으로 수행되며, 각각의 작업이 완료되면 Closure라고 합니다.
    WKHTTPCookieStore
    let cookieStore = webView.configuration.websiteDataStore.httpCookieStore
    
    // 追加
    let cookie = HTTPCookie(properties: [ 
      HTTPCookiePropertyKey.domain: "canineschool.org",
      HTTPCookiePropertyKey.path: "/",
      HTTPCookiePropertyKey.secure: true,
      HTTPCookiePropertyKey.name: "LoginSessionID",
      HTTPCookiePropertyKey.value: "5bd9d8cabc46041579a311230539b8d1"])
    cookieStore.setCookie(cookie!) {
      webView.load(aURLRequest)
    }
    
    // 取得
    cookieStore.getAllCookies() { (cookies) in
      for cookie in cookies {
        // 各cookieの処理
      }
    }
    
    // 削除
    cookieStore.delete(cookie!) {
      webView.load(aURLRequest)
    }
    

    컨텐츠 블록


    Safari의 컨텐츠 블록 확장과 같은 형식입니다.다음과 같은 일을 할 수 있다.
  • 읽기 블록
  • 숨겨진 내용
  • http를 https로 변경하여 읽기
  • JSON 형식의 블록 목록은 천, 만 단위로 상당히 큰 사이즈가 될 수 있지만 바이트 코드는 효율적으로 컴파일되어 사용된다.읽기 시 성능이 저하되지 않습니다.
    swift
    let jsonString = """
    [{
      "trigger": {
        "url-filter": ".*"
      },
      "action": {
        "type": "make-https"
      }
    }]
    """
    
    """ 둘러싸인 부분은 Swift4에 추가된 Multi-line string literals(hia 문서와 비슷한 형식)
    WKContentRuleListStore
    WKContentRuleListStore.default().compileContentRuleList(
      forIdentifier: "ContentBlockingRules",
      encodedContentRuleList: jsonString) { (contentRuleList, error) in
        if let error = error {
          return
        }
    }
    
    컴파일되면 디바이스에 저장된 다음 Identifier를 사용하여 참조합니다.
    WKContentRuleListStore
    WKContentRuleListStore.default().lookUpContentRuleList(forIdentifier: "ContentBlockingRules") {
      (contentRuleList, error) in
      // 一度コンパイルしたルールリストを使用
    }
    
    상세한 상황은 부기를 보십시오.
    iOS11WKWebView에서 광고 등 콘텐츠 블록 만들기

    URL Scheme을 사용하여 사용자 정의 에셋 주입


    터미널 내의 사진 데이터 등을 WKWebView에 주입할 수 있는 기능.

    WKWebView를 사용하여 게임 내의 리소스를 표현하는 것이 쉬워졌습니다.

    비디오 프레젠테이션에서 미리 지정된 URL Scheme 요청이 있으면 포토 라이브러리에서 사진을 선택하고 결과를 데이터 인스턴스로 변환하고 mime type을 지정하는 등 WKWebView에 주입합니다.
    html
    ...
    <body>
      <img src="canineschool-avatar:///photo" class="diploma">
    </body>
    
    WKURLSchemeHandler
    ...
      func setup() {
        let configuration = WKWebViewConfiguration()
        // URL Schemeとハンドラークラスを登録
        configuration.setURLSchemeHandler(ImageSchemeHandler(), forURLScheme: "canineschool-avatar")
    
        let webView = WKWebView(frame: getFrame(), configuration: configuration)
        self.view.addSubview(webView)
        webView.load(URLRequest(url: URL(string: "http://example.com/demoContent")!))
      }
    }
    
    class ImageSchemeHandler : NSObject, WKURLSchemeHandler, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
      var task: WKURLSchemeTask?
    
      ...
    
      func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        task = urlSchemeTask
        // ピッカーを表示して画像を選ぶ処理
      }
      func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
        // キャンセルされたときの処理など
        task = nil
      }
    
      func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        // 画像選択完了
        picker.dismiss(animated: true)
    
        // データ変換&注入
        guard let task = task else { return }
        let image = info[UIImagePickerControllerOriginalImage] as! UIImage
        let data = UIImageJPEGRepresentation(image, 1.0)!
        // response情報とdataの両方を指定
        task.didReceive(URLResponse(url: task.request.url!, 
                               mimeType: "image/jpeg",
                  expectedContentLength: data.count, 
                       textEncodingName: nil))
        task.didReceive(data)
        task.didFinish()
      }
    }
    
    URL Scheme"canineschool-avatar"의 일부는 임의(회사명이나 은행명 등)로, 웹킷이 처리하는 URL Scheme(tel, mailto 등)와는 다른 부분을 지정한다.
    WWDC 애니메이션으로 3차례의 개발자 피드백을 강조했습니다.이번에 이뤄진 3가지 새로운 기능도 상위 3위의 요구사항이다.원하는 기능이 있으면 힘내세요.

    좋은 웹페이지 즐겨찾기