Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/capacitor-community/fcm
Enable Firebase Cloud Messaging for Capacitor apps
https://github.com/capacitor-community/fcm
android angular capacitor fcm firebase ionic ios
Last synced: 7 days ago
JSON representation
Enable Firebase Cloud Messaging for Capacitor apps
- Host: GitHub
- URL: https://github.com/capacitor-community/fcm
- Owner: capacitor-community
- License: mit
- Created: 2019-01-23T22:51:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T16:32:48.000Z (6 months ago)
- Last Synced: 2024-12-04T03:02:34.841Z (9 days ago)
- Topics: android, angular, capacitor, fcm, firebase, ionic, ios
- Language: TypeScript
- Homepage: https://capacitor.ionicframework.com/docs/
- Size: 13.5 MB
- Stars: 244
- Watchers: 19
- Forks: 83
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-capacitorjs - @capacitor-community/fcm - Enable Firebase Cloud Messaging for Capacitor apps. (Plugins / Community Plugins)
- awesome-capacitor - Fcm - Enable Firebase Cloud Messaging features for Capacitor apps. (Community plugins)
README
Capacitor FCM
@capacitor-community/fcm
Capacitor community plugin for enabling FCM capabilities
## Sponsors
## Maintainers
| Maintainer | GitHub | Social |
| ------------ | --------------------------------------- | ----------------------------------------- |
| Stewan Silva | [stewones](https://github.com/stewones) | [@stewones](https://twitter.com/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](/CHANGELOG.md) for more info.
## Installation
Using npm:
```bash
npm install @capacitor-community/fcm
```
Using yarn:
```bash
yarn add @capacitor-community/fcm
```
Sync native files:
```bash
npx cap sync
```
> ### Notice
>
> This plugin is intended to be used combined with Capacitor API for [Push Notifications](https://capacitor.ionicframework.com/docs/apis/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 |
| `refreshToken` | refresh fcm token to get a new one | 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
```ts
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 of the APN one returned by Capacitor
FCM.getToken()
.then(r => alert(`Token ${r.token}`))
.catch(err => console.log(err));
// Delete the old FCM token and get a new one
FCM.refreshToken()
.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
- apple
- create an app identifier (apple site)
- add push notifications
- add signing request (https://help.apple.com/developer-account/#/devbfa00fef7)
- generate an APN key and then note down the ID displayed. also download the p8 file (https://fluffy.es/p8-push-notification/)
- firebase
- add the downloaded p8 file to firebase settings with noted key ID and the account team ID
## iOS setup
- [Install homebrew](https://capacitorjs.com/docs/getting-started/environment-setup#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`
FirebaseAppDelegateProxyEnabled
NO
```
> 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](https://firebase.google.com/docs/cloud-messaging/ios/client#prevent_auto_initialization).
## 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.1.2`)
### 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](https://firebase.google.com/docs/cloud-messaging/android/client#prevent-auto-init).
## Example
- https://github.com/capacitor-community/fcm/tree/master/example
## License
MIT
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
stewones
π» π
Daniel Pereira
π» π
Priyank Patel
π»
Nikolas
π§
Ben Schattinger
π»
James Manners
π»
Borja RodrΓguez
π§
Karrlllis
π
jamesmah
π»
Josh Sharpe
π§
Mantas Ε imkΕ«nas
π» π
Olivier Overstraete
π§
Hemang Kumar
π» π§
Luca Ban
π
Alex Griffith
π» π§
bdirito
π§
Ryan
π§
JosuΓ© Moreno
π»
Marc
π§
Florian Gyger
π»
jcesarmobile
π¬ π π§
Rami Khafagi
π»
Bittor Poza
π»
Vishal Isharani
π§
Shunta KARASAWA
π§
Chris Weight
π§
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
