Capacitor

Search…
Capacitor
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.
From 07-05-2021 this project uses Capacitor 3.
We strongly recommend to use Capacitor. However, if you are not ready yet, don't worry, you can still use Cordova. 
How to use Capacitor to deploy your apps?
The Capacitor workflow involves a few consistent tasks:
​Develop and build your Web App​
​Sync your project​
​Run your project​
​Periodic Maintenance​
iOS Platform
This app has an iOS folder which contains the iOS native app. Read how to build this app for iOS.
Android Platform
This app has an Android folder which contains the Android native app. Read how to build this app for Android.
How to build the project with Capacitor?
Follow the steps from the Capacitor Workflow.
1. Develop and build your Web App
You must build your Ionic project at least once before adding any native platforms.
1
ionic build
Copied!
This creates the www folder that Capacitor has been automatically configured to use as the webDir in capacitor.config.json. 
Because our project uses SSR, we don’t have www folder. We instead have to use dist/app/browser and change it in capacitor.config.json
Both android and ios folders at the root of the project are created. These are entirely separate native project artifacts that should be considered part of your Ionic app (i.e., check them into source control, edit them in their own IDEs, etc.).
2. Copy your Web Assets
When you are ready to run your app natively on a device or in a simulator, copy your built web assets using:
1
npx cap sync
Copied!
3. Open your Native IDE
Capacitor uses the Native IDEs to build, simulate, and run your app. To open one, run:
1
npx cap open
Copied!
4. Update the native project
In some cases, the Capacitor app needs to be updated, such as when installing new plugins.
To install new plugins (including Cordova ones), run:
1
npm install really-cool-plugin
2
npx cap update
Copied!
5. Updating Capacitor
To check if there are any new updates to Capacitor itself, run npx cap doctor to print out the current installed dependencies as well view the latest available.
To update Capacitor Core and CLI:
1
npm install @capacitor/[email protected]
2
npm install @capacitor/[email protected]
Copied!
To update any or all of the platforms you are using:
1
npm install @capacitor/[email protected]
2
npm install @capacitor/[email protected]
Copied!
See how to do this in the following video.
Build your app for iOS with Capacitor 
How to remove Capacitor and use Cordova?
We use and strongly recommend using Capacitor, the developer experience is SO MUCH better than it was with Cordova. However, in this section, we will show you how to remove Capacitor and add Cordova if you are not yet ready to use it.
Delete ios, android and .gradle folders
Delete capacitor.config.json
Run: ionic integrations disable capacitor
Run: ionic cordova platform add ios
Run: ionic cordova platform add android
You will have to change the Capacitor plugins for Ionic Native plugins.
Install Ionic Native by running:
1
npm install @ionic-native/core @ionic-native/status-bar @ionic-native/splash-screen --save
Copied!
Go to app.component.tsand do the following:
Remove: 
1
import { Plugins } from '@capacitor/core';
2
const { SplashScreen } = Plugins;
Copied!
Add:
1
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
2
import { StatusBar } from '@ionic-native/status-bar/ngx';
3
import { Platform } from '@ionic/angular';
Copied!
Change the initializeApp() method for the following code:
1
initializeApp() {
2
    this.platform.ready().then(() => {
3
      this.statusBar.styleDefault();
4
      this.splashScreen.hide();
5
    });
6
  }
Copied!
Add the following parameters to the constructor:
1
  constructor(..., 
2
    private platform: Platform,
3
    private splashScreen: SplashScreen,
4
    private statusBar: StatusBar)
Copied!
Now go to app.module.ts and add the following:
1
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
2
import { StatusBar } from '@ionic-native/status-bar/ngx';
Copied!
Then add them as providers of the module:
1
  providers: [
2
    StatusBar,
3
    SplashScreen,
4
    ...
5
  ],
Copied!
Now if you run ionic serve everything should work fine.
We use Share and Geolocation plugins from Capacitor. If you want those features to work in your Cordova app, you need to change the implementation using the respective Ionic Native plugins.
Now you can safely remove the Capacitor dependencies from your package.json.
1
npm uninstall --save @capacitor/android
2
npm uninstall --save @capacitor/cli
3
npm uninstall --save @capacitor/core
4
npm uninstall --save @capacitor/ios
Copied!
How to use this template?
Code Structure
Last modified 3mo ago
Copy link
Contents
How to use Capacitor to deploy your apps?
How to build the project with Capacitor?
How to remove Capacitor and use Cordova?