What is Capacitor, and where does it fit with Ionic Development?

First Published: 8 August 2018
Updated on: 24 September 2018

“Jorge, what is Capacitor, is it going to replace Cordova?” “Do I need to upgrade my apps now?” Why is the Ionic team making me use this?

These are some of the questions I’ve gotten in the past few weeks from readers, some of them hopeful because they hated working with Cordova, others afraid and even angry thinking someone was going to force them to use this new tool.

Let’s start with understanding a bit more about Capacitor and its role in mobile development.

The website describes it as:

The Native Bridge for Cross-Platform Web Apps.

I think the key is on the “Cross-Platform Web Apps” part, meaning that you can use Capacitor on iOS, Android, Electron, and the Web with one single code base.

For me, the easiest way to “get it” was seeing it as a replacement for Cordova, but with the added benefit of having implementations not only for iOS and Android but also for the web.

So it’s not outrageous to imagine a plugin that you implement once and has APIs to work on all of those platforms without modifying your code. You can read more about it on their website.

Today I’m going to show you how to replace the starter Ionic Native plugins (status bar and splash screen) with Capacitor APIs.

Configuring Capacitor

The first thing we need to do to ‘activate’ capacitor is to enable it through the Ionic CLI, so open your terminal (while inside of the project’s folder) and type:

ionic integrations enable capacitor

It will create the necessary files and install the capacitor packages, one thing to keep in mind, it creates a file called capacitor.config.json where you need to go and edit your appId.

By default, it sets it up to be io.ionic.starter, it’s a good idea to change it to something more on-brand. The usual convention is to go with com.myDomainName.myProjectName so I’ll name it com.javebratt.something.

Before adding the android/ios platforms we need to generate a build of our project or else Capacitor will have unexpected errors. Open your terminal and type:

ionic build

That command will generate a build of our application inside the www/ folder which is the folder Capacitor is watching.

> SIDE-NOTE: That command generates a development build. If you want to generate a production build for your application add the --prod flag.

Now we can add our platforms, you can add either iOS or Android by using the commands:

ionic cap add ios
ionic cap add android

Remember that you need XCode installed on a Mac to build for iOS. Once you add your platforms it’s time to sync them and copy over the build to the platform respective folder. You do that by opening up the terminal and typing:

ionic cap sync

SIDE-NOTE: You have ionic cap copy to copy web assets to the platforms folders, ionic cap update to copy plugin files and ionic cap sync does both. So after an ionic build you just need copy, if you install or uninstall some plugin then update. Thanks to Julio Cesar in the comments for the explanation :-)

Now Capacitor is ready to use, let’s replace the @ionic-native integration for the Status bar and the Splash Screen.

First, we’re going to remove the installed Ionic Native plugins, so open the terminal again and type:

npm rm @ionic-native/core @ionic-native/splash-screen @ionic-native/status-bar

Then, go inside your app.module.ts file and remove all the reference to @ionic-native from there.

Now you can open your app.component.ts, replace all Ionic Native references for the plugins and replace them with the Capacitor ones, it should look like this:

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';

const { SplashScreen, StatusBar } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor() {
    this.initializeApp();
  }

  initializeApp() {
    SplashScreen.hide().catch(error => {
      console.error(error);
    });

    StatusBar.hide().catch(error => {
      console.error(error);
    });
  }
}

We’re importing the plugins and then hiding both the status bar and the splash screen. If there’s an error (like if the app is running on the web so there’s no real SplashScreen implementation) we can handle it gracefully without annoying our users.

Where to go from here?

Capacitor is something new, so the best thing you can do right now is to go to the website and read the docs, play with it, and report any bugs you find or questions you have so that the team can work on making it better :-)

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.