Ionic platform.ready() method is needed

Question

I have a basic question about platform.ready().then(() => {}) method.Do we need to use this method each and every time when we use a native plugin? Like Status bar or LocalStorage or etc?

Is that not enough if we use above method only inside the app.component.ts file hence it is the root component? After this root component hope platform is ready for all the other subsequent components no? Then why do we need to use ready method each and every other child components too? Because I have seen so many articles and videos where it uses if there is any native plugin.Hope this is not needed no?

On this official doc where you can see that it uses inside the child component too no? Your thoughts? platform.ready().then(() => {})

Solution

platform.ready() is a promise that resolves once your device/native plugins are ready.

Let's look at the ionic sidemenu starter template https://github.com/ionic-team/ionic2-starter-sidemenu/blob/master/src/app/app.component.ts.

As you can see in the app.component.ts on line 15 the rootPage gets set and will get loaded as soon as possible. In the constructor this.initializeApp(); calls

this.platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

As with every promise in javascript, you can't tell when it resolves. And as you can see in the code, the ionic-app does not "wait" for the platform to be ready. Only the statusBar.styleDefault() and splashScreen.hide() calls wait for that promise.

Let's say it takes a very long time for the promise to be resolved, for example 5 seconds.

If you have any ionic-native code in your HomePage, any providers that you use inside app.component.ts or any other page (because the user could already navigate around the app during that time), the ionic-native call will fail because the platform is not ready yet.

As an example:

 constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private: qrScanner: QrScanner) {
      this.initializeApp();

      this.qrScanner.scan(); // Let's assume this is a provider we made to start a QR scanner. It will try to load the scanner immediately, regardless of the state of the platform.ready() promise. So if the platform is not ready, it will crash.

      // used for an example of ngFor and navigation
      this.pages = [
        { title: 'Home', component: HomePage },
        { title: 'List', component: ListPage }
      ];

  }

This means that in theory, you should always use this.platform.ready() when using native plugins to make sure the platform is available. In practice it really depends on the specific case because often the platform is ready very fast and you won't notice any difference if you don't use it. But if you want to be sure, you should use it everywhere.

Comments

[Sampath]

No.Do you have an info about use it only inside the root component (i.e. app.component.ts)? @ChristianBenseler

[Sampath]

What if I use async/await pattern with that promise inside the root component?

[Andreas Gassmann]

If you use async/await for that promise then all the ionic-native code that follows would be fine. But: rootPage = HomePage still happens outside that async/await function, so everything there could still crash because async/await does not stop the entire javascript code from executing. To solve that you can assign the rootPage inside/after platform.ready(). But that would block your entire app which I would not recommend.

[ahmednabil88]

The summary, inside app.component.ts, the code does not "wait" for the platform to be ready