At first glance, you might think this was Ionic’s answer to React Native, but this time the framework dedicated to mobile applications has chosen to turn towards PWAs. This week, discover Capacitor: Ionic’s new open source tool that offers to let you create NPWAs (native PWAs).
What is Capacitor?
Ionic describes its new tool as a logical successor to Apache Cordova and Adobe PhoneGap. However, given that it is oriented towards native development, it is also inspired by several frameworks such as React Native and Turbolinks.
What sets Capacitor apart from its competitors is that it has a component focused on web applications. It is therefore possible to use Capacitor to develop for iOS as well (with Xcode 9) and Android (with the Java 8 JDK).
Installing Capacitor
Simple installation
The easiest way to install the tool is through the NPM package manager. At this stage you have two options:
– Either you have an existing application, in which case type the following command in your terminal:cd my-app npm install --save @capacitor/core @capacitor/cli
– Or you are creating a new project, in which case you will need to type:npx @capacitor/cli create
Installation with Ionic
For this relatively simple part, you only need two steps:
– Start the Ionic project:ionic start myApp tabs cd myApp
– Install Capacitor on your Ionic project:npm install --save @capacitor/cli @capacitor/core
What features does Capacitor offer?
Even though Ionic wanted to completely modernise its new tool, it will still be possible to benefit from Cordova plugins. They can be used on iOS, on Android and on PWAs alike.
Capacitor will also ship with a native IDE, compatible with Xcode and Android Studio.
But the tool’s real strength lies in the 20 APIs it offers. Here are a few of them:
- Camera: allows the user to choose a photo from their album or take a photo with their native camera.
- Filesystem: provides a Node.js-style API for working with files on the device.
- Haptics: provides feedback to the user, through vibrations for example.
- Toast: despite its unusual name, this API makes it possible to send a notification to the user.
