WebView upgrade [IOS] (#5093)

* WebView upgrade [IOS]

* lint fixes

* Content scaling fix
This commit is contained in:
Osei Fortune
2017-12-05 05:52:13 -04:00
committed by Hristo Hristov
parent 53923d34f9
commit 31d10192f5
3 changed files with 74 additions and 65 deletions

View File

@@ -57,17 +57,16 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
// >> (hide) // >> (hide)
let actual; let actual;
let expectedTitle = 'MyTitle'; let expectedTitle = 'MyTitle';
let expectedHtml = '<span style="color:red">TestÖ</span>';
if (webView.ios) { if (webView.ios) {
actual = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim(); actual = webView.ios.title;
} else if (webView.android) { } else if (webView.android) {
actual = webView.android.getTitle(); actual = webView.android.getTitle();
} }
try { try {
TKUnit.assertNull(args.error, args.error); TKUnit.assertNull(args.error, args.error);
TKUnit.assertEqual(actual, webView.ios ? expectedHtml : expectedTitle, "File ~/ui/web-view/test.html not loaded properly."); TKUnit.assertEqual(actual, expectedTitle, "File ~/ui/web-view/test.html not loaded properly.");
done(null); done(null);
} }
catch (e) { catch (e) {
@@ -93,17 +92,16 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) { webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
let actual; let actual;
let expectedTitle = 'MyTitle'; let expectedTitle = 'MyTitle';
let expectedHtml = '<span style="color:red">TestÖ with Spaces</span>';
if (webView.ios) { if (webView.ios) {
actual = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim(); actual = webView.ios.title;
} else if (webView.android) { } else if (webView.android) {
actual = webView.android.getTitle(); actual = webView.android.getTitle();
} }
try { try {
TKUnit.assertNull(args.error, args.error); TKUnit.assertNull(args.error, args.error);
TKUnit.assertEqual(actual, webView.ios ? expectedHtml : expectedTitle, "File ~/ui/web-view/test.html not loaded properly."); TKUnit.assertEqual(actual, expectedTitle, "File ~/ui/web-view/test.html not loaded properly.");
done(null); done(null);
} }
catch (e) { catch (e) {
@@ -129,14 +127,12 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
// >> (hide) // >> (hide)
let actual; let actual;
let expected; const expected = 'MyTitle';
if (webView.ios) { if (webView.ios) {
actual = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim(); actual = webView.ios.title;
expected = '<span style="color:red">TestÖ</span>';
} else if (webView.android) { } else if (webView.android) {
actual = webView.android.getTitle(); actual = webView.android.getTitle();
expected = 'MyTitle';
} }
try { try {

View File

@@ -35,9 +35,9 @@ export class WebView extends View {
android: any /* android.webkit.WebView */; android: any /* android.webkit.WebView */;
/** /**
* Gets the native [UIWebView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/) that represents the user interface for this component. Valid only when running on iOS. * Gets the native [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview/) that represents the user interface for this component. Valid only when running on iOS.
*/ */
ios: any /* UIWebView */; ios: any /* WKWebView */;
/** /**
* Gets or sets the url, local file path or HTML string. * Gets or sets the url, local file path or HTML string.

View File

@@ -1,114 +1,123 @@
import { WebViewBase, knownFolders, traceWrite, traceEnabled, traceCategories, NavigationType } from "./web-view-common"; import { WebViewBase, knownFolders, traceWrite, traceEnabled, traceCategories, NavigationType } from "./web-view-common";
import { profile } from "../../profiling"; import { profile } from "../../profiling";
import { layout } from "../core/view";
export * from "./web-view-common"; export * from "./web-view-common";
class UIWebViewDelegateImpl extends NSObject implements UIWebViewDelegate { class WKNavigationDelegateImpl extends NSObject
public static ObjCProtocols = [UIWebViewDelegate]; implements WKNavigationDelegate {
public static ObjCProtocols = [WKNavigationDelegate];
public static initWithOwner(owner: WeakRef<WebView>): WKNavigationDelegateImpl {
const handler = <WKNavigationDelegateImpl>WKNavigationDelegateImpl.new();
handler._owner = owner;
return handler;
}
private _owner: WeakRef<WebView>; private _owner: WeakRef<WebView>;
public static initWithOwner(owner: WeakRef<WebView>): UIWebViewDelegateImpl { public webViewDecidePolicyForNavigationActionDecisionHandler(webView: WKWebView, navigationAction: WKNavigationAction, decisionHandler: any): void {
let delegate = <UIWebViewDelegateImpl>UIWebViewDelegateImpl.new(); const owner = this._owner.get();
delegate._owner = owner; if (owner && navigationAction.request.URL) {
return delegate;
}
public webViewShouldStartLoadWithRequestNavigationType(webView: UIWebView, request: NSURLRequest, navigationType: number) {
let owner = this._owner.get();
if (owner && request.URL) {
let navType: NavigationType = "other"; let navType: NavigationType = "other";
switch (navigationType) { switch (navigationAction.navigationType) {
case UIWebViewNavigationType.LinkClicked: case WKNavigationType.LinkActivated:
navType = "linkClicked"; navType = "linkClicked";
break; break;
case UIWebViewNavigationType.FormSubmitted: case WKNavigationType.FormSubmitted:
navType = "formSubmitted"; navType = "formSubmitted";
break; break;
case UIWebViewNavigationType.BackForward: case WKNavigationType.BackForward:
navType = "backForward"; navType = "backForward";
break; break;
case UIWebViewNavigationType.Reload: case WKNavigationType.Reload:
navType = "reload"; navType = "reload";
break; break;
case UIWebViewNavigationType.FormResubmitted: case WKNavigationType.FormResubmitted:
navType = "formResubmitted"; navType = "formResubmitted";
break; break;
} }
decisionHandler(WKNavigationActionPolicy.Allow);
if (traceEnabled()) { if (traceEnabled()) {
traceWrite("UIWebViewDelegateClass.webViewShouldStartLoadWithRequestNavigationType(" + request.URL.absoluteString + ", " + navigationType + ")", traceCategories.Debug); traceWrite("WKNavigationDelegateClass.webViewDecidePolicyForNavigationActionDecisionHandler(" + navigationAction.request.URL.absoluteString + ", " + navigationAction.navigationType + ")", traceCategories.Debug);
} }
owner._onLoadStarted(request.URL.absoluteString, navType); owner._onLoadStarted(navigationAction.request.URL.absoluteString, navType);
}
return true;
}
public webViewDidStartLoad(webView: UIWebView) {
if (traceEnabled()) {
traceWrite("UIWebViewDelegateClass.webViewDidStartLoad(" + webView.request.URL + ")", traceCategories.Debug);
} }
} }
public webViewDidFinishLoad(webView: UIWebView) { public webViewDidStartProvisionalNavigation(webView: WKWebView, navigation: WKNavigation): void {
if (traceEnabled()) { if (traceEnabled()) {
traceWrite("UIWebViewDelegateClass.webViewDidFinishLoad(" + webView.request.URL + ")", traceCategories.Debug); traceWrite("WKNavigationDelegateClass.webViewDidStartProvisionalNavigation(" + webView.URL + ")", traceCategories.Debug);
} }
let owner = this._owner.get(); };
public webViewDidFinishNavigation(webView: WKWebView, navigation: WKNavigation): void {
if (traceEnabled()) {
traceWrite("WKNavigationDelegateClass.webViewDidFinishNavigation(" + webView.URL + ")", traceCategories.Debug);
}
const owner = this._owner.get();
if (owner) { if (owner) {
webView.evaluateJavaScriptCompletionHandler("document.body.height",(val,err)=>{
console.log(val);
});
let src = owner.src; let src = owner.src;
if (webView.request && webView.request.URL) { if (webView.URL) {
src = webView.request.URL.absoluteString; src = webView.URL.absoluteString;
} }
owner._onLoadFinished(src); owner._onLoadFinished(src);
} }
} }
public webViewDidFailLoadWithError(webView: UIWebView, error: NSError) { public webViewDidFailNavigationWithError(webView: WKWebView, navigation: WKNavigation, error: NSError): void {
let owner = this._owner.get(); const owner = this._owner.get();
if (owner) { if (owner) {
let src = owner.src; let src = owner.src;
if (webView.request && webView.request.URL) { if (webView.URL) {
src = webView.request.URL.absoluteString; src = webView.URL.absoluteString;
} }
if (traceEnabled()) { if (traceEnabled()) {
traceWrite("UIWebViewDelegateClass.webViewDidFailLoadWithError(" + error.localizedDescription + ")", traceCategories.Debug); traceWrite("WKNavigationDelegateClass.webViewDidFailNavigationWithError(" + error.localizedDescription + ")", traceCategories.Debug);
}
if (owner) {
owner._onLoadFinished(src, error.localizedDescription);
} }
owner._onLoadFinished(src, error.localizedDescription);
} }
} }
} }
export class WebView extends WebViewBase { export class WebView extends WebViewBase {
private _ios: UIWebView; private _ios: WKWebView;
private _delegate: any; private _delegate: any;
constructor() { constructor() {
super(); super();
const configuration = WKWebViewConfiguration.new();
this.nativeViewProtected = this._ios = UIWebView.new(); this._delegate = WKNavigationDelegateImpl.initWithOwner(new WeakRef(this));
this._delegate = UIWebViewDelegateImpl.initWithOwner(new WeakRef(this)); const jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'initial-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);";
const wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript,WKUserScriptInjectionTime.AtDocumentEnd,true);
const wkUController = WKUserContentController.new();
wkUController.addUserScript(wkUScript);
configuration.userContentController = wkUController;
configuration.preferences.setValueForKey(
true,
'allowFileAccessFromFileURLs'
);
this.nativeViewProtected = this._ios = new WKWebView({
frame: CGRectZero,
configuration:configuration
});
} }
@profile @profile
public onLoaded() { public onLoaded() {
super.onLoaded(); super.onLoaded();
this._ios.delegate = this._delegate; this._ios.navigationDelegate = this._delegate;
} }
public onUnloaded() { public onUnloaded() {
this._ios.delegate = null; this._ios.navigationDelegate = null;
super.onUnloaded(); super.onUnloaded();
} }
get ios(): UIWebView { get ios(): WKWebView {
return this._ios; return this._ios;
} }
@@ -117,7 +126,11 @@ export class WebView extends WebViewBase {
} }
public _loadUrl(src: string) { public _loadUrl(src: string) {
this._ios.loadRequest(NSURLRequest.requestWithURL(NSURL.URLWithString(src))); if(src.startsWith('file:///')){
this._ios.loadFileURLAllowingReadAccessToURL(NSURL.URLWithString(src), NSURL.URLWithString(src));
}else{
this._ios.loadRequest(NSURLRequest.requestWithURL(NSURL.URLWithString(src)));
}
} }
public _loadData(content: string) { public _loadData(content: string) {