electron + vue 窗口关闭如何向后台发送离线通知

Question

electron 打包的电脑应用里面内嵌vue项目，窗口有个自带的关闭按钮，如下

点击后给了个弹窗确认，点击这个关闭需要向后台发送离线通知

但是在main文件里面发送了

窗口调用不了浏览器window的一下相关方法，包括localStorage里面的数据也获取不到，全都是is not defined

win.webContents.executeJavaScript('localStorage.getItem("obj")', true).then((result) => {});

// 只能调用electron里面的方法才能获取localStorage

像这种情况下如何给后端发送离线通知，参数都是存在localStorage里面

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

在 Electron 应用中，当窗口关闭时，如果需要向后台发送离线通知，并且数据存储在 localStorage 中，由于 localStorage 是前端的特性，直接在主进程中无法访问，因此需要通过进程间通信（IPC）将数据传递到主进程，再由主进程完成通知的发送。

以下是解决方案的详细步骤：

---

解决方案

1. 监听窗口关闭事件 在 Vue 项目中监听窗口关闭事件，捕获用户点击关闭按钮的行为。

2. 通过 IPC 发送数据 使用 Electron 的 IPC 模块，将 localStorage 中的数据传递给主进程。

3. 主进程处理离线通知 主进程接收到数据后，调用后端接口发送离线通知。

4. 清理数据或状态 确保在发送通知后清理相关的数据或状态。

---

实现步骤

1. 在 Vue 项目中监听窗口关闭事件

在 Vue 项目中捕获窗口关闭事件，并通过 IPC 将数据发送到主进程。

// src/main.js 或 main 进程入口文件
const { ipcMain } = require('electron');
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: __dirname + '/preload.js',
        },
    });

    mainWindow.loadURL('http://localhost:8080'); // 加载 Vue 项目

    // 监听窗口关闭事件
    mainWindow.on('close', (event) => {
        event.preventDefault(); // 阻止默认关闭行为
        mainWindow.webContents.send('window-closing'); // 触发前端事件
    });
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

---

2. 在 Vue 项目中捕获关闭事件并通过 IPC 发送数据

在 Vue 项目中监听主进程发送的事件，并通过 IPC 将 localStorage 数据发送到主进程。

// src/main.js 或主进程入口文件
const { ipcMain } = require('electron');
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: __dirname + '/preload.js',
        },
    });

    mainWindow.loadURL('http://localhost:8080'); // 加载 Vue 项目

    // 监听窗口关闭事件
    mainWindow.on('close', (event) => {
        event.preventDefault(); // 阻止默认关闭行为
        mainWindow.webContents.send('window-closing'); // 触发前端事件
    });
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 监听来自前端的数据
ipcMain.on('send-offline-notice', async (event, data) => {
    try {
        // 调用后端 API 发送离线通知
        const response = await fetch('https://api.example.com/offline-notice', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });

        if (response.ok) {
            console.log('离线通知已成功发送');
        } else {
            console.error('发送离线通知失败');
        }
    } catch (error) {
        console.error('发送离线通知时出错:', error);
    } finally {
        mainWindow.close(); // 关闭窗口
    }
});

---

3. 在 Vue 组件中触发关闭事件

在 Vue 组件中监听主进程的事件，并通过 IPC 将 localStorage 数据发送到主进程。

<template>
  <div>
    <button @click="handleClose">关闭窗口</button>
  </div>
</template>

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

contextBridge.exposeInMainWorld('electronAPI', {
    sendOfflineNotice: (data) => ipcRenderer.send('send-offline-notice', data),
});

export default {
  methods: {
    handleClose() {
      // 获取 localStorage 数据
      const data = JSON.parse(localStorage.getItem('obj'));

      // 通过 IPC 发送数据
      window.electronAPI.sendOfflineNotice(data);

      // 提示用户
      alert('正在发送离线通知...');
    },
  },
};
</script>

---

关键点解析

1. 进程间通信（IPC）

   • 使用 ipcRenderer 和 ipcMain 实现前后端通信。
   • 前端通过 ipcRenderer.send 将数据发送到主进程。
   • 主进程通过 ipcMain.on 接收数据并处理。

2. localStorage 的使用

   • localStorage 是前端特有的特性，无法直接在主进程中访问。
   • 必须先通过 IPC 将数据传递到主进程。

3. 阻止默认关闭行为

   • 在主进程中通过 event.preventDefault() 阻止窗口的默认关闭行为。
   • 确保在发送完通知后再调用 mainWindow.close()。

4. 错误处理

   • 在发送通知时添加异常捕获，确保即使发送失败也不会导致程序崩溃。

---

总结

通过上述步骤，可以实现 Electron + Vue 应用中窗口关闭时向后台发送离线通知的功能。关键在于利用 IPC 模块在主进程和渲染进程之间传递数据，并确保数据的安全性和可靠性。