Capacitor Electron FCM Plugin

Simple plugin to support FCM on the Electron platform using Capacitor.

Disclaimer: This plugin will most likely not exist forever

Install

• Npm install into your Capacitor Project: npm i capacitor-electron-fcm-push

• Add your Firebase messagingSenderId to the plugins section in your capacitor.config.json like below.

{
  "appId": "com.domain.appname",
  "appName": "appname",
  "bundledWebRuntime": false,
  "webDir": "www",
  "plugins": {
    "ElectronFCM": {
      "messagingSenderId": "<SENDER_ID_HERE>"
    }
  }
}

Usage Example

app.tsx is a react app loaded into an index.html.

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';

    import { Plugins } from '@capacitor/core';

    import {CapacitorElectronFCM} from 'capacitor-electron-fcm/electron';

    class App extends React.Component {
        constructor(props: any) {
          super(props);
        }

        componentDidMount() {

          try {
            // The passed function in init() is user defined.
            // I have passed a function that uses the native Notification API of electron to
            // display the received push message.
            CapacitorElectronFCM.init(({ notification, persistentId }) => {
              console.log(notification);
              let myNotification = new Notification(notification.data.title, {
                body: notification.data.body,
              });
              myNotification.onclick = () => {
                console.log('Notification clicked.');
              };
            });
          }catch (e) {
            console.error(e);
          }

        }

        render() {
          return (
            <div style={{"padding": "5px"}}>
              <h1>Hello World!</h1>
            </div>
          );
        }

    }

    // Render to index.html
    ReactDOM.render(
      <AppContainer />,
      document.getElementById('root'),
    );