Tips for Ionic App to perform better in iOS
Ionic

Tips for Ionic App to perform better in iOS

While developing Ionic 2/3 app and testing on iPhones, many of us have ever faced slow or laggy performance. We feel that our app working lightning fast on Android but what the hell with iOS, even we already considered the 300ms delay in code? So here are some tips which can help you make it perform better in iOS platform.

1) Inline templates

This trick makes the code ugly but this really works like a charm. As suggested by Ionic development team we should use it. Writing code in inline templates, it remove the requirements of extra header request and so make the app slightly fast and render the view faster as compare to external template.

2) Always use Virtual scroll in lists

This will maintain the DOM and won’t let it big, doesn’t matter how much the data in list is. ALSO, if you have too much data to show then rather then bringing it at the same time, use load on demand trick. Will write in detail about it in my next post.

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;ion-list [virtualScroll]="items"&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
  &amp;amp;amp;lt;ion-item *virtualItem="let item"&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
    {{ item }}&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
  &amp;amp;amp;lt;/ion-item&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;/ion-list&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

3) Tappable

On the tap of lists, you have to tap more than one time? Perhaps you forgot to add “tappable” attribute on list. Never forget to add this attribute, this will make sure that a single tap execute the required action on list.

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;ion-item (click)=”dosomething()”&amp;amp;amp;gt; My Name &amp;amp;amp;lt;/ion-item&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;ion-item tappable (click)=”dosomething()”&amp;amp;amp;gt; My Name &amp;amp;amp;lt;/ion-item &amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

4) WKWebView

Use WKWebView component instead of the default UIWebView component.
CAUTION:
This plugin makes Cordova use the WKWebView component instead of the default UIWebView component, and is installable only on a system with the iOS 9.0 SDK.

In iOS 9, Apple has fixed the issue present through iOS 8 where you cannot load locale files using file://, and must resort to using a local webserver. However, you are still not able to use XHR from the file:// protocol without CORS enabled on your server. SO, write inline templates.
Installation:

ionic plugin install cordova-plugin-wkwebview-engine --save   

Use below code in config.xml in order to work the plugin.

&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;allow-navigation href="http://localhost:8080/*"/&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;feature name="CDVWKWebViewEngine"&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
  &amp;amp;amp;lt;param name="ios-package" value="CDVWKWebViewEngine" /&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;/feature&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>
&amp;amp;amp;lt;preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /&amp;amp;amp;gt;&amp;amp;lt;br&amp;amp;gt;&amp;lt;br&amp;gt;&lt;br&gt;<br>

When you are going to create an ipa, use these tips to achieve real native app experience with Ionic.

All above tips except #4 are applicable on Android also.

Tips for Ionic App to perform better in iOS

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top