Simple/Best way to load Web App as Windows Desktop Application?

Question

Hello basically I have a web app built using html5/php, etc. Its a music player, similar to spotify and pandora. I want to distribute the web app for as a desktop application so people can run it straight from their desktop without opening a browser. I would not like a browser like system, just have the web view loaded (similar to just loading a webview in iOS) (no tabs no url bar, etc)

I heard of Prism but that is discontinued and I can't find a download link anywhere. Is there anything you suggest?

For Mac Os X, i found FluidApp, which seems to work great as it builds a stand alone app.

For iOS I can simply load the web app via a webview and it works great, just what i needed. For android i basically load a webview as well.

Windows just got me stump into loading the webapp via a standalone desktop app. So if anyone could help me out, it will be greatly appreciated!

Humphries

Answer 1

A simple VB.NET application should do the trick. Just create a new Windows Froms project, double click on the form, mark everything an paste this:

Public Class Form1

    '############## Settings ##############'

    'Change to your URL
    Dim url As String = "http://google.de"

    'Change to the text the window title should have
    Dim title As String = "Your Title here"

    'Change to the windows size you wish to use
    Dim window_size As Size = New Size(800, 600)
    '                                  ^X^, ^Y^
    '########### End of Settings ##########'

    Dim WithEvents WebBrowser1 As New WebBrowser

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        Me.Text = title
        Me.Size = window_size

        Me.Controls.Add(WebBrowser1)

        WebBrowser1.Dock = DockStyle.Fill
        WebBrowser1.Navigate(url)

    End Sub

    Private Sub WebBrowser1_Navigated(sender As Object, e As WebBrowserNavigatedEventArgs) Handles WebBrowser1.Navigated

        Dim elements As HtmlElementCollection
        elements = WebBrowser1.Document.GetElementsByTagName("img")

        For Each element As HtmlElement In elements
            element.SetAttribute("border", "0")
        Next
    End Sub
End Class

Edit the settings and press F5 to run. Voila, you should see you WebApp in a Desktop Application.

Nitrogenous

Awesome worked great! had a few errors with the javascript on the page, but managed to fix them. Only problem i have is that now clickable images have a border around them, a blue border and others have a purple border. When loaded inside the vb.net application. – Humphries

I could recreate the issue. It isn't a real issue, because that are the normal IE broders and the webbrowser control is based on IE, so this borders can be seen there too. The borders can be hidden when adding border="0" on all img tags. I updated the code, so the webbrowser control will add them automaticly after loading the page. I hope I could help! – Nitrogenous

I used the modified code but still, the borders are there, i will try to add the css to images themselves. Thanks for the help! – Humphries

oh thats strange, cause I set up a simple test page like this <a href="http://google.com"><img src="path/to/pic">Test</img</a> and the border is shown. When I use the modified code it works like charm. Are you using <img> tags or maybe div's with background-image set? Btw. it would be nice from you to accept the answer :) – Nitrogenous

Thanks figured it out ^.^, accepted the answer! sorry i took forever X) – Humphries

oh no problem. Happy that I could help :3 – Nitrogenous

Thanks for the code. But this is IE7 frame so it can be lag of HTML5, CSS3, New javascript function. The same was like this, i prefer Google Chrome app shortcut. It is easier too and support new technology. – Siobhan

Answer 2

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.

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.

So I decided to build my own open source solution called WebDGap.

Currently WebDGap runs on Windows, Linux, Mac OS X, Google Chrome and as a web application!

Watch the How To Video to learn, well how to use the app obviously.

Here's a screenshot.

Mac user's can merge your exported app into 1 .app mac file. This can be done with Automator (and a little shell scripting).

There's also a coding playground I made for mobile users that has this feature built in called kodeWeave.

Here's a Tic-Tac-Toe game I'm going to export as a Mac App:

Now the web app is running as a native Mac application!

Backlog

WebItWidget is not work on Windows 7 because program error. Sadly. – Siobhan

WebItWisget is an abandoned project. Use WebDGap instead. – Backlog

What is the memory consumption like for a simple Hello World app on your desktop? – Jeanett

@MichaelSchwartz thanks for the screenshot. I'm not sure how to interpret that -- does that mean nwjs is consuming 39.5 MB of physical RAM and 992.6 MB of paged RAM for a total of over 1 GB of memory? If true, that's a lot of memory for a Hello World app. – Jeanett

Negative: My last test it's 18MB. Although I'm running on an old 2012 macbook. – Backlog

Memory management in JavaScript is quite huge topic, you should use DevTools to investigate what is stored in memory with Heap Profiling (developers.google.com/chrome-developer-tools/docs/…) and the use of memory over time with Timeline (developers.google.com/chrome-developer-tools/docs/timeline) – Backlog

Keep in mind it's running off a chromium build with nodejs integrated (nwjs/formerly called node-webkit) so it will naturally use a little more ram than native applications. However the electron framework handles this much better, but it's only built for 64bit processors while nwjs is built for 32bits and 64bits. – Backlog

Answer 3

Google chrome has a 'save shortcut' in the options menu. Menu>tools>create shortcut... I think. (Posting from mobile)

When you open the shortcut, it will open it in it's own window. like an standalone app. Hope this helps.

Edit: prism was from mozilla. I'm sure there is a similar function in firefox.

Wampumpeag

sadly I do not want a google chrome or firefox shortcut, as some users might be using other browsers, i'd prefer it was a .exe people would be able to download and execute and run a desktop app that would load the webapp as a standalone app. That way i can display a "Download For Windows" and "Download For Mac". Not sure if you follow. – Humphries

Answer 4

On Windows you can take a look at Microsoft Edge WebView2. It's similar to the WKWebView on iOS, but it works on Windows. All you need to do is to create a .NET desktop application that shows a window with the embedded WebView2 control that loads your website. Then you can build and pack the app into a native executable that you can run on the target Windows platforms.

Pompea