Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I convert web application into desktop executable?

I've HTML application build with AngularJS/jQuery/Bootstrap with AJAX REST API.
Is it possible to create executable/installer for Windows operating system?

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.

Any ideas?

// UPD

I probably need a wrapper (webview), but I need all features for EcmaScript5/CSS3.

like image 693
Miraage Avatar asked Apr 16 '15 21:04

Miraage


2 Answers

Electron is the easiest way:

1. Install electron

2. Create and edit 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:

electron main.js 

And to build the app, use a builder such as electron-builder.

Hope that helps you!

like image 127
Aral Roca Avatar answered Sep 20 '22 12:09

Aral Roca


(Full disclosure, I'm the founder of ToDesktop, I'll try to be objective and unbiased here.)

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):

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Fluid App — This is Mac only but 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.
  6. Flotato — Mac only again 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.
  7. 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).

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

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.

like image 41
DaveJ Avatar answered Sep 20 '22 12:09

DaveJ