Skip to main content

WKWebView for All: A new webview for Ionic

In iOS, there have been two webviews for a few years now, UIWebView and WKWebView. Historically, Ionic apps have used
UIWebView, but no longer. Ionic now uses WKWebview by default when building for iOS.

We strongly believe WKWebview is the best option for any app, as it features many improvements over the older, legacy
webview (UIWebView). These features include:

1. JIT conversion of JS code down to machine code, which runs much faster
2. Improved rendering performance
3. Less memory consumption
4. Better adherence to web standards
5. Reliable scroll events (important for virtual-list)

We wanted to make sure that people could easily switch to WKWebView without many issues, but there are still some things that you’ll need to consider.

Update Ionic CLI
WKWebView plugin needs latest Ionic CLI in order to work properly.
Please make sure that your global CLI is using the latest 3.x release. If not, please upgrade:
npm uninstall -g ionic
npm install -g ionic

 Upgrading to WKWebView (UIWebView users only)
Update all plugins of your Application with latest Version of these Plugins
Especially Ionic Webview plugn By Using this command
ionic cordova plugin add cordova-plugin-ionic-webview --save

App data is not copied over

I just migrated from UIWebView to WKWebView and the storage data looks lost.

Since WKWebView is essentially a new browser, any data that you could have in LocalStorage or IndexDB will not be copied over. In this case, migrating data to a native storage mechanism, SQLite, is suggested to make sure that the data will still be available.
We strongly recommend to use the ionic-storage package which abstracts aways most of the problems with persistent storage.

 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:
rm -rf platforms
rm -rf plugins
Add the platform back
ionic cordova platform add ios
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" />
Build ionic ios
ionic cordova build ios

Open Xcode and try to build again




Comments

  1. HiranurAugust 26, 2023 at 3:28 AM

    Switching to WKWebView from the conventional WebView in Ionic enhances app performance and compatibility. How Win Game WKWebView offers improved rendering speed and modern web standards support.

    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 . set...
1 comment
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 dependenc...
2 comments
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" ); ...
3 comments
Read more