Skip to content
Enable Firebase Cloud Messaging for Capacitor apps
Branch: master
Clone or download
Latest commit 5fa61c7 May 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android fix(android): add app compat May 3, 2019
ios/Plugin fix(README) Mar 26, 2019
src feat(): add android support Mar 26, 2019
.gitignore chore(): ignore .idea Mar 26, 2019
CHANGELOG.md chore(release): 0.0.5 May 3, 2019
CapacitorFCM.podspec feat(ios): add getToken and clean project to be publish Mar 25, 2019
LICENSE chore(): add license May 11, 2019
README.md
package-lock.json chore(release): 0.0.5 May 3, 2019
package.json
rollup.config.js feat(FCM): add subscribe to topic Jan 23, 2019
tsconfig.json feat(FCM): add subscribe to topic Jan 23, 2019

README.md

capacitor-fcm

Capacitor plugin to enable features from Firebase Cloud Messaging

Notice

This plugin is intended to be used together with the capacitor api for Push Notifications.

API

  • subscribeTo
  • unsubscribeFrom
  • getToken
  • deleteInstance android only

Usage

import { FCM } from "capacitor-fcm";
const fcm = new FCM();

import { Plugins } from "@capacitor/core";
const { PushNotifications } = Plugins;

//
// Subscribe to a specific topic
PushNotifications.register()
    .then(_ => {
    fcm
        .subscribeTo({ topic: "test" })
        .then(r => alert(`subscribed to topic`))
        .catch(err => console.log(err));
    })
    .catch(err => alert(JSON.stringify(err)));

//
// Unsubscribe from a specific topic
fcm
    .unsubscribeFrom({ topic: "test" })
    .then(r => alert(`unsubscribed from topic`))
    .catch(err => console.log(err));
}

//
// get remote token
fcm
    .getToken()
    .then(r => alert(`Token ${r.token}`))
    .catch(err => console.log(err));
}

Add Google config files

Navigate to the project settings page for your app on Firebase.

iOS

Download the GoogleService-Info.plist file. In Xcode right-click on the yellow folder named "App" and select the Add files to "App".

Tip: if you drag and drop your file to this location, Xcode may not be able to find it.

Android

Download the google-services.json file and copy it to android/app/ directory of your capacitor project.

iOS setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install —-save capacitor-fcm
  • mkdir www && touch www/index.html
  • npx cap add ios
  • npx cap sync ios
  • npx cap open ios
  • sign your app at xcode (general tab)
  • enable remote notification capabilities
  • add GoogleService-Info.plist to your app in xcode

Tip: every time you change a native code you may need to clean up the cache (Product > Clean build folder) and then run the app again.

Android setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • npm install —-save capacitor-fcm
  • mkdir www && touch www/index.html
  • npx cap add android
  • npx cap sync android
  • npx cap open android
  • add google-services.json to your android/app folder
  • [extra step] in android case we need to tell Capacitor to initialise the plugin:

on your MainActivity.java file add import io.stewan.capacitor.fcm.FCMPlugin; and then inside the init callback add(FCMPlugin.class);

Now you should be set to go. Try to run your client using ionic cap run android --livereload.

Tip: every time you change a native code you may need to clean up the cache (Build > Clean Project | Build > Rebuild Project) and then run the app again.

Sample app

(coming soon)

You may also like

Cheers 🍻

Follow me @Twitter

License

MIT

You can’t perform that action at this time.