Capacitor Community Plugin Showcase

At Ionic, we love our open-source community. There are great, open-source Capacitor plugins being built and used every day. Today, I wanted to showcase some excellent, community-maintained plugins on the Capacitor Community GitHub organization.

Firebase Cloud Messaging

Capacitor already uses Firebase for sending push notifications with the official push notifications plugin. But, the community FCM plugin, maintained by Stewan Silva and Daniel Pereira, takes it a step further.

With the FCM plugin, you can opt your users into Firebase “topics.” After subscribing your users to different topics, you can use Firebase to send push notifications to specific topics rather than your entire userbase. This allows you to send targeted push messages rather than a single push message.

To set up FCM in your Capacitor application, you have to install the official Capacitor [push notifications] plugin as well as the FCM community plugin.

npm i @capacitor/push-notifications
npm i @capacitor-community/fcm

Once you’ve installed the plugins, you can add FCM capabilities on top of the official push notification plugin. In the code snippet below, we’ll enroll the application to the “apple” topic if it is an iOS device, and the “google” topic if it is an Android device.

import { PushNotifications } from "@capacitor/push-notifications";
import { FCM } from "@capacitor-community/fcm";
Import { Capacitor } from “@capacitor/core”;

// set up base push notifications with Capacitor
await PushNotifications.requestPermissions();
await PushNotifications.register();

let topic;
if (Capacitor.getPlatform() === ‘ios’) {
  topic = ‘apple’
} else if (Capacitor.getPlatform() === ‘android’) {
  topic = ‘google’
}


// set up Firebase Cloud Messaging topics
FCM.subscribeTo({ topic  })
  .then(r => console.log(`subscribed to topic “${topic}”`))
  .catch(err => console.log(err));

For more information on topics, check out the Firebase documentation for iOS and Android; and for more information on the Capacitor community FCM plugin, check out the GitHub repo and example.

Electron

Capacitor officially supports iOS, Android, Web, and Windows. However, with the community Electron platform built by Mike Summerfeldt, you can create a Capacitor application that also targets Electron. Similar to the Android and iOS platforms, Capacitor Electron has a Plugin API for creating Capacitor plugins with Electron.

Adding Electron support is exactly the same as adding Android or iOS support when first scaffolding your Capacitor project.

npm i @capacitor-community/electron
npx cap add @capacitor-community/electron

An Electron project will be created in a folder titled electron/ at the root of your project. The Capacitor CLI will recognize the Electron platform and allow you to run CLI commands on the electron project like Android and iOS.

npx cap open @capacitor-community/electron

The Capacitor Electron docs have more information on getting started and creating plugins for the community Electron platform.

Contacts

One thing that mobile apps can do that web apps can’t do is read and write from a contact list. The community Contacts plugin, built by Jonathan Gerber, exposes the Android and iOS APIs for modifying a user’s contact list.

To add the community Contacts plugin to your Capacitor project, install it from npm.

npm i @capacitor-community/contacts

After modifying the project’s permissions for Android and iOS to properly notify the end users that you’re using their contact list, using the Contacts plugin can be implemented in a few lines of code.

import { Contacts } from '@capacitor-community/contacts'

const contactInfo = {
  givenName: "Thomas",
  familyName: "Vidas",
};
Contacts.addContact(contactInfo).then(() => {
  // contact is saved!
});

The community Contacts plugin GitHub repo has more examples of reading and writing to and from the system contact list.

Apple Sign-In

Sign In With Apple launched with iOS 13 and is quickly becoming a popular OAuth and OIDC login alongside Facebook and Google login methods. Having a “Sign In With Apple” button is a great option for allowing users to authenticate with your app. With the community “Apple Sign-In” Plugin, maintained by Jose Martinez and Laszlo Csoka, adding this login option becomes a single function.

To add the community Apple Sign-In plugin to your Capacitor project, install it using npm.

npm i @capacitor-community/apple-sign-in

Once the community Apple Sign-In plugin has been added to the project, it’s only a single function call from your Capacitor application to start the authorization process with Apple.

import { SignInWithApple } from '@capacitor-community/apple-sign-in';

const options = {
  clientId: 'com.your.webservice',
  redirectURI: 'https://www.yourfrontend.com/login',
  scopes: 'email name',
  state: '12345',
  nonce: 'nonce',
};

SignInWithApple.authorize(options).then(result => {
  // Handle successful login
}).catch(error => {
  // Handle error
});

For more information on how to set up the backend for “Sign In With Apple,” check out Apple’s documentation.

And There’s More!

There are dozens of projects in the Capacitor Community GitHub organization that are maintained by the Ionic community members. We’re always looking to showcase great open-source Capacitor community plugins and projects to help other developers succeed when using Capacitor. Be sure to check out all of the great projects — there’s probably a plugin or two you’ll want to use!

Want to Contribute?

If you have a plugin that you’d like to add to the Capacitor Community, open an issue on the Capacitor Community Proposal repo, and the Capacitor team will review and add it to the GitHub and npm organizations. We’re always excited to elevate open source to the next level. 🙂