iOS

Ionic 7 framework is here!

Ionic 7 is the latest and greatest version of the popular mobile app development framework. It’s so good, it’ll make you want to put on your favorite coding socks and dance around your computer like nobody’s watching.

But in all seriousness, Ionic 7 offers some fantastic benefits over its older versions. Its improved performance will have your app running like a well-oiled machine, or at least like a machine that’s had a few cups of coffee in the morning. And with the updated design system, your app will look so good it’ll make your users wonder why they ever bothered with other apps in the first place.

And let’s not forget Capacitor 3, the native runtime that allows developers to build cross-platform mobile apps using web technologies. It’s like having a magical wand that can turn your web app into a mobile app with just a few flicks of your wrist.

But upgrading to Ionic 7 isn’t just a walk in the park, it’s more like a marathon. You’ll need to update your dependencies, configuration files, and code. It’s enough to make a developer break out in a cold sweat, or at least reach for the coffee (or energy drink) to power through.

But fear not, intrepid developer! Once you’ve upgraded and tested your app, you can sit back and relax knowing that you’ve done your part to keep up with the latest and greatest in mobile app development. And who knows, maybe your app will become the next big thing and you’ll be able to retire to a tropical island with nothing but your laptop and a good book (or maybe just a good IDE).

So what are you waiting for? Upgrade to Ionic 7 and start building mobile apps that will make your users say “Wow, this app is so great I want to give the developers a hug… or at least a virtual high-five.”

Benefits of Upgrading to Ionic 7

Upgrading your Ionic app to version 7 offers several benefits:

  • Improved Performance: Ionic 7 comes with a faster rendering engine and improved performance optimizations that can significantly improve the speed of your app.
  • Updated Design System: The new version of Ionic features an updated design system that provides a more modern and polished look for your app. It also comes with new UI components that can enhance the user experience of your app.
  • Support for Modern Web Platform Features: Ionic 7 is built on top of the latest web technologies, which means that it comes with support for modern web platform features such as CSS grid, CSS variables, and more.
  • Bug Fixes and Security Improvements: Upgrading to Ionic 7 ensures that your app benefits from the latest bug fixes and security improvements.

To upgrade your Ionic app to version 7, follow these simple steps:

  1. Check Compatibility: Before upgrading, check the Ionic documentation to ensure that your existing app is compatible with version 7.
  2. Update Dependencies: Use the npm-check-updates tool to update your project’s dependencies to the latest version of Ionic.
  3. Update Configuration Files: Update your project’s configuration files, such as package.json and angular.json, to reflect the changes in version 7.
  4. Update Code: Update your app’s code to use the new APIs and components introduced in Ionic 7.
  5. Test Your App: After updating your code, test your app thoroughly to ensure that it works as expected.
  6. Deploy Your App: Once you have updated and tested your app, deploy it to your production environment.

By upgrading your Ionic app to version 7, you can take advantage of these benefits and build high-quality mobile apps using web technologies.

  • Ionic Academy – A comprehensive collection of Ionic tutorials ranging from beginner to advanced levels.
  • Official Ionic Docs – The official documentation for Ionic 6, covering everything from installation to advanced topics.
  • Simon Grimm’s Tutorials – A series of Ionic 6 tutorials by Simon Grimm, covering a range of topics from beginner to advanced.
  • Josh Morony’s Tutorials – A collection of Ionic 6 tutorials by Josh Morony, with a focus on practical examples and real-world use cases.
  • Angular Firebase’s Tutorials – A set of tutorials on building Ionic 6 apps with Firebase integration by Angular Firebase.
  • Javabrains’ Tutorials – A series of video tutorials covering the basics of Ionic 6 by Javabrains.

Implement App Tracking Transparency for Ionic Angular and Cordova iOS app

How to use the https://github.com/chemerisuk/cordova-plugin-idfa plugin in Ionic v3.

I had some issues using the example provided so I had to call the exec directly:

// first install the plugin
// cordova plugin add cordova-plugin-idfa
// npm i cordova-plugin-idfa --save

// add permissions to config.xml under ios platform
<platform name="ios">
    <edit-config target="NSUserTrackingUsageDescription" file="*-Info.plist" mode="merge">
        <string> My tracking usage description </string>
    </edit-config>
</platform>


// has to be called after platform is ready
// this.platform.ready().then(() => {}

askTrackingPermission() {
    if (this.platform.is('cordova') && this.platform.is('ios')) {

      if (window.cordova) {
        console.log('trying to request permission ');
        window.cordova.exec(win, fail, 'idfa', "requestPermission", []);
      }
    }

    function win(res) {
      console.log('success ' + JSON.stringify(res));
    }
    function fail(res) {
      console.log('fail ' + JSON.stringify(res));
    }
  }

readTrackingPermission() {

    if (this.platform.is('cordova') && this.platform.is('ios')) {

      if (window.cordova) {
        window.cordova.exec(win, fail, 'idfa', "getInfo", []);
      }
    }

    function win(res) {
      console.log('success  ' + JSON.stringify(res));
    }
    function fail(res) {
      console.log('fail ' + JSON.stringify(res));
    }
  }

Also, you can only test this from the iOS simulator (or device) running 14.5.1+ iOS. In your iOS device settings check privacy->tracking (setting) it has to be allowed to ask. And you will only be able to ask the user once.

Good luck!

iOS Deprecated API Usage Warning Ionic using UIWebView

Apple will no longer support web apps that use UIWebView. The apps and libraries need to be migrated to use WkWebView.

The latest Ionic already uses WkWebView, but several Cordova plugins still rely on UIWebView which is a problem.

https://ionicframework.com/docs/v3/wkwebview/

If you’re using Ionic you need to upgrade to iOS Cordova 5

cordova platform remove ios
cordova platform add ios@5.0.0

Also you might need to remove additional plugins that use UIWebView such as inappbrowser. 

cordova plugin rm cordova-plugin-inappbrowser

More information about the breaking changes can be found here:

https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

How to Use iOS GameCenter Leaderboards in Unity3d

You need to setup your app on the appstore connect first with the appropriate leaderboard. And you can only test this code on the iOS device and not in the unity3d player.


using UnityEngine.SocialPlatforms;

  private ILeaderboard leaderboard;
  private string leaderboard_id = "yourleaderboardid"; // setup on appstore connect

 void Start()
 {

    // Authenticate user first
        Social.localUser.Authenticate(success => {
            if (success)
            {
                Debug.Log("Authentication successful");
                string userInfo = "Username: " + Social.localUser.userName +
                    "\nUser ID: " + Social.localUser.id +
                    "\nIsUnderage: " + Social.localUser.underage;
                Debug.Log(userInfo);
            }
            else
                Debug.Log("Authentication failed");
        });

  // create social leaderboard
        leaderboard  = Social.CreateLeaderboard();
        leaderboard.id = leaderboard_id;
        leaderboard.LoadScores(result =>
        {
            Debug.Log("Received " + leaderboard.scores.Length + " scores");
            foreach (IScore score in leaderboard.scores)
                Debug.Log(score);
        });
  }

  void ReportScore(long score, string leaderboardID)
  {
        Debug.Log("Reporting score " + score + " on leaderboard " + leaderboardID);
        Social.ReportScore(score, leaderboardID, success => {
            Debug.Log(success ? "Reported score successfully" : "Failed to report score");
        });
  }

 void OpenLeaderboard()
 {
        Social.ShowLeaderboardUI();
 }

How To Open Chrome Device Debugger?

Last night I was trying to open the chrome debugger for an ionic app running on my ios device but could not remember the URL. This was a very simple thing but was nearly impossible to discover on the internet for some reason…

To do this: Open Chrome Browser and type chrome://inspect/ in the url field.

I don’t know why Chrome and Google make this so hard to discover.

How to Hide Specific Ionic Tabs in Angular

How to Hide Specific Ionic Tabs in Angular? It turns out ionic does not support this functionality by default although I think it should, but luckily it’s not that complicated.

Here are the 3 simple steps:

1. In your tabs.html add this ng-class

<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">

</ion-tabs>

2. Add ‘hide-tabs’ in your views where you want to hide the tabs

<ion-view hide-tabs> 

</ion-view>

3. In your app.js add the directive to hide tabs

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
            });
        }
    };
})

The hide-tabs directive will hide the tab on whichever ion-view you set it to.

iTunes Apple Music Confusing Tabs Layout

New iTunes has a lot of new problems since they added “apple music”. My biggest issue is that I don’t know which one of the main tabs I should use to search “Apple Music”. I guess there is no difference between the first 6, they all let you search for your music as well as “apple music”. But if you use “iTunes Store” tab it doesn’t let you search “apple music” or give you an explanation why.

Screen Shot 2015-07-16 at 11.02.19 PMIf it doesn’t find it in my music it should automatically search “apple music” especially since I’m a subscriber. But instead it offers me a link to search the iTunes store to purchase the music…awesome.

Screen Shot 2015-07-16 at 10.59.55 PM

If you do happen to search the store for Drake for example you’ll get to an artist page that will not let you stream the music you’re subscribed to. You have to leave and do another search on any of the other 6 tabs which you can pick randomly I guess. Also, tabs in popups? Wow. Awesome.

Screen Shot 2015-07-16 at 10.57.37 PM

If you click play on this page you only get 90 seconds of each song. Why would I wanna buy a song if I’m an apple music subscriber? Oh, to burn a CD I guess…