Using the browser for desktop UI - user-interface
How can I use the browser as a UI for a desktop app? The ways I have come up with so far are...
Use all HTML/Javascript. Problem: Can't access filesystem or just about anything else.
Run a local webserver while the application is in use. Problem: How do I kill it when the user is done? My users are not technical enough to Ctrl+C.
Embed a browser component in a regular GUI. Problem: Embedded browser components tend to be glitchy at best. The support for Javascript/CSS is never as good as it is in a real browser.
...?
The ideal solution would work with any technology. I know there are options like writing Firefox extensions, but I want to have complete freedom in the backend technology and browser independence.
Please note that if you choose to run a local webserver, you're creating a security risk.
Any webpage running on the same machine that knows about your app can send requests to your server using Javascript, and you have no simple and reliable way of knowing what the request came from. (Don't trust the referer header)
Google Desktop, which uses a similar approach, has had several real-world vulnerabilities that allow any webpage to read any file on disk.
There are several ways to protect against this; I would recommend requiring each request to have a auth key which is randomly generated per-machine (and expires at some point), which you could put in the source for the actual pages. XHR protection would prevent malicious websites from reading the auth key, rendering them powerless.
If you are looking for a python Web Server with a Kill link, you could always check CherryPy.
import webbrowser
import cherrypy
import threading
class MyApp:
""" Sample request handler class. """
#cherrypy.expose
def index(self):
return """<html><head><title>An example application</title></head>
<body>
<h1>This is my sample application</h1>
Put the content here...
<hr>
Quit
</body></html>"""
#cherrypy.expose
def exit(self):
raise SystemExit(0)
class MyBGThread(threading.Thread):
def __init__(self):
threading.Thread.__init__(self)
self.start()
def run(self):
cherrypy.tree.mount(MyApp())
cherrypy.quickstart()
myThread = MyBGThread()
webbrowser.open("http://127.0.0.1:8080")
This code is based on the sample from the SingleClickAndRun on the cherrypy website:
http://tools.cherrypy.org/wiki/SingleClickAndRun
Note than in a normal WebApp you would probably use a templating engine and load templates from methods like main.
Something that would be nice would be to embbed a browser control in a gui window and close the server when the app exits.
For the security, you could possibly add an authentication scheme. There are a few that are supported by cherrypy, but you possibly could implement your own too, using tool modules.
I am looking to do the exact same thing (desktop app that uses an up to date HTML5 / CSS3 browser as the desktop app's GUI), only with Ruby (various reasons why I decided to work with Ruby). Its amazing the number of cross platform libraries people have come up with. But yet, few to no one, has done any work on trying to get a web browser to be a desktop app UI. Cross platform issue... well I won't say solved, but I will say several steps in the right direction taken.
To me this would be perfect with the new HTML5 / CSS3 standards coming out. I know it can be done with a web server running locally.
Another way might be like how the guys from “280 North” are doing what they do. They developed Objective-J (an extension of regular JavaScript that mimics how Objective-C extends regular C) and Cappuccino (the Objective-J equivalent of Objective-C’s Cocoa frame work on the MAC). They also developed “Atlas” which is 280 North’s version of Apple’s “Interface Builder” from Xcode, for their Objective-J and Cappuccino frameworks to build Internet Applications. Atlas is actually a Cappuccino web app running on your desktop as a desktop app. In this case they use the Narwhal… a cross platform, general purpose, JavaScript platform for developing JS apps outside of the browser (basically a specialized web server).
If any one can come up with an idea to make “Browser, direct connect to Desktop App” work without the need of a web server co-existing and still get to manipulate the local FS, I to would be very interested… Hmmm... Now that I think about it, I wonder if the new Google Chrome project “Native Client” can be used to do that. NaCL is much like Active X except you are not limited to a windows platform (but will be limited to the Google Chrome browser, at least for now). Only there is added security via Sandboxing, but you can manipulate the local FS… The more I think about it, the more I am beginning to suspect that it can be done.
Any thoughts?
In Windows, you could embed the IE ActiveX control, which uses the same rendering engine as IE. (That's a plus and a minus) You can set the ScriptObject property in your host code and access it in Javascript as window.external to do things that Javascript cannot do.
If you run a local webserver, you could have an exit link in the app that kills the websever.
You did not mention the OS you will need to target. But you might be able to create a program statared web server, then launced the default browser. Wait until the browser is terminated by the user and then shut down the web server.
So for example on windows you can use CreateProcess() to spawn the process
then MsgWaitForMultipleObjects() to wait until it is finished executing.
HTML Applications (HTA, for short) have been around for a while. You can read all about them here. They are basically HTML and Javascript with some extra options to create a window and with access to the local file system. They seem to be exactly what you want. It is Microsoft technology, so this will only work with IE on Windows systems. I've successfully used this as a front-end for a CD-ROM which was used to distribute software to first year students
Another option would be to use Adobe Air. I'm not all that familiar with the technology, but it seems to provide a framework to deploy web pages as desktop applications. I can't post a second link as a guest, but just google it and you'll find it soon enough.
Today, in 2023, you can simply use any installed web browser as GUI using the WebUI library.
Related
Convert server-generated site to PhoneGap/Cordova app?
What's the lowest effort way to get a site with server-generated pages (in my case Laravel/PHP) running as a PhoneGap/Cordova app? I'd rather not have to convert the whole thing into a single page app before importing into PhoneGap/Cordova. Is it possible to use PhoneGap/Cordova as a very thin wrapper and still load each page live from the server? And if so, how exactly please? I don't think we need any native phone APIs. Reason for the whole thing is my client insists on "having an app" even though obviously our site will work in a mobile web browser and can have an icon on the user's phone. Many thanks
Unfortunately for your app to pass Apple App store approval it will have to provide some basic functions and display correctly without an internet connection. This means at a minimum, if you plan to generate content on a server you will probably need the Cordova plugin for network information: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/ I would make sure you are familiar with the Apple Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ You will probably also need to bundle any JavaScript. Apple is very picky about apps that download code (this can include JavaScript). This is a section from the iOS developer Agreement. 3.3.2 Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exceptions to the foregoing are scripts and code downloaded and run by Apple's built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. The following is my opinion only My fear is that if you go at it in a low effort way, best case you will fail app approval. Worst case it will leave users with a poor experience or worse, a poor image of your client. Do it properly and give the app some extra functions that you can't have in a browser alone. I would advise your client of this and see if they would like a proper app that engages their customers and provides them with a great experience.
Desktop application using Firefox WebExtensions
I am working on a XUL desktop application, where I use the browser tag and load a URL in that tag within the desktop application. However, some websites display as old format and according to Mozilla, XUL is deprecated and will not be useable at the end of 2017. I want to build the application with the latest technology: WebExtensions. I have searched many examples on the usage of WebExtensions, but all are working within the browser. Can I make a standalone desktop application just like XUL, but using WebExtensions? If yes, then please give me some hints on how to get started. If no, is any alternative for the same requirement available?
Webextensions are fairly limited in their scope. Even if there was an application runtime utilising them, you probably wouldn't get much use out of them due to the restrictive isolation from the host system. Strictly speaking not webextensions, albeit very similar: The Electron framework/runtime* Someone at Mozilla is also working on an alternative dubbed "Positron"** though that software's future is uncertain and there is a chance he might abandon it for an entirely new, highly simplified project (at least that's what I gathered from my conversation with him on Github). *http://electron.atom.io/ **https://github.com/mozilla/positron
Web technologies in GUI apps
What's your experience in using web technologies (HTML, XML, CSS, JavaScript) to implement part of the functionality of a GUI application? Pros and cons, please. No servers, relational databases, AJAX, or cookies for session management, nor an existing webapp either, but rather a GUI app that uses web widgets (like Qt WebKit) to render and handle substantial parts of the UI, while taking advantage of a GUI framework to achieve an even richer interaction and better desktop integration. I've already validated that the approach is possible using PyQt. Content can be rendered from the file system or from strings, and URL requests (images or clicks) can be captured and served by the form's event handlers. CSS and JavaScript are supported, perhaps with some limitations. # ... self.webView.page().setLinkDelegationPolicy( QtWebKit.QWebPage.DelegateExternalLinks ) #... class TotiMainWindow(QtGui.QMainWindow): def linkClicked(self, url): pass # events arrive here Note: This question is different from this one and this one made before, among other things because there is no requirement to use web technologies on the GUI, but there is the requirement that the application should work without a network connection available, and should integrate well with the default desktop over different platforms, without previous infrastructure requirements (no .NET, Java, browsers, or database servers). Note: I posted a different version of this question on PMS but found very little experience with this approach there. Closing Note I just found most of the information I was looking for in a series of blog posts by André Pareis.
I think the largest advantage to using web markup like HTML/CSS and other web technologies is that desktop apps may very well have their days numbered. As we speak, Google engineers are working on the Chromium OS, which essentially consists of a single GUI application... the browser... Now, while nothing may never actually come of it, there is clearly a rising trend in the number of applications accessible through a web browser, accessible anywhere. It seems to me that this is the future of application development. By using these technologies, this becomes one less headache you have to deal with when or if you determine that your app should be available as a web application. Update: A few years ago, we developed an Agent Desktop for our call center that is essentially a local application that opens sockets to integrate with the phone system. The user interface the agents use is built with HTML, CSS, and JavaScript, and the experience is stunning. When we released our latest update in 2010 with a professional CSS redesign, our agents were all very impressed with not only how easy it was to interact but also how easy it was to use. In the future we will port this 100% to the browser, but for now it needs to be a local application because of the COM integration with the phone system.
We did exactly this for a project back when Windows XP was new. This gave my team several benefits: A good-looking UI with relatively little effort Easily change the style of the UI in a consistent manner using CSS Relatively simple integration with C++ (invoking functions from the ui and vice versa) The drawbacks we saw were: Some not-so-good firewalls considered accessing internal resources (ie other html pages in the ui) to be a web request Adding and accessing the needed resources could in some cases be a bit cumbersome It was possible set properties in Internet Explorer that would prevent JS from running in the application Note that some of Windows XP:s programs are using this approach. This probably works best with small, more Wizard-like parts of the ui (which our ui consisted almost entirely of). I have since then not really been involved in ui projects, so I cannot really tell you whether this approach is still valid... I know that MFC-based applications will let you use HTML-based dialogs though.
In a similar situation in 2005 I created a stand-alone webapp using XForms, CSS, JavaScript, XML and XML Schema for offline data retrieval and verification. With a good XForms -> HTML + JS transformer (Chiba) it did the job with no bug fixes after the initial release. It was used for 6-12 months (IIRC) by about a dozen engineers for a project gathering test data in the tunnel of the Large Hadron Collider. The biggest surprise of that project was just how much you get for free when going for a web platform, even for offline use. Highly recommended.
The major problem is that it reduces your development speed, or the quality of your user interface. A lot. Unless you're using Seaside, it is much faster to develop a desktop app.
There is quite some number of applications built on top of Mozilla platform. It isn't 100% web technology, as instead of HTML you use XML based XUL, but the rest is indeed web stack (JavaScript, CSS). The most successful of these it the OpenKomodo and it's commercial big brother Komodo IDE. On the other hand, as far as Qt goes, the newest version 4.7 you can build GUI using QML language. Don't let the name mislead you, it's not markup, it acctually JavaScript with app-specific extensions.
Advantages/disadvantages of browser-based interface vs. graphics
I'm in the design phase for a desktop-based application. Because of the nature of this particular application, I believe it would benefit greatly from a web-based approach (i.e., allowing a user to interface with the application through a browser running in kiosk mode) in order to leverage the simplicity of HTML/CSS/JS and the availability of many great JS interface plugins. Does taking this approach (rather than coding in a native or cross-platform graphics library) come with any gotchas?
Well, your access to the OS and other domains are going to be limited. What about using something like Adobe AIR that lets you use HTML/CSS/JS and compile it into a proper desktop app?
Please look at http://www.terrainformatica.com/htmlayout/ - the library which was designed to create desktop GUI using html and css.
The main "gotcha" to doing a web GUI is that you are going to need to set up a web server of some kind. A gui app can be just a single executable. You allso (probably) will need some GCI coding to get information back from the user to your program. In general, it is liable to be a whole lot more work. Balancing against that is the fact that any user networked to your webserver anywhere in the world using the OS and browser of their choice should be able to operate your program.
Best way to access client side devices from a web application
I need to provide support for various scanners and printers to an Intranet web application. Basically the user needs to be able to take pictures using his webcam or camera, scan using his scanner and print through his printer. Because this is an Intranet application, compatibility is not an issue. I can ensure the user has all drivers installed. But the client insists that the application should be embedded inside the browser and not run in a native window. All client machines are Windows PC, but the client is flexible with browser choice. I am thinking about writing an ActiveX control. But then I am not sure if I am using some 90s technology when better technologies might be available. Therefore, is there anything else I can look at? If I have to write ActiveX, can you point me to a good sample app to start with? I am very comfortable with C.
You could use .htc extensions on Html files. This puts the website in a different sandbox which allows for more access on client side functions (eg. execute commandline software which connects to a printer or scanner...)