【问题标题】:How do I convert web application into desktop executable?如何将 Web 应用程序转换为桌面可执行文件?
【发布时间】:2015-06-23 12:37:44
【问题描述】:

我已经使用 AngularJS/jQuery/Bootstrap 和 AJAX REST API 构建了 HTML 应用程序。
是否可以为 Windows 操作系统创建可执行文件/安装程序?

没有任何第三方软件,它应该看起来像原生应用程序,但 HTML。
例如,Slack messenger 有 web/mac/windows 版本,它们看起来一样。

有什么想法吗?

// UPD

我可能需要一个包装器(webview),但我需要 EcmaScript5/CSS3 的所有功能。

【问题讨论】:

标签: html web-applications converter desktop-application


【解决方案1】:

电子是最简单的方法:

1.安装

2。创建和编辑 main.js:

const electron = require('electron');
const { app, BrowserWindow } = electron;

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 700
    });

    mainWindow.setTitle('title of the desktop app');
    mainWindow.loadURL('http://www.yourwebpage.com');

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
});

3.执行桌面应用:

electron main.js

要构建应用程序,请使用诸如 electron-builder 之类的构建器。

希望对你有所帮助!

【讨论】:

  • 它会成为一个真正的桌面应用程序还是只是一个特定于站点的浏览器?
  • @Mojimi 他做的是一个特定于站点的浏览器,需要互联网连接才能显示该站点。
  • @MrigankPawagi 我假设 electron 也有能力创建一个完全独立的基于 html 的应用程序?
  • @Mojimi 是的,当然,这就是 electron 的用途 - 使用 Web 技术的跨平台应用程序!
  • Electron 应用程序是否可以在客户端计算机上“不安装任何浏览器”的情况下运行?
【解决方案2】:

(完全公开,我是ToDesktop的创始人,在这里我会尽量客观公正。)

在计算机科学领域,答案是“视情况而定”!

您应该问自己的第一个问题是:谁在使用桌面应用程序? 只有你?或者,您是否向客户分发应用程序?因为这两个细分市场有非常不同的需求。

只有你

这里有很多选项(排名不分先后):

  1. Nativefier — 显而易见的选择。许多配置选项,许多贡献者,开源并定期更新。如果您想为自己打造一款应用,这可能应该是默认选项。
  2. WebDGap — 这是一个可爱的项目,但它有点老了,“截至 2018 年 4 月 13 日,WebDGap 不再是一个活跃的项目。”。还应该注意的是,这是基于旧版本的 node-webkit 而不是 Electron。
  3. Web2Desk — 如果您不想弄乱命令行,这是个不错的选择。它在引擎盖下使用 Nativefier。它是免费的,带有启动画面或 19 美元(移除启动画面)。
  4. Electron 自己动手——in this earlier answer 很好地涵盖了基础知识。我喜欢这个选项,因为它让你可以完全灵活地在任何你喜欢的地方进行项目,而且你也会学到一些 Electron。
  5. Fluid App仅限 Mac,但除此之外,它是一个可爱的解决方案,而且超级简单。标准版是免费的,还有一个 5 美元的版本,其中包括全屏等功能。
  6. Flotato仅限 Mac 但这是一个非常有趣的方法。只需克隆应用程序并将其命名为 docs.google.com,然后它就会变成 Google Docs。在撰写本文时,它处于预发布状态(尚未发布),但我会密切关注,这非常酷。
  7. ToDesktop — ToDesktop 可以工作,但如果您正在创建个人应用程序,它可能有点矫枉过正。此外,对于这个用例来说,它可能有点太贵了。 ToDesktop 的目标是创建一个桌面应用程序以分发给客户(详细信息见下文)。

分发给客户

在创建桌面应用程序以分发给您的客户时,有一些额外的注意事项变得更加重要:

  • 安装程序 — Mac 用户期望“拖动到应用程序”DMG 文件。 Windows 用户期望安装程序,他们还期望能够从控制面板卸载它。
  • 代码签名 — 如果您的应用未经过代码签名,则默认情况下 Windows Authenticode 和 Apple Gatekeeper 会阻止您打开桌面应用。
  • 自动更新 — 仍然有一个网络浏览器在您的桌面应用“下方”运行,保持更新很重要,原因有二。 1.安全问题+漏洞应该随着时间的推移而修补。 2. 您不想因为您的桌面应用程序的浏览器尚未更新而在 5 年内被困在支持旧的网络浏览器中

上述工具不提供这些功能,因此它们并不真正适合将您的应用分发给客户的用例。这些是我们在构建 ToDesktop 时想要添加的功能,所以我认为它非常适合这个用例。我们一直在添加功能,上周我们增加了对 App Protocols and Deeplinks 的支持。

【讨论】:

  • 我没试过,但是页面看起来很棒,恭喜,继续努力:)
  • 另一个披露,这是一项付费服务​​,所以在知道之前不要设置所有东西,然后意识到你白白浪费了所有时间。
【解决方案3】:

我自己一直在寻找一个全方位的解决方案。我尝试了 TideSDK、AppJS、Appcelerator Titanium、VB.NET 中的本机代码、XCode、Python、C++、Electron、node-webkit 等所有内容:基本上你说的我都试过了。

注意 Electron 很好,但它只能在 64 位处理器上运行。所以如果你想在 32 位处理器上运行你的应用程序,node-webkit 是很好的选择。

所以我决定构建自己的开源解决方案,名为WebDGap

目前 WebDGap 可在 Windows、Linux、Mac OS X、Google Chrome 上运行并作为 Web 应用程序运行!

观看How To Video 了解如何使用该应用程序。

这是一个屏幕截图。

由于您已经是 Mac 用户,您可以将导出的应用程序合并到 1 个 .app mac 文件中。这可以通过 Automator(和一些 shell 脚本)来完成。

还有一个我为移动用户制作的编码游乐场,它内置了这个功能,称为kodeWeave

这是我要导出为 Mac 应用程序的井字游戏:

现在网络应用程序作为本地 Mac 应用程序运行!

【讨论】:

  • 我下载了这个,当我运行它时,它看起来像是垃圾邮件 - 顶部有广告,并且需要更改我的 DNS。我立即关闭并删除。
  • 获取 使用 google 登录时,此浏览器或应用程序可能不安全。任何人都可以在 github/sourceforge 上使用最新的 google chrome 引擎更新它吗?
【解决方案4】:

我知道的最简单和最快的方法是使用 nodejs/npm 的 nativefier 库,它是 electronjs 的底层。只需 5 分钟即可为 Windows 创建可执行文件。即使是没有编程经验的人也可以从 Web 应用程序创建桌面应用程序。下面提到的帖子描述了将 Web 应用程序转换为桌面应用程序的步骤。必读!

Convert any web application to desktop application in 2 min using npm’s nativefier

【讨论】:

  • 链接已损坏。
【解决方案5】:

有大量框架可以将您的 Web 应用程序封装到本机应用程序中,该应用程序可以访问操作系统的文件存储 API 等内容。 This is the specific guide for Windows.

请注意 - 您将需要花时间为您的原生应用程序进行可靠的测试和 QA 工作,这样它就不会像原生包装器中的网站一样,并且可以与所有应用程序很好地集成要兼容的操作系统版本。 Tweetdeck for Mac 是一个不应该做的例子 - 基本上是原生包装器中的网络浏览器。

【讨论】:

  • 是的,我需要一个包装器来删除所有浏览器控件并启动 webview。但我需要支持 EcmaScript5/CSS3 的几乎所有功能。
  • 你能详细说明你为什么需要这个吗? Slack 的应用程序是本地代码的结果,该代码具有 1000 多个小时的高质量开发工作,并且不断更新。尽管在视觉和功能上看起来都一样,但与操作系统的集成(例如咆哮通知)使用的是原生操作系统代码。
【解决方案6】:

使用Web2Desk:如果您正在寻找免费且简单的解决方案。

您只需输入网络应用程序(或网站)的 URL,即可立即生成适用于 Mac、Windows 和 Linux 的桌面应用程序。

【讨论】:

    【解决方案7】:

    使用一些包装器代码,您可以将其打包为 Chrome 应用程序。它们不需要在浏览器窗口中运行,但具有独立的网络应用程序的所有功能。

    https://developer.chrome.com/apps/about_apps

    【讨论】:

    • 谢谢,但应用程序不应依赖第三方软件。
    • Google 刚刚宣布计划逐步停止在除 Chrome OS 之外的所有平台上对 Chrome 应用程序的支持。 theverge.com/2016/8/19/12555052/…
    【解决方案8】:

    将 Web 转换为 Exe 的最佳方法是使用 nativefier:

    nativefier --name "Inventory Management System" "http://localhost/php_stock_zip/php_stock_zip/php_stock/" -i ./icon.png -p windows
    

    步骤:

    1. 按 Win+x
    2. 按 C
    3. 类型
    4. 本机生成器

    安装要求 * macOS 10.9+ / Windows / Linux * Node.js >=6(4.x 可能工作但不再测试,请升级) 有关更多信息,请参阅可选依赖项

    第 5 步:npm install nativefier -g

    最后输入 nativefier "Web Link"

    【讨论】:

      猜你喜欢
      • 2012-07-17
      • 2021-04-02
      • 2022-01-05
      • 2019-07-26
      • 1970-01-01
      • 2011-07-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多