Giter Club home page Giter Club logo

fcm's Introduction


Capacitor FCM

@capacitor-community/fcm

Capacitor community plugin for enabling FCM capabilities


Sponsors

Intenseloop

Maintainers

Maintainer GitHub Social
Stewan Silva stewones @stewones

Notice 🚀

We're starting fresh under an official org. If you were using the previous npm package capacitor-fcm, please update your package.json to @capacitor-community/fcm. Check out changelog for more info.

Installation

Using npm:

npm install @capacitor-community/fcm

Using yarn:

yarn add @capacitor-community/fcm

Sync native files:

npx cap sync

Notice

This plugin is intended to be used combined with Capacitor API for Push Notifications. Capacitor only provides APN token whereas this plugin offers the possibility to work with FCM tokens and more.

API

method info platform
subscribeTo subscribe to fcm topic ios/android
unsubscribeFrom unsubscribe from fcm topic ios/android
getToken get fcm token to eventually use from a server ios/android
deleteInstance remove local fcm instance completely ios/android
setAutoInit enable the auto initialization of the library ios/android
isAutoInitEnabled check whether auto initialization is enabled ios/android

Usage

import { FCM } from "@capacitor-community/fcm";
import { PushNotifications } from "@capacitor/push-notifications";

// external required step
// register for push
await PushNotifications.requestPermissions();
await PushNotifications.register();

// now you can subscribe to a specific topic
FCM.subscribeTo({ topic: "test" })
  .then((r) => alert(`subscribed to topic`))
  .catch((err) => console.log(err));

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

// Get FCM token instead the APN one returned by Capacitor
FCM.getToken()
  .then((r) => alert(`Token ${r.token}`))
  .catch((err) => console.log(err));

// Remove FCM instance
FCM.deleteInstance()
  .then(() => alert(`Token deleted`))
  .catch((err) => console.log(err));

// Enable the auto initialization of the library
FCM.setAutoInit({ enabled: true }).then(() => alert(`Auto init enabled`));

// Check the auto initialization status
FCM.isAutoInitEnabled().then((r) => {
  console.log("Auto init is " + (r.enabled ? "enabled" : "disabled"));
});

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.

Certificate

iOS setup

  • Install homebrew (once)
  • brew install cocoapods (once a time)
  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • mkdir www && touch www/index.html
  • npx cap add ios
  • npm install --save @capacitor-community/fcm
  • npx cap sync ios (always do sync after a plugin install)
  • npx cap open ios
  • sign your app at xcode (general tab)
  • enable remote notification capabilities
  • add GoogleService-Info.plist to the app folder in xcode
// (optional) turn off `swizzling` in the `info.plist`
<key>FirebaseAppDelegateProxyEnabled</key>
<string>NO</string>

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.

Prevent auto initialization

If you need to implement opt-in behavior, you can disable the auto initialization of the library by following the Firebase docs.

Android setup

  • ionic start my-cap-app --capacitor
  • cd my-cap-app
  • mkdir www && touch www/index.html
  • npx cap add android
  • npm install --save @capacitor-community/fcm
  • npx cap sync android (always do sync after a plugin install)
  • npx cap open android
  • add google-services.json to your android/app folder

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.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

  • $firebaseMessagingVersion version of com.google.firebase:firebase-messaging (default: 23.0.5)

Prevent auto initialization

If you need to implement opt-in behavior, you can disable the auto initialization of the library by following the Firebase docs.

Example

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Stew
Stew

💻 📖
Daniel Pereira
Daniel Pereira

💻 📖
Priyank Patel
Priyank Patel

💻
Nikolas
Nikolas

🚧
Ben Schattinger
Ben Schattinger

💻
James Manners
James Manners

💻
Borja Rodríguez
Borja Rodríguez

🚧
Karrlllis
Karrlllis

📖
jamesmah
jamesmah

💻
Josh Sharpe
Josh Sharpe

🚧
Mantas Šimkūnas
Mantas Šimkūnas

💻 📖
Olivier Overstraete
Olivier Overstraete

🚧
Hemang Kumar
Hemang Kumar

💻 🚧
Luca Ban
Luca Ban

📖
Alex Griffith
Alex Griffith

💻 🚧
bdirito
bdirito

🚧
Ryan
Ryan

🚧
Josué Moreno
Josué Moreno

💻
Marc
Marc

🚧
Florian Gyger
Florian Gyger

💻
jcesarmobile
jcesarmobile

💬 📖 🚧
Rami Khafagi
Rami Khafagi

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

fcm's People

Contributors

stewones avatar danielprrazevedo avatar ramikhafagi96 avatar hemangsk avatar jcesarmobile avatar msimkunas avatar iolivier avatar borodiliz avatar mesqueeb avatar mineminemine avatar halomakes avatar jmannau avatar josh-m-sharpe avatar josuelmm avatar karrlllis avatar marcjulian avatar nikoskip avatar priyankpat avatar bdirito avatar lights0123 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.