Integrate with Ionic about electron

[IT-MikeS]

YOUR_PROJECT_DIR/electron/preloader.js

const { contextBridge, ipcRenderer } = require('electron');

///////Do Not Edit////////
require("./node_modules/@capacitor-community/electron/dist/electron-bridge.js");
/////////////////////////

contextBridge.exposeInMainWorld('electron', {
  ipc: { ...ipcRenderer }
})

YOUR_PROJECT_DIR/electron/src/index.ts

import { app, ipcMain } from "electron";
import { createCapacitorElectronApp } from "@capacitor-community/electron";

// The MainWindow object can be accessed via myCapacitorApp.getMainWindow()
const myCapacitorApp = createCapacitorElectronApp({
  mainWindow: {
    windowOptions: {
      webPreferences: {
        contextIsolation: true,
      }
    }
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on("ready", () => {
  myCapacitorApp.init();
});

// Quit when all windows are closed.
app.on("window-all-closed", function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (myCapacitorApp.getMainWindow().isDestroyed()) myCapacitorApp.init();
});

// Define any IPC or other custom functionality below here
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

In your Ionic App [App.vue] (used vue as example):

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

function isElectron() {
  return window.electron !== null && window.electron !== undefined;
}

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  },
  created() {
    if (isElectron()) {
       window.electron.ipc.on('asynchronous-reply', (event, arg) => {
         console.log(arg) // prints "pong"
       })
    }
  },
  mounted() {
    if (isElectron()) {
      window.electron.ipc.send('asynchronous-message', 'ping')
      console.log(window.electron.ipc.sendSync('synchronous-message', 'ping')) // prints "pong"
    }
  },
});
</script>

This is how I do it roughly, some other stuff but from here your editor or IDE will tell you if there are any issues that relate to your particular use.

Note: Questions are better suited to the Ionic forums rather than github issues

[havenotfear]

So i tried this and i am getting the following error: window.electron.ipc.on is not a function

What am I missing here?

[havenotfear]

I was able to get this to work using this const {ipcRenderer: ipc} = require('electron-better-ipc'); as the ipc