Forum› Xamarin.Forms

How to implement WKWebview in xamarin.forms ?

Gandhi_123Gandhi_123 Member ✭✭
in Xamarin.Forms

Hello,

I want to pass one url in my webview. But as IOS appstore gives error so I want to implement WKWebview but I want to know how can implement it? Please help me out its urgent.

Tagged:

Answers

  • JohnHJohnH GBMember ✭✭✭✭✭

    Its not an error, its a warning. And there are many existing threads on the subject.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    You can use WKWebView via Custom Renderer. Create a custom WebView in your PCL and define a bindable property pointing what url should be loaded on iOS.

    public class local : CustomWebView: WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
        propertyName: "Url",
        returnType: typeof(string),
        declaringType: typeof(CustomWebView),
        defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

    CustomRenderer.cs

    [assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace WKWebViewDemo.iOS
{
    public class CustomWebViewRenderer : ViewRenderer<CustomWebView, WKWebView>
    {
        WKWebView wkWebView;
        protected override void OnElementChanged(ElementChangedEventArgs<CustomWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                wkWebView = new WKWebView(Frame, config);
                SetNativeControl(wkWebView);
            }

            if (e.NewElement != null)
            {
                Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
            }
        }
    }
}

    Then se the custom view in page.xaml

    <StackLayout>
    <local:CustomWebView Url="https://www.google.com" VerticalOptions="FillAndExpand"/>
</StackLayout>

    Refer to:
    https://stackoverflow.com/questions/42504016/how-can-i-use-wkwebview-instead-of-uiwebview-in-xamarin-forms-webviewios/42524772

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited November 2019

    @Gandhi_123 Any updates? If you have solved the problem, please mark the helpful solution as answer which will help others who face the similar problem. If you are facing some issues while implementing, try to post the particular error with the corresponding codes here.

  • KhairulFLPMKhairulFLPM Member ✭✭

    IS THERE ANY WAY TO SET ENABLE ZOOM FUNCTION?

    In UIWebView, there's ScalePageToFit to enable zooming.
    Anyone know?

  • Amit_SopinAmit_Sopin Member ✭✭

    For WKWebView , Navigated and navigating methods
    step 1:
    public class ExtendedWebView: WebView
    {
    public ExtendedWebView()
    {
    }

        public static readonly BindableProperty UriProperty = BindableProperty.Create(propertyName: "Uri",
       returnType: typeof(string), declaringType: typeof(ExtendedWebView),
       defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }

    public  event System.EventHandler LoadingStart;
    public event System.EventHandler LoadingFinished;


    public void InvokeCompleted()
    {
        if (this.LoadingFinished != null)
            this.LoadingFinished.Invoke(this, null);
    }

    public void InvokeStarted()
    {
        if (this.LoadingStart != null)
            this.LoadingStart.Invoke(this, null);
    }
}

    .......................
    step -2
    namespace *** .iOS.Renderer
    {
    public class ExtendedWebViewRenderer : ViewRenderer<ExtendedWebView, WKWebView>
    {
    public ExtendedWebViewRenderer()
    {
    }
    WKWebView webView;

        protected override void OnElementChanged(ElementChangedEventArgs<ExtendedWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            webView = new WKWebView(Frame, new WKWebViewConfiguration() { MediaPlaybackRequiresUserAction = false });
            webView.NavigationDelegate  = new DisplayLinkWebViewDelegate(Element);
            SetNativeControl(webView);
        }
        if (e.NewElement != null)
        {
            Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Uri)));
            webView.NavigationDelegate = new DisplayLinkWebViewDelegate(Element);
            SetNativeControl(webView);
        }

        }

}

public class DisplayLinkWebViewDelegate : WKNavigationDelegate
{
    private ExtendedWebView element;


    public DisplayLinkWebViewDelegate(ExtendedWebView element)
    {
        this.element = element;
    }

    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        element.InvokeCompleted();
        //base.DidFinishNavigation(webView, navigation);
    }

    public override void DidStartProvisionalNavigation(WKWebView webView, WKNavigation navigation)
    {
        element.InvokeStarted();
     //   base.DidStartProvisionalNavigation(webView, navigation);
    }

    public override void DidFailNavigation(WKWebView webView, WKNavigation navigation, NSError error)
    {
     //   base.DidFailNavigation(webView, navigation, error);
    }

}

    }
    step 3:
    templates:ExtendedWebView x:Name="extendedWebView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" LoadingStart="ExtendedWebView_LoadingStart" LoadingFinished="ExtendedWebView_LoadingFinished"

  • LijuDanielLijuDaniel Member ✭✭

    POST Request Over Webview
    For WkWebview

    [assembly: ExportRenderer(typeof(PaymentWebview), typeof(PaymentWebViewRenderer))]
    namespace MMFInvestorApp.iOS.Utils
    {
    public class PaymentWebViewRenderer : WkWebViewRenderer
    {
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

            if (NativeView != null)
        {
            var request = new NSMutableUrlRequest(new NSUrl(new NSString(paymentwebview.url))); //Your Url
            request.HttpMethod = "POST";
            request.Body = NSData.FromString(paymentwebview.data); //Data for POST
            request["Content-Length"] = req.Body.Length.ToString();
            request["Content-Type"] = "application/x-www-form-urlencoded charset=utf-8";
            LoadRequest(request);
        }

    }


}

    }

    For UIWebview (Deprecated from April 2020

    [assembly: ExportRenderer(typeof(PaymentWebview), typeof(PaymentWebViewRenderer))]
    namespace MMFInvestorApp.iOS.Utils
    {
    public class PaymentWebViewRenderer : WebViewRenderer
    {
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

            if (NativeView != null)
        {
            var paymentwebview = Element as PaymentWebview;
            var request = new NSMutableUrlRequest(new NSUrl(new NSString(paymentwebview.url)));//Your Url
            request.Body = paymentwebview.data; //Data for POST
            request.HttpMethod = "POST";
            LoadRequest(request);
        }

    }


}

    }

  • Ravinder.3597Ravinder.3597 USMember ✭

    Hello Guys,

    I am facing the same issue so please help me If you have solved the problem, please mark the helpful solution as an answer which will help others who face a similar problem.

    Thanks

  • HirakMakwanaHirakMakwana Member ✭✭

    Hello All,

    It is working for me. But when i use this custom renderer for iOS, Accessibility is stopped working on loaded page in web view. Please help.

Sign In or Register to comment.