npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@capacitor-community/fcm

v6.0.0

Published

Enable Firebase Cloud Messaging features for Capacitor apps

Downloads

42,200

Readme

Sponsors

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

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 (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.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.

Example

  • https://github.com/capacitor-community/fcm/tree/master/example

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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