Html 如何将 Web 应用程序转换为桌面可执行文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29686011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I convert web application into desktop executable?
提问by Miraage
I've HTML application build with AngularJS/jQuery/Bootstrap with AJAX REST API.
Is it possible to create executable/installer for Windows operating system?
我已经使用 AngularJS/jQuery/Bootstrap 和 AJAX REST API 构建了 HTML 应用程序。
是否可以为 Windows 操作系统创建可执行文件/安装程序？
Without any 3rd-party software, it should look like native application, but HTML.
For example, Slack messenger has web/mac/windows versions and they look same.
没有任何第三方软件，它应该看起来像原生应用程序，但是 HTML。
例如，Slack messenger 有 web/mac/windows 版本，它们看起来一样。
Any ideas?
有任何想法吗？
// UPD
// 更新
I probably need a wrapper (webview), but I need all features for EcmaScript5/CSS3.
我可能需要一个包装器（webview），但我需要 EcmaScript5/CSS3 的所有功能。
采纳答案by Aral Roca
Electron is the easiest way:
电子是最简单的方法：
1. Install electron
1.安装电子
2. Create and edit main.js:
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. Execute desktop app:
3. 执行桌面应用程序：
electron main.js
And to build the app, use a builder such as electron-builder.
要构建应用程序，请使用诸如电子构建器之类的构建器。
Hope that helps you!
希望能帮到你！
回答by Michael Schwartz
I myself was looking for an all around solution for awhile. I tried everything from TideSDK, AppJS, Appcelerator Titanium, native code in VB.NET, XCode, Python, C++, Electron, node-webkit, etc: Basically you name it I've tried it.
我自己一直在寻找一个全方位的解决方案。我尝试了 TideSDK、AppJS、Appcelerator Titanium、VB.NET 中的本机代码、XCode、Python、C++、Electron、node-webkit 等的所有内容：基本上你说的我都试过了。
Note Electron is nice, but it only runs on 64bit processors. So node-webkit is good if you want to run your app on 32bit processors.
注意 Electron 很好，但它只能在 64 位处理器上运行。所以如果你想在 32 位处理器上运行你的应用程序，node-webkit 是很好的。
So I decided to build my own open source solution called WebDGap.
所以我决定构建我自己的开源解决方案，称为WebDGap。
Currently WebDGap runs on Windows, Linux, Mac OS X, Google Chrome and as a web application!
目前，WebDGap 可以在 Windows、Linux、Mac OS X、Google Chrome 上运行并作为 Web 应用程序运行！
Watch the How To Videoto learn, well how to use the app obviously.
观看操作视频以了解如何使用该应用程序。
Here's a screenshot.
这是一个屏幕截图。
Being that you're a Mac user already you can merge your exported app into 1 .app mac file. This can be done with Automator (and a little shell scripting).
由于您已经是 Mac 用户，因此您可以将导出的应用程序合并到 1 个 .app mac 文件中。这可以通过 Automator（和一些 shell 脚本）来完成。
There's also a coding playground I made for mobile users that has this feature built in called kodeWeave.
还有一个我为移动用户制作的编码游乐场，它内置了这个名为kodeWeave 的功能。
Here's a Tic-Tac-Toe game I'm going to export as a Mac App:
这是我要导出为 Mac 应用程序的井字游戏：
Now the web app is running as a native Mac application!
现在 Web 应用程序作为本机 Mac 应用程序运行！
回答by Robert Moskal
You'd have to rewrite your app somewhat, but apache cordova supports deployment to windows:
您必须稍微重写您的应用程序，但 apache cordova 支持部署到 Windows：
回答by DaveJ
(Full disclosure, I'm the founder of ToDesktop, I'll try to be objective and unbiased here.)
（完全公开，我是ToDesktop的创始人，在这里我会尽量客观公正。）
As usual in Computer Science, the answer is "it depends"!
和计算机科学一样，答案是“视情况而定”！
The first question that you should ask yourself is: Who is the desktop app being used by? Just you? Or, are you distributing the app to customers? Because these two segments have very different needs.
您应该问自己的第一个问题是：谁正在使用桌面应用程序？就你一个？或者，您是否将应用分发给客户？因为这两个细分市场有着非常不同的需求。
Just you
只有你
There are a lot of options here (in no particular order):
这里有很多选项（排名不分先后）：
- Nativefier— The obvious option. Lots of configuration options, lots of contributors, open source and regularly updated. This should probably be the default option if you want to whip up an app just for yourself.
- WebDGap— This is a lovely project but it is a little old and "as of April 13th, 2018 WebDGap is no longer an active project.". It should also be noted that this is built on an old version of node-webkit and not Electron.
- Web2Desk— Great option if you don't want to mess around with the command-line. It uses Nativefier under-the-hood. It is free with a splash screen or $19 with the splash screen removed.
- Do-it-yourself with Electron— The basics were covered quite well in this earlier answer. I like this option because it gives you complete flexibility to take the project wherever you like and you'll learn a bit of Electron too.
- Fluid App— This is Mac onlybut otherwise it's a lovely solution and super easy. It's free for the standard version, there is also a $5 version which includes features like fullscreen.
- Flotato— Mac onlyagain but this is a really interesting approach. Simply clone the app and give it a name like docs.google.com, it will then turn into Google Docs. At the time of writing this, it's in pre-release (not released yet) but I'll be watching this closely, it's very cool.
- ToDesktop— ToDesktop will work but it's probably a bit overkill if you're creating a personal app. Also, it's probably a bit too expensive for this use-case. ToDesktop is targeted at creating a desktop app for distribution to customers (more about that below).
- Nativefier- 显而易见的选择。大量配置选项、大量贡献者、开源并定期更新。如果您想为自己创建一个应用程序，这可能应该是默认选项。
- WebDGap— 这是一个可爱的项目，但它有点老了，“截至 2018 年 4 月 13 日，WebDGap 不再是一个活跃的项目。”。还应该注意的是，这是建立在旧版本的 node-webkit 而不是 Electron 上的。
- Web2Desk— 如果您不想弄乱命令行，这是一个不错的选择。它在底层使用 Nativefier。带闪屏是免费的，移除闪屏后 19 美元。
- 用Electron自己动手-在这个早期的答案中已经很好地涵盖了基础知识。我喜欢这个选项，因为它让你可以完全灵活地将项目带到任何你喜欢的地方，你也会学到一些 Electron。
- Fluid App—仅适用于 Mac，但除此之外，它是一个可爱的解决方案，而且超级简单。标准版是免费的，还有一个 5 美元的版本，其中包括全屏等功能。
- Flotato—又是Mac，但这是一个非常有趣的方法。只需克隆该应用程序并为其命名，例如 docs.google.com，它就会变成 Google Docs。在撰写本文时，它处于预发布阶段（尚未发布）但我会密切关注它，它非常酷。
- ToDesktop— ToDesktop 可以工作，但如果您正在创建个人应用程序，它可能有点矫枉过正。此外，对于这个用例来说，它可能有点太贵了。ToDesktop 的目标是创建一个桌面应用程序以分发给客户（更多信息见下文）。
Distributing to customers
分发给客户
There are a few extra considerations which become more important when creating a desktop app for distribution to your customers:
在创建桌面应用程序以分发给您的客户时，有一些额外的考虑因素变得更加重要：
- Installer— Mac users expect a "drag to applications" DMG file. Windows users expect an installer and they also expect to be able to uninstall it from the control panel.
- Code Signing— If your app isn't code signed then by default Windows Authenticode and Apple Gatekeeper will prevent your desktop app from being opened.
- Auto-update— There is still a web browser running "underneath" your desktop app, it's important to keep this updated for two reasons. 1. Security issues + vulnerabilities should be patched over time. 2. You don't want to be stuck supporting an old web browser in 5 years time because your desktop app's browser hasn't been updated
- 安装程序— Mac 用户期望“拖到应用程序”DMG 文件。Windows 用户期望安装程序，并且他们还期望能够从控制面板卸载它。
- 代码签名——如果你的应用程序没有代码签名，那么默认情况下 Windows Authenticode 和 Apple Gatekeeper 将阻止你的桌面应用程序被打开。
- 自动更新— 仍然有一个 Web 浏览器在您的桌面应用程序的“下方”运行，保持更新很重要，原因有两个。1.安全问题+漏洞应该随着时间的推移进行修补。2. 你不想因为你的桌面应用的浏览器没有更新而在 5 年内坚持支持旧的网络浏览器
The tools mentioned above don't offer these features, so they're not really suitable for the use-case of distributing your app to customers. These are the features that we wanted to add when building ToDesktop, so I think it fits this use-case quite nicely. We're adding features all the time, last week we added support for App Protocols and Deeplinks.
上面提到的工具不提供这些功能，因此它们并不真正适合将您的应用程序分发给客户的用例。这些是我们在构建ToDesktop时想要添加的功能，所以我认为它非常适合这个用例。我们一直在添加功能，上周我们添加了对App Protocols 和 Deeplinks 的支持。
回答by Ben Rondeau
There are a ton of frameworks out there that can wrap your web app into a native application that can access things like the file storage API for an operating system. This is the specific guide for Windows.
有大量框架可以将您的 Web 应用程序包装到一个本机应用程序中，该应用程序可以访问诸如操作系统的文件存储 API 之类的内容。这是 Windows 的特定指南。
BEWARE THOUGH- you will need to spend time doing solid testing and QA work for your native app so it doesn't feel like a website inside a native wrapper, as well as integrates well with all versions of the OS you want to be compatible with. Tweetdeckfor Mac is an example of what not to do - basically a web browser in a native wrapper).
请注意- 您需要花时间为您的本机应用程序进行可靠的测试和 QA 工作，因此它不会感觉像是本机包装器中的网站，并且与您想要兼容的所有版本的操作系统都能很好地集成. Mac 版Tweetdeck是一个不该做什么的例子——基本上是一个原生包装器中的网络浏览器）。
回答by Felix josemon
回答by Vishwas
The most easiest and quickest way i know is to use nodejs/npm's nativefier library which underlying electronjs . It will just take 5 min to create executable for windows. Even a person who do not have programming experience can create desktop application from web application. Below mentioned post has described the steps to convert web application to desktop application. Must read !
我所知道的最简单、最快捷的方法是使用 nodejs/npm 的 nativefier 库，它是 Electronjs 的基础。只需 5 分钟即可为 Windows 创建可执行文件。即使没有编程经验的人也可以从 Web 应用程序创建桌面应用程序。下面提到的帖子描述了将 Web 应用程序转换为桌面应用程序的步骤。必读 ！
Convert any web application to desktop application in 2 min using npm's nativefier
回答by Vaibhav Singh
Best Way to Convert Web to Exe is using nativefier:
将 Web 转换为 Exe 的最佳方法是使用 nativefier：
nativefier --name "Inventory Management System" "http://localhost/php_stock_zip/php_stock_zip/php_stock/" -i ./icon.png -p windows
Steps:
脚步：
- Press Win+x
- Press C
- Type
- nativefier
- 按 Win+x
- 按 C
- 类型
- 土生土长的人
Installation Requirements * macOS 10.9+ / Windows / Linux * Node.js >=6 (4.x may work but is no longer tested, please upgrade) See optional dependencies for more
安装要求 * macOS 10.9+ / Windows / Linux * Node.js >=6（4.x 可以工作但不再测试，请升级）查看可选依赖项了解更多
Step 5: npm install nativefier -g
第 5 步： npm install nativefier -g
Finally type nativefier "Web Link"
最后输入 nativefier “Web Link”
回答by Scott Christensen
With a bit of wrapper code you could package it as a Chrome App. They do not need to run in a browser window but have all the capabilities of a web app, standalone.
使用一些包装代码，您可以将其打包为 Chrome 应用程序。它们不需要在浏览器窗口中运行，但具有独立的 Web 应用程序的所有功能。
