iOS-優雅な理解WKWebView

8435 ワード

一.背景紹介
UIWebViewはiOS 2からあり、iOS 8にはWKWebViewが登場し、WKWebViewが重いUIWebViewに取って代わることは間違いない.いくつかのテストでは、UIWebViewがメモリを消費しすぎ、メモリのピークが誇張されていることがわかりました.しかし、次世代のWKWebViewWebページのロード速度もさらに向上しています.
以下に、いくつかのメリットを簡単に列挙します.

より多くのHTML 5をサポートする機能

公式に発表された60 fpsまでのスクロールリフレッシュ率と内蔵ジェスチャー

Safari同じJavaScriptエンジン

UIWebViewDelegateとUIWebViewを14クラスと3つのプロトコル

に分割

別途使用することが多く、ロード進捗属性を追加する:estimatedProgress

公式ドキュメントの説明
Demoアドレス
二.UIWebViewの簡単な説明
UIWebViewは詳しくは説明しないが、HTMLページをロードするだけでなく、pdf、word、txt、各種画像などの表示もサポートしている.ここでエージェントプロトコルはUIWebViewDelegateを使用し,もう一つの補足点はJSインタラクションについてである.

js実行OCコード:

jsはocコードを実行することはできませんが、相を変えて実行することができます.jsは実行する操作をネットワーク要求にカプセル化し、ocはこの要求をブロックし、urlの文字列解析を取得すればいいです.ここではエージェントプロトコルの

に使用します.

(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebView NavigationType)navigationType関数.

oc書き上げたjsコード

を呼び出す


 //       js  , htmlLocationID      ( js      )，        ，              
 NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
 // webview    
 [self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];
 //      title
 NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]

三.WKWebView使用
きほんしよう
先にインポート:#import
次のコードは、WKWebViewの簡単な表示


 //1.  webView
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
 //2.    
 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
 //3.    
 [webView loadRequest:request];
 //4.     
 [self.view addSubview:webView];

を示しています.
ユーティリティ関数

(nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));

(WKNavigation *)loadRequest:(NSURLRequest *)request;

(WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

(WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;

Webナビゲーション関連関数のリフレッシュ
UIWebviewとほぼ同じで、異なるのは戻り値、WKNavigation(更新済み)、さらに関数reloadFromOriginとgoToBackForwardListItemを追加したことです.

reloadFromOriginは、ネットワークデータが変化しているかどうかを比較し、変化していない場合はキャッシュを使用します.そうしないと、新しいリクエストから使用されます.

goToBackForwardListItem:前より後ろよりも強く、指定した履歴ページ

にジャンプできます.


 @property (nonatomic, readonly) BOOL canGoBack;
 @property (nonatomic, readonly) BOOL canGoForward;

(WKNavigation *)goBack;

(WKNavigation *)goForward;

(WKNavigation *)reload;

(WKNavigation *)reloadFromOrigin;//増加関数

(WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item;//増加関数

(void)stopLoading;

関連クラスの紹介


 WKBackForwardList:        web      ，               。
 WKBackForwardListItem: webview             。
 WKFrameInfo:            。
 WKNavigation:              。
 WKNavigationAction:               ，            。
 WKNavigationResponse:                   ，            。
 WKPreferences:      webview      。
 WKProcessPool:      web      。
 WKUserContentController:      JavaScript post       script    。
 WKScriptMessage:          。
 WKUserScript:               。
 WKWebViewConfiguration:     webview    。
 WKWindowFeatures:              。 
 WKWebsiteDataStore:website          ，  ：cookies, disk and memory caches, and persistent data such as WebSQL,IndexedDB databases, and local storage 
 WKWebViewConfiguration:webview

エージェントプロトコル

WKNavigationDelegate

このエージェントが提供する方法は、ロードプロセス(ページのロード開始、ロード完了、ロード失敗)を追跡し、ジャンプを実行するかどうかを決定するために使用できます.


 // 2.

(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;//3.コンテンツが戻り始めると

が呼び出される.

(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;//4.ページ読み込み完了後に呼び出す

(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;//ページのロードに失敗したときに呼び出される

(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

ページジャンプのエージェントメソッドは3つあります(ジャンプを受信するかどうかとジャンプするかどうかを決定する2つ)

//

(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;//3.応答を受信後、

をスキップするか否かを決定する.

(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;//1.要求を送信する前に、

をスキップするか否かを決定する.

(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

数値は、正しくロードされたときの呼び出し順序を示します.

WKUIDelegate

UIインタフェース関連、オリジナルコントロールサポート、3つのヒントボックス:入力、確認、警告.まずwebプロンプトボックスをブロックしてから処理します.


 ///       WebView

(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;///入力ボックス

(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;///確認ボックス

(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;///警告ボックス

(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

WKScriptMessageHandlerこのプロトコルには、受信したJSスクリプトをOCまたはSwiftオブジェクトに直接転送できる、Appとweb側のインタラクションを向上させるための重要な方法が含まれています.


 /// message:        .

(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

注意事項

1.スレッドが安全でないのは、アップルのドキュメント


 Concurrency Note
 The WebKit framework is not thread-safe. If you call functions or methods in this framework, you must do so exclusively on the main program thread.

から来ています.
WKWebViewアプリケーション
1.docunmentの変更


 WKUserContentController *wkuserCVC = [[WKUserContentController alloc]init];
 WKUserScript *script = [[WKUserScript alloc]initWithSource:@"js code" injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
 [wkuserCVC addUserScript:script];

2.Webコンテンツのロードの進捗状況をリスニングし、ロードが完了したかどうかを確認する
WKWebViewには、ロードの進捗状況であるプロパティestimatedProgressがあります.この属性値の変化をKVOで傍受することで,ロードの進捗状況を示すことができる.


 [self.webview addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

3.ドメイン間問題
ドメイン間問題は、

で手動でジャンプできます.

(void)webView:(WKWebView*)web View decidePolicyForNavigationAction:(WKNavigationAction*)navigationActiondecisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{//ここでブロック判定}

補足:HTML 5のパフォーマンスデータの理解

ホワイトスクリーン時間

ホワイトスクリーンの時間はアンドロイドでもiOSでもWebページをロードする際に存在する問題であり、現在解決できない問題である.

ページ消費時間

ページ消費時間とは、ページ全体のloadが完了するとレンダリングが完了するまで、このページをロードし始める時間です.

リンクをロードするいくつかのパフォーマンスデータ

リダイレクト時間、DNS解析時間、TCPリンク時間、request要求時間、response応答時間、domノード解析時間、pageレンダリング時間、リソースタイミングデータをキャプチャする必要があります.
リソースタイミングデータとは?
各ページには多くのリソースが構成されています.js、.png、.css、.scriptなど、これらの各リソースリンクの時間を費やして、どのようなタイプのリソース、完全なリンクなのかを手に入れる必要があります.お客様にとっては、これらが十分ではありません.JSエラー、ページのajaxリクエストも必要です.JSエラーはもちろんスタック情報とエラータイプを取得します.ajaxリクエストは、一般に、3つの時間、応答時間、ajaxダウンロード時間、ajaxコールバック時間を取得する.
Demoアドレス

promiseのfinallyメソッド

Cocos 2 d-HTML 5開発デバッグ環境の迅速な構築0