大家好，很高兴又见面了，我是"前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

Gluon：使用系统安装的浏览器和 NodeJS 从网站创建桌面应用程序的新框架

1.什么是Gluon？

Gluon 是一个新的框架，用于从网站创建桌面应用程序，使用系统内置的浏览器（不是 webviews）和 NodeJS，与其他现有的活跃项目有很大不同 ，Gluon开放创新并具有一些主要优势。 Gluon 不使用其他类似框架打包浏览器（如 Chromium）或使用 webview（如 Windows 上的 Edge Webview2），而是使用系统安装的浏览器，如 Chrome、Edge、Firefox 等。

Gluon 支持基于 Chromium 和 Firefox 的浏览器作为前端，而 Gluon 的后端使用 NodeJS 是通用且易于开发的（也允许通过使用相同的堆栈从其他流行的框架（如 Electron）轻松学习）。

2.Gluon有什么优势？

Gluon有什么优势？

• 系统安装的浏览器：允许用户选择支持大多数基于 Chromium 和 Firefox 的浏览器，没有 webviews
• 打包代码小：<1MB 使用系统节点，<10MB 时打包它
• 浏览器引擎：Chromium 和 Firefox 支持作为浏览器引擎，不同于任何其他活动框架
• 小且易于使用：Gluon 有一个简单而强大的 API 来开发带有 Node 后端的应用程序
• 支持 Deno（实验性的）：Deno 也作为一个选项（开发者选择）来替代后端的 NodeJS
• 快速构建： Gluon 在大多数机器上的小型项目构建时间不到 1 秒
• 积极开发并听取反馈 ： 每周都会有新的更新，如果社区喜欢（例如 Firefox 支持！），可以快速添加计划外的功能
• 跨平台 ： Gluon 适用于 Windows、Linux 和 macOS (WIP)

Gluon使用火狐或者Chrome

3.Gluon项目现状

Gluon 项目开源还不到一个月，因此仍处于早期和实验状态。 但它已经显示出巨大潜力！下面是Gluon项目目前的一些状态。

Gluon项目现状Gluon项目现状

4.Gluon与不同项目对比

4.1 内置能力对比

Gluon vs Electron vs Tauri vs Neutralinojs内置能力对比

4.2 性能对比

基本（纯 HTML）Hello World 演示，在机上最新的 Windows 10 上测试结果。 使用截至 2022 年 12 月 9 日所有框架的最新稳定版本。测试结果如下：

Gluon vs Electron vs Tauri vs Neutralinojs性能对比

从上图可以看出，Gluon与Tauri、Electron 、 Neutralinojs相比，在打包时间、包大小、内存使用、打包时间上等诸多维度都具有明显的优势。

5.Gluon典型用例

5.1 新开窗口

在 Gluon 中打开一个窗口就像一个函数调用一样简单，同时还提供了诸多选项可用，例如窗口大小或加载额外代码。

import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://gluonjs.org');

5.2 IPC进程通讯

IPC（进程间通信）允许您在后端和网站前端之间进行通信。

Gluon 有一个简单但功能强大的异步 IPC API，它在 Node 和公开的 Gluon Web API 中也几乎相同，以允许更容易和更快的开发。

它还具有多个通用的子 API 来完成常见的事情，包括包装基本 API，因此大多数开发人员不需要使用不必要的复杂的基于事件的系统：

// Node后端
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://gluonjs.org');
Window.ipc.store.config = {
  env: 'production'
};
import { writeFile } from 'fs/promises';
let log = '';
Window.ipc.log = msg => {
  // 打印日志到磁盘
  log += msg;
  writeFile('app.log', log); 
  // 写入日志到文件
};

5.3 Idle API

Idle API 是 Gluon 的一项独特功能，允许休眠”Gluon 窗口以节省系统资源。

休眠时会完全杀死浏览器（使用约 30MB 的内存），而休眠使用页面的屏幕截图作为占位符（使用约 60MB 的内存）。

您可以使用 API 手动休眠、睡眠和唤醒，或者使用自动空闲管理，它会在选定的时间段内最小化窗口时休眠，并在它再次聚焦时将其自动唤醒。

//  Node后端
import * as Gluon from '@gluon-framework/gluon';
const Window = await Gluon.open('https://example.com');
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
await sleep(5000); 
// 等待窗口完全加载
Window.idle.hibernate(); 
// 休眠窗口
await sleep(5000);

Window.idle.wake(); 
// 唤醒窗口
await sleep(5000);

Window.idle.sleep(); 
// 休眠窗口
await sleep(5000);

Window.idle.wake(); 
// 唤醒窗口

6.本文总结

本文主要和大家探讨下一个全新的桌面开发框架Gluon的现状，并与 Electron 、Tauri 、 Neutralinojs等诸多前辈进行对比。当然，有些人可能对Electron 、Tauri 、 Neutralinojs等有诸多执念，那就当一次看客，知道有这么个框架好了。文末的参考资料提供了大量优秀文档以供学习，如果有兴趣的读者可以自行阅读。

参考资料

https://github.com/gluon-framework/gluon

https://gluonjs.org/