# capacitor-fcm

> Brings Firebase Cloud Messaging features to Capacitor

Latest version **2.0.0** (published 2020-03-25) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install capacitor-fcm
pnpm add capacitor-fcm
yarn add capacitor-fcm
bun add capacitor-fcm
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-03-25 |
| First published | 2019-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 234.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 273 |
| Author | Stewan Silva |
| Maintainers | stewan |
| Keywords | capacitor, plugin, native, fcm, firebase cloud messaging |

## Links

- npm: https://www.npmjs.com/package/capacitor-fcm
- Repository: https://github.com/stewwan/capacitor-fcm
- Homepage: https://github.com/stewwan/capacitor-fcm#readme
- Issues: https://github.com/stewwan/capacitor-fcm/issues
- npm.io page: https://npm.io/package/capacitor-fcm

## Dependencies (1)

- [@capacitor/core](https://npm.io/package/@capacitor/core.md) latest

## Recent versions

- 2.0.0 (latest) — 2020-03-25
- 1.0.1 — 2020-03-09
- 1.0.0 — 2020-01-20
- 0.1.0 — 2019-09-26
- 0.0.9 — 2019-09-23
- 0.0.7 — 2019-07-05
- 0.0.6 — 2019-06-04
- 0.0.5 — 2019-05-03
- 0.0.4 — 2019-05-03
- 0.0.3 — 2019-05-03
- 0.0.2 — 2019-03-26
- 0.0.1 — 2019-03-25

## README

# capacitor-fcm [![npm version](https://badge.fury.io/js/capacitor-fcm.svg)](https://badge.fury.io/js/capacitor-fcm)

Capacitor plugin to enable features from Firebase Cloud Messaging

> ### 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 |
| `deleteInstance`  | remove local fcm instance completely          | ios/android |

## Usage

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

//
// with type support
import { FCM } from "capacitor-fcm";
const fcm = new FCM();

//
// alternatively - without types
const { FCMPlugin } = Plugins;

//
// external required step
// register for push
PushNotifications.register()
  .then(() => {
    //
    // Subscribe to a specific topic
    // you can use `FCMPlugin` or just `fcm`
    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(() => 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));
```

## 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

- `sudo gem 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-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>
<false/>
```

> 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`
- `mkdir www && touch www/index.html`
- `npx cap add android`
- `npm install --save capacitor-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
- `[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

https://github.com/stewwan/capacitor-fcm-demo

## You may also like

- [capacitor-analytics](https://github.com/stewwan/capacitor-analytics)
- [capacitor-crashlytics](https://github.com/stewwan/capacitor-crashlytics)
- [capacitor-intercom](https://github.com/stewwan/capacitor-intercom)
- [capacitor-twitter](https://github.com/stewwan/capacitor-twitter)

Cheers 🍻

Follow me [@Twitter](https://twitter.com/StewanSilva)

## License

MIT

---
_Source: https://npm.io/package/capacitor-fcm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._