如何将 Web 应用转换为桌面应用

我们每天都会使用各种应用程序。它们运行在不同的平台上，包括移动端、Web、桌面、平板和电视。每家软件公司都会自行决定其应用程序应支持哪些平台。

在某些情况下，仅支持一个平台并不可行，应用程序必须覆盖多个平台。为每个平台分别开发独立应用需要投入大量时间和精力。您需要为每个平台组建单独的开发团队，这会带来相当高的成本。此外，每个应用还需要单独维护，这同样会消耗额外资源。

我们都知道，当下最流行的平台是 Web。根据 2025 年网站统计数据，截至 2025 年，互联网上大约有 12 亿个网站。平均每三秒就会诞生一个新网站。

因此，许多公司更倾向于先构建一个 Web 应用，再将其转换为移动应用或桌面应用。这类应用看起来像普通的原生应用，但实际上，它们展示的是一个 Web 应用或其专用版本。

这种支持多平台的方式可以为软件公司和开发者节省大量时间和成本。它使公司能够快速构建移动端或桌面端应用，并在这些平台上验证市场需求，再决定是否值得进一步投入，使用原生开发工具为每个平台分别构建独立应用。

在本文中，我将介绍何时适合将 Web 应用或网站转换为桌面应用，以及如何使用 MōBrowser 以专业的方式完成这项工作。

何时将 Web 应用转换为桌面应用

首先，我们来讨论一下，什么情况下值得将 Web 应用转换为桌面应用。

我认为，如果一个桌面应用只是简单地显示一个 Web 应用或网站，那么并没有太大意义。如果用户通过下载并安装您的桌面应用，获得的价值并不比直接在自己常用的浏览器中访问某个 URL 更多，那么要求他们这样做并不合理。

如果用户只是希望通过任务栏（Windows、Linux）或 Dock（macOS）上的图标，或者桌面快捷方式，快速打开某个 Web 应用或网站，那么他们可以在 Google Chrome 中为网站创建快捷方式，或者在可用的情况下，下载该 Web 应用的 PWA 版本。

当您能够通过与桌面环境和操作系统集成来增强 Web 应用的能力时，将 Web 应用转换为桌面应用才真正有意义。例如，这包括访问文件系统、访问硬件、显示原生桌面通知、开机启动、运行命令行工具、自动化 Web 应用中的特定场景等。

如何将 Web 应用转换为桌面应用

如果您想将任意 Web 应用或网站转换为现代化的跨平台桌面应用，可以使用 MōBrowser。

什么是 MōBrowser

MōBrowser 是一个用于构建跨平台桌面应用的平台，支持使用 TypeScript、HTML 和 CSS 进行开发。它提供了一组工具和框架，可简化跨平台桌面应用的开发流程，使您能够更快地构建、测试和部署跨平台桌面应用。通过在所有平台上复用同一套代码库，它可以帮助软件公司节省时间和成本。

MōBrowser 的一个特殊能力，是使用 Chromium 来渲染应用窗口中的用户界面。这使您既可以使用 Web 技术构建整个应用界面，也可以将任意现代 Web 应用或网站直接加载并显示在桌面应用中。

此外，MōBrowser 还提供了一套框架，使 Web 应用能够与底层原生 API 交互，并利用操作系统的能力。这大大扩展了 Web 应用的能力，也消除了 Web 应用在普通浏览器中运行时常见的限制。

在接下来的部分中，我将向您展示如何使用 MōBrowser 将 Web 应用转换为桌面应用。

使用模板生成项目

首先，我们需要生成一个项目。MōBrowser 提供了一个名为 create-mobrowser-app 的专用工具。这是官方的项目脚手架工具，可用于基于指定模板创建项目。执行以下命令即可生成项目：

npm create mobrowser-app@latest

输入您的应用名称，并将前端框架选择为 None。由于这里加载的是现有 URL，因此我们不需要前端框架：

? Project name: PurePhotos
? Select a framework: None
? Add support for native C++ addons? (y/N): No
? Set up the project? (Y/n): Yes

Done! To get started run:
  cd PurePhotos
  npm install
  npm run mobrowser dev

加载 Web 应用

项目生成后，我们可以打开 PurePhotos/src/main/index.ts，将默认 URL 替换为目标地址：

import { BrowserWindow } from '@mobrowser/api';

const win = new BrowserWindow()
win.browser.loadUrl('https://purephotos.app/my/dashboard')
win.setSize({ width: 1000, height: 800 })
win.show()

然后执行以下命令来构建并运行桌面应用：

cd PurePhotos
npm install
npm run mobrowser dev

启动后，您将看到一个用于访问该 Web 应用的登录界面：

Pure Photos 应用登录页

Pure Photos 应用仪表板页面

关于 Pure Photos

在这个示例中，我们要转换的 Web 应用叫做 Pure Photos。它可以自动移除照片中的背景，并自动隐藏照片中的各种瑕疵。

借助 Pure Photos，您可以：

找到照片中的人物，并将整批照片中人物的头部对齐到同一水平线。
校正曝光和颜色。
检测并去除噪点。
去除痘痘、雀斑和斑点。
生成 Adobe Photoshop Document (APD) 格式的分层图像。

在 IDE 中进行开发

接下来，让我们为桌面应用增加一些功能。

MōBrowser 生成的是一个 TypeScript 项目，可与任何现代编辑器配合使用。请在 VS Code 或其他支持 TypeScript 的 IDE 中打开该项目目录，并编辑 src/main/index.ts 以实现桌面应用逻辑。

还需要了解以下文件和目录：

mobrowser.conf.json：应用名称、版本、作者、bundle 标识符、图标路径以及安装程序设置。
assets/：适用于所有平台的应用图标。
resources/：会被原样复制到应用包中的文件，例如托盘图标。

Visual Studio Code 中的 MōBrowser 项目

生成的项目在 VS Code 中打开，当前选中的是 src/main/index.ts。

在系统托盘中显示应用

现在，让我们的应用显示在系统托盘中。为此，我们将按照以下代码创建并配置应用托盘：

import { app, desktop, Menu, MenuItem, Tray } from '@mobrowser/api';

const tray = new Tray({
  tooltip: 'Pure Photos Desktop',
  imagePath: app.getPath('appResources') + '/imageTemplate.png',
  menu: new Menu({
    items: [
      new MenuItem({
        id: 'about-pure-photos',
        label: 'About Pure Photos',
        action: () => {
          desktop.openUrl('https://purephotos.app');
        },
      }),
      'separator',
      new MenuItem({
        id: 'quit',
        label: 'Quit',
        action: () => {
          app.quit();
        }
      }),
    ],
  }),
});

Pure Photos 应用托盘

自定义应用图标

为了自定义应用图标，我们可以使用 Pure Photos 的官方 Logo，将其转换为所需格式，并用它替换默认的应用图标。

启动应用程序并确认新的图标已生效：

Pure Photos 应用图标

生成应用安装程序

当桌面应用中的所有必要功能都完成之后，我们就可以将它交付给终端用户。为了提供更流畅的用户体验，MōBrowser 会自动为当前操作系统生成原生格式的应用安装程序。

要构建桌面应用的生产版本并生成安装程序，请执行以下命令：

npm run mobrowser build

安装程序将位于 build/dist/<platform>-<arch>/pack 目录中。

Pure Photos DMG

建议您在将应用分发给终端用户之前，先对其进行签名和公证。这是因为 macOS 要求所有应用必须经过签名和公证后才能运行。

就是这样！借助 MōBrowser，您还可以为桌面应用添加许多其他功能，但如果全部展开，这篇文章就会过长。

顺便说一句，您不仅可以转换自己的 Web 应用或网站 ;)

完整示例

以下是创建好的桌面应用的完整源代码：

import { app, BrowserWindow, desktop, Menu, MenuItem, Tray } from '@mobrowser/api';

const win = new BrowserWindow()
win.browser.loadUrl('https://purephotos.app/my/dashboard')
win.setSize({ width: 1000, height: 800 })
win.show()

const tray = new Tray({
  tooltip: 'Pure Photos Desktop',
  imagePath: app.getPath('appResources') + '/imageTemplate.png',
  menu: new Menu({
    items: [
      new MenuItem({
        id: 'about-pure-photos',
        label: 'About Pure Photos',
        action: () => {
          desktop.openUrl('https://purephotos.app');
        },
      }),
      'separator',
      new MenuItem({
        id: 'quit',
        label: 'Quit',
        action: () => {
          app.quit();
        }
      }),
    ],
  }),
});

tray.on('mouseDown', () => {
  tray.openMenu();
});

Pure Photos 应用

接下来

使用 MōBrowser，几分钟内即可将您的 Web 应用转换为桌面应用。亲自体验一下 MōBrowser 如何简化开发流程，并帮助您在更短时间内构建现代、美观的跨平台桌面应用。

如果您有任何问题，或需要专家指导，请随时联系我们。我们很乐意协助您的公司打造现代、美观且功能完善的跨平台桌面应用。

返回博客