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

时间:2015-04-16 21:08:45

标签: html web-applications converter desktop-application

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

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

有什么想法吗?

// UPD

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

9 个答案:

答案 0 :(得分:16)

电子是最简单的方法:

<强> 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

要构建应用程序,请使用构建器,例如电子构建器。

希望能帮到你!

答案 1 :(得分:6)

我自己一直在寻找一个全方位的解决方案。我尝试了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以了解如何使用该应用程序。

这是截图。 The WebDGap Application

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

我还为移动用户制作了一个编码操场,内置了这个名为kodeWeave的功能。

这是一款Tic-Tac-Toe游戏,我将作为Mac App导出: kodeWeave App

现在,网络应用程序作为原生Mac应用程序运行! Tic-Tac-Toe is now running as a Mac App

答案 2 :(得分:2)

您必须稍微重写您的应用,但apache cordova支持部署到Windows:

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

答案 3 :(得分:1)

(完全公开,我是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将阻止打开您的桌面应用。
  • 自动更新-仍然有一个Web浏览器在桌面应用“下方”运行,重要的是要保持此更新有两个原因。 1.安全问题+漏洞应随时间推移进行修补。 2.您不想在5年后就一直坚持不支持旧的Web浏览器,因为您的桌面应用程序的浏览器尚未更新

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

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

Convert webapp to desktop app using web2desk

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

Desktop App for Mac, Linux and Windows platforms

答案 6 :(得分:0)

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

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

答案 7 :(得分:-1)

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

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

答案 8 :(得分:-1)

将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”