Unlock the Full Potential of Your Web App with Capacitor

What is Capacitor?

Capacitor is a game-changer that allows developers to call native APIs through JavaScript and deploy their web app through the iOS App Stores and Google Play. It acts as a ponyfill for native apps and a runtime for web apps, providing an API that bridges the gap between the various APIs from the Browser, native iOS, and native Android.

How Does it Work?

When you call a Capacitor API, you’re actually calling a proxied API. This means that when you call a local notification example on iOS, you’ll actually call the native notification API and handle things there. On the web, you can also call the Notification API, but Capacitor provides a safe and graceful fallback when features are not available, avoiding those pesky errors.

Building a Vue App with Capacitor

To demonstrate Capacitor’s power, let’s build a small Vue app using Vuetify for our components. We’ll start by creating a new Vue project and installing Capacitor Core and its CLI.

npm install @capacitor/core @capacitor/cli

Geolocation Made Easy

To get started with geolocation, we’ll import the Plugins object from @capacitor/core and call the Geolocation object. We’ll then call the getCurrentPosition function, which returns a promise. Once the location data is retrieved, we can set the loc binding to the location data.

import { Plugins } from '@capacitor/core';
const { Geolocation } = Plugins;

// ...

Geolocation.getCurrentPosition().then(position => {
  this.loc = position.coords;
});

Local Notifications

Next, we’ll tackle local notifications using the Local Notification API. We’ll first get access to the LocalNotifications object and request permission. If the user grants permission, we can schedule a notification inside our if statement.

import { Plugins } from '@capacitor/core';
const { LocalNotifications } = Plugins;

// ...

LocalNotifications.requestPermission().then(permission => {
  if (permission.granted) {
    // Schedule a notification
  }
});

Deploying Your App

With our features added, let’s do a build of our app and start adding the native platforms. We’ll enable Capacitor in our project using the Capacitor CLI, add iOS or Android deploy targets, and run the apps on a simulator or real device.

npx cap init
npx cap add ios
npx cap add android

The Future of App Development

Capacitor is a drop-in tool for deploying your app to native, with a minimal CLI and Web-focused approach. It’s framework-agnostic, meaning you can use it with Angular, React, Preact, or no framework at all. With Capacitor, the possibilities are endless.