Learn how to build a cross-platform app using Vue and Ionic’s Capacitator, which provides a native mobile runtime and API layer for web apps.

As web developers, we often sing the praise of the web and talk about how great of a platform it is. But as it turns out, the web is still limited in terms of compelling features. For instance, if you want to have access to a device’s File System, Push Notifications, or Bluetooth capabilities, you more than likely need to have a native app to accompany your web app.

Thankfully, web developers can take their web apps and add a native target without having to change anything.

Introducing: Capacitor.

How it works

Capacitor can be thought of as a ponyfill for native apps as well as a runtime for web apps. Capacitor provides an API that allows developers to call native APIs through JavaScript and deploy their web app through the iOS App Stores and Google Play.

For example, if we wanted to schedule a local notification in an app, with Capacitor it would be a matter of calling LocalNotifications.schedule and passing an array of notifications.

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

LocalNotifications.schedule({
  notifications: [
    {
      title: "On sale",
      body: "Widgets are 10% off. Act fast!",
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 5) },
      sound: null,
      attachments: null,
      actionTypeId: "",
      extra: null
    }
  ]
});

This is possible because Capacitor sits between the various APIs from the Browser, native iOS, and native Android. When we call a Capacitor API, we’re actually calling proxied API.

So when we call our local notification example on iOS, we’ll actually call the native notification API and handle things there. On the web, we can also call the Notification API, so why not just use the existing API instead?

If we change our example from Notifications to Background Tasks, which has no web equivalent, the benefit becomes pretty clear. By providing it’s own API, Capacitor let’s you safely call APIs, and provide graceful fall-backs when features are not available. Much better than having a giant error in an app.

#vue #ionic #web-development #developer