How To Implement In-App Ratings For Ionic 2+ Apps On iOS 10.3+

Since the release of iOS 10.3, it's been possible for developers to ask for reviews directly inside their apps. This means the user never has to leave the app which is a much better user experience than before, where they were had to be sent to the App Store to leave a review.

In this tutorial, I'll show you how to implement this into your Ionic 2+ app with a Cordova plugin. This is going to be a short tutorial because Apple has made it super-easy to implement this, but be sure to check the limitations section at the end of this post.

This tutorial is for Ionic 2+ apps, up-to-date with Ionic 3.5.3.

###Create App We'll start by creating our Ionic 3 app.

$ ionic start ionic3-tutorial-in-app-review blank
$ cd ionic3-tutorial-in-app-review

###Install Cordova Plugin We'll be using this plugin: cordova-plugin-ios-in-app-ratings-and-reviews.

$ ionic cordova plugin add cordova-plugin-ios-in-app-ratings-and-reviews --save

This plugin is very easy to use, it exposes the method requestReview which has no parameters or return value.

For apps that run on Android and older versions of iOS, you can use the App Rate plugin, which was recently updated to support In-App reviews as well.

###Call requestReview Let's add a button in home.html to initiate the request for the review.

<ion-header>
  <ion-navbar>
    <ion-title>
      In-App Review
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="requestReview()">Review Me</button>
</ion-content>

And in the click handler, call requestReview. We need to cast the window object to any so TypeScript won't complain that the plugins property doesn't exist.

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  requestReview() {
    const plugins = (window as any).plugins;

    if (plugins && plugins.InAppRatingsReview) {
      plugins.InAppRatingsReview.requestReview();
    }
  }
}

For tips on when to prompt your users for a review, read these: Apple Human Interface Guidelines for Ratings and Reviews
The right way to ask users to review your app

###Run App on iOS Device You can only test this on an iOS Device or Emulator.

$ ionic cordova run ios

If you're getting this error Error: Cannot read property 'replace' of undefined while trying to run the app, you can fix it by running this command in your project root: cd platforms/ios/cordova && npm install ios-sim.

###Limitations As you can see Apple has made it very easy to implement this feature into your app. However, they've also put some limitations on how often a rating can be requested.

In development mode, the rating view will always be displayed whenever requestReview is called (see Apple docs). But when the app is published, it will only be displayed max. 3 times a year. Once a user has given a rating, they will never see the prompt again.

Before iOS 11, ratings were always for a specific version of an app, so when you updated your app the ratings for the previous versions were lost and you'd have to ask for a rating again.

This will change in iOS 11, ratings will be carried over to updated versions of the app.

The user can completely disable in-app review prompts for all apps in Settings > iTunes & App Stores.

Apple will also disallow custom review prompts in iOS 11, as stated in the App Store Review Guidelines.

Use the provided API to prompt users to review your app; this functionality allows customers to provide an App Store rating and review without the inconvenience of leaving your app, and we will disallow custom review prompts.