Skip to main content

Steps to Add WKWebview in an Existing Ionic 3 and Ionic 4 Application

 On December 23rd, 2019, Apple clarified plans for UIWebView: “The App Store will no longer  accept new apps using UIWebView as of April 2020 and app updates using UIWebView as of December 2020.” Please follow the instructions below to either update to a newer version of Cordova or migrate to Capacitor.
So there some simple steps to add WKWebview in an existing Ionic 3 and Ionic 4 Application.
1. First make sure Ionic/cli is not less than 3.If you have ionic/cli version less than 3 please update it        3.x or greater any version is ok no need to update it.
2. You need to Update your Cordova from existing version to minimum version (Cordova 9.0.0 )   
3.  Update Your all plugins which are installed in you Application with Latest version .Because the          older version of cordova plgins uses UIWebview.
4. Run these command to Update your ionic-webview plugin
ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview
5. If you are using InAppBrowser plugin in your Application. Make sure its version greater than 3.2.0
    Because this version use WKWebview not UIWebView.
   Now it's time to add WkWebview externally in our existing Application (All latest version of               cordova plugin uses WKWebview but some plugins having UIWebview refrences. So, that's
   why we need to add WKWebview externally.
  Add these links in Your Config.xml file inside <platform name ="ios>  Tag
  Make sure localhost is allowed:

<allow-navigation href="http://localhost:8080/*"/>

Make sure WKWebView is the default engine:
<feature name="CDVWKWebViewEngine"><param name="ios-package" value="CDVWKWebViewEngine" /></feature><preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /><preference name="WKWebViewOnly" value="true" /> Run this command after complete this stepionic cordova prepare ios
First remove cordova ios
ionic cordova platform remove ios
Add cordova for ios
ionic cordova platform add ios@5.1.0
My app does not load, white screen
I don’t have any error in my code, but still I get a blank screen
Most of the time, this kind of problems come from an incorrect installation of the Cordova platform:
Ensure Xcode is closed
Clean install:
ionic cordova platform remove ios 
rm -rf platforms 
rm -rf plugins  
Add the platform back
ionic cordova plugin plugin add ios@5.1.0
Why we use cordova-ios@5.1.0  specific version for codova for ios Build.
The most notable improvements in this minor release are:
  • The ability to disable UIWebView during the compile-time.
  • Avoid locking when adding platforms on a non-synced pods repo. (CocoaPods >=1.8.0)
  • Bumped the minDeploymentTarget to 10.0 in Podfile.
That's all guy's .Hopefully this post is helpfull for you. If you have any problem regarding this post.Please comment on it .Thank's


If you need professional help for your project do let us know. 
You can directly contact us on developers.omitech@gmail.com

Comments

  1. HiranurAugust 26, 2023 at 3:17 AM

    Adding WKWebView to an existing app involves several steps. Begin by importing the necessary framework and configuring the WKWebView instance. How Use VPN Then, integrate it into your app's view hierarchy and handle its navigation and interaction logic.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to align Title at center of ActionBar in Android

How to Align Title At Center of Action Bar in Android                                                                                                                                                @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setTitle("DashBoard"); }   Activity  public void setTitle ( String title ){ getSupportActionBar (). setHomeButtonEnabled ( true ); getSupportActionBar (). setDisplayHomeAsUpEnabled ( true ); TextView textView = new TextView ( this ); textView . setText ( title ); textView . setTextSize ( 20 ); textView . setTypeface ( null , Typeface . BOLD ); textView . setLayoutParams ( new LinearLayout . LayoutParams ( LinearLayout . LayoutParams . FILL_PARENT , LinearLayout . LayoutParams . WRAP_CONTENT )); textView . setGravity ( Gravity . CENTER ); textView . setTextColor ( getResources (). ge
1 comment
Read more

Difference Between Pending Intent And Intent in Android

                       Normal Intent       Normal Intent will die as soon as the app being killed.    An Android Intent is an object carrying an intent, i.e a message from one Component to another     Component either inside or outside of the application.Intent can communicate message among     any of the three core Components of an application -- Activities, Services,and BroadcastReceivers.     Two types of Intent in Android   1. Explicit Intent.   2.Implicit Intent  Explicit Intent is an Intent which is used to Call the another component Explicitly in your application  Like :We are calling  Next activity on button click of First activity using Intent Example  // Explicit Intent by specifying its class name Intent i = new Intent ( this , TargetActivity . class ); i . putExtra ( "Key1" , "ABC" ); i . putExtra ( "Key2" , "123" ); // Starts TargetActivity startActivity ( i );  Implicit Intent Intent
3 comments
Read more

Expected a key while parsing a block mapping (Flutter)

Flutter makes use of the Dart packaging system, pub. Via your applications  pubspec.yam l file (or simple pubspec), you can pull down packages from the flutter ecosystem, or the broader dart community. Anyway, i need to add some images to my flutter application, and so had to add an assets section to the pubspec .the default Android Studio generated apps pubspec has a lot of commented out code with explainations about what is going on, e.g # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.io/assets-and-images/#resolution-aware. So I uncommented these lines # assest : - - - #  -  images/a_dot_ham.jpeg with the idea from these comment.  that i would just edit it to suit my particular needs. Once you have edited your  pubspec, you need to click on the "Get dependencies"
2 comments
Read more