如何将Web应用程序转换为桌面可执行文件？

Question

我使用带有AJAX REST API的AngularJS / jQuery / Bootstrap构建HTML应用程序。 是否可以为Windows操作系统创建可执行文件/安装程序？

没有任何第三方软件，它应该看起来像本机应用程序，但HTML。 例如，Slack messenger有web / mac / windows版本，它们看起来相同。

有任何想法吗？

// UPD

我可能需要一个包装器（webview），但我需要EcmaScript5 / CSS3的所有功能。

Answer 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

要构建应用程序，请使用电子构建器等构建器。

希望对你有所帮助！

Answer 2

我自己一直在寻找一个全方位的解决方案。我尝试了TideSDK，AppJS，Appcelerator Titanium，VB.NET中的本机代码，XCode，Python，C ++，Electron，node-webkit等等所有内容：基本上你用它来命名我已经尝试过了。

注意电子很好，但它只能在64位处理器上运行。因此，如果您想在32位处理器上运行应用程序，那么node-webkit是很好的。

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

目前，WebDGap可在Windows，Linux，Mac OS X，Google Chrome和Web应用程序上运行！

观看How To Video学习，以及如何明显地使用该应用程序。

这是一个截图。

由于您已经是Mac用户，因此您可以将导出的应用程序合并到1个.app mac文件中。这可以使用Automator（以及一些shell脚本）来完成。

我还为移动用户制作了一个编码操场，它具有内置的称为kodeWeave的功能。

这是一款Tic-Tac-Toe游戏，我将作为Mac App出口：

现在，Web应用程序作为本机Mac应用程序运行！

Answer 3

您必须稍微重写您的应用程序，但apache cordova支持部署到Windows：

https://msopentech.com/blog/2014/09/25/apache-cordova-gains-windows-8-1-and-windows-phone-8-1-support-2-2/

Answer 4

（完全披露，我是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文档。在撰写本文时，它处于预发布状态（尚未发布）但我会密切关注这一点，这非常酷。
7. ToDesktop - ToDesktop可以工作，但如果你正在创建一个个人应用程序，它可能有点矫枉过正。此外，这个用例可能有点贵。 ToDesktop旨在创建一个桌面应用程序，以便分发给客户（以下更多内容）。

分发给客户

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

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

上面提到的工具不提供这些功能，因此它们不适合将应用程序分发给客户的用例。这些是我们在构建ToDesktop时想要添加的功能，所以我认为它很适合这个用例。我们一直在增加功能，上周我们增加了对App Protocols and Deeplinks的支持。

Answer 5

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

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

Answer 6

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

其中您只需输入Web应用程序（或网站）的URL，即可生成适用于Mac，Windows和Linux的桌面应用程序。

Answer 7

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

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

Answer 8

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

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

Answer 9

将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. nativefier

安装要求* macOS 10.9+ / Windows / Linux * Node.js> = 6（4.x可能有效但不再经过测试，请升级）请参阅可选的依赖项以获取更多信息

第5步：npm install nativefier -g

最后输入nativefier“Web Link”