Play game developed with HTML5, CSS and JavaScript without an internet connection - javascript

I have developed a game using the technologies mentioned above, however I would like the game not to need a web server to play it, but to run as if it were a desktop application.
I have read that with node js you can create a local web server and with that to run the game, but I don't know how to achieve it.
The idea is that the game has an icon on the desktop and after executing it, it can be played, that is, everything is integrated and the person who has the game does not need to download external programs such as xampp.
Final note: is this possible for smartphones?

Your best bet is ElectronJS, it is a NodeJS library that lets you package browser code as a desktop app. It works for macOS, Linux, and Windows.
Website: https://electronjs.org
Edit: Also once the app is packaged and in your computer you won’t need an internet connection. Final note, it turns it into an actual app so like app for macOS and exe for windows. So they won’t need a web server on their computer to run it.

Related

How to play System Media Sounds

I'm developing an Desktop application using ElectronJS.
How can I play System Media sounds?
I know that for C# I can use
// Plays the sound associated with the Asterisk system event.
System.Media.SystemSounds.Asterisk.Play();
How can I do a similar call on ElectronJS?
As far as I am aware, there is no way to play a system sound using an Electron app directly. However, there are workarounds. You can ship with system sounds in your application and playing one depending on the OS your user is running, and shell beeps can be provided by importing shell from Electron and calling shell.beep();.
Another alternative may be detecting what OS is being used and pointing your media player at the relevant system sound file. This can be done with a hidden window that includes an HTML5 media player.

opencv,node.js and android communication

I have developed a program which detects human in real time(webcam) and displays it to the webpage of the local network. This is done by creating a server and websockets using Node.js and opencv.
Now, I have to develop an android app where i should get a notification everytime when the human is detected from the webcam video of a local host. How can i achieve this using node.js server and android interfacing?
Any suggestions or inputs with code examples would be more helpful.
Try using ionic to convert between webpages and android. Then use push notifications to alert the user.

How to use the browser as the GUI for an offline application?

I want to be able to create an offline program that can use the browser as GUI. I'm not particularly good at GUI programming in general, and overall it seems that using HTML and CSS to structure a GUI would be the easiest.
Cross browser method is preferred, but I will most likely use Google Chrome
I need to be able to open an external program, possibly with command line arguments
Javascript seems like the best language for this, however as far as I know it isn't possible to launch programs with it.
This is on Windows 7.
That's a good idea and is done by a several popular softwares.
The best way is to make your offline program run a web server that the browser will be able to access.
ie: Your program starts a web server on localhost:5555 and then you'll be able to request http://localhost:5555/users in Javascript, from your browser.
Another approach could be using a UI framework like AngularJS + local storage. I'm working on an app right now that will be used online (connected to the web), online locally (connected to a local server that is not connected to the web), and offline.
You could build a single-page web app and let Angular manage all the "urls".

Running complex web apps locally

I downloaded a chat template online called shout. When I upload the chat template to heroku, it works fine. However, when I simply doubleclick its index.html in my local browser, it doesn't work. The page refreshes every milisecond. Is this an error specific to what I downloaded, or this is a common phenomenon? If so, is there a way around it?
You need to start a local server to do the http requests.
If you are on a PC download mamp:
http://www.mamp.info/en/
If you are on OSx check out tutorials by the coolest guy on the planet blog:
http://coolestguidesontheplanet.com/get-apache-mysql-php-phpmyadmin-working-osx-10-10-yosemite/
Nothing is wrong with your browser or computer. Based on the language of that chat template, you need to run a server on your local machine to test your app in localhost environment. Most of the popular languages like PHP, Java, ASP, etc run fine on XAMP and WAMP. Just google for one of them, install and voila, you have a server running. Then you can open the index.html as usual and get it working like on Heroku.

What is the best way for a website to check if a user has installed a client app?

Let's say I've got a website that works better if a client has installed and logged into a desktop application. I'd like to be able to do 2 things:
Alter the website if they haven't installed the app (to make it easy for them to find a link to the installer)
If they've installed the app on a couple of machines, determine which machine they are browsing from
I'd like something that works on Windows and OSX, on any of the major browsers. Linux is a bonus.
A few thoughts:
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
Could I just let the client serve HTTP on localhost and do some javascript requests to fetch a local ID? I know google desktop search did something like this at one point. Is this a standard practice?
Thanks!
You can register a protocol from your desktop application (see this). This can be used, for example, to open your desktop application with arbitrary data from the website. You could then have your desktop app send a HTTP request to your webserver, telling it what machine you are on.
You can have a browser plugin (activex for IE or Netscape plugin for the rest of the browsers) that can communicate with the application. When the webpage is loaded, it can try to instantiate the plugin and if it succeeded, it can use it as a proxy to the application. If it fails, then either the app is not installed or the plugin was explictly disabled by the user. Either way, your website should degrade its functionality accordingly.
Update: Forgot to answer your questions:
Flash does it exactly this way. Flash is a browser plugin that is created by the web pages.
You can have a machine ID generated at the application/plugin install time and your plugin can pass that machine ID to the webpage when it is created.
On the topic of using local webserver:
I would stay away from having a local webserver, mainly because of security considerations. It takes quite a lot of work to make sure your local webserver is locked down sufficiently and there are no XSS vulnerabilities that other malicious websites can exploit to make it do stuff on their behalf.
Plus, having a webserver means that either it has to run as a system-wide process, or if it runs as the user, you can have the website interact with only one user's instance of the application, even though multiple users can be logged on and running it at the same time.
Google Desktop Search suffered from both the XSS security vulnerability (though they fixed it) and the limitation of only one user being able to use it on a machine (I don't know if they fixed this one yet, though chances are they did).
Websites can detect if you've got Flash installed.
Actually, I believe a browser can detect if you have the Flash plugin for the browser installed, and webpages can offer "installed" and "uninstalled" option that the browser can choose.
Otherwise, you are asking for a means, by putting some code in a webpage, of being able to analyze a user's home computer, and report what it learned to you website.
Can you say Major Security Hole?
If you can pick a development environment for the desktop app, then check out AIR from Adobe. It lets you develop desktop applications using either html/javascript, Flash, or Flex.
It has API calls you can use from a browser based flash app to see if the desktop based AIR app is installed, what version, etc. You can even launch it and pass parameters from the web app to the desktop app.
http://www.rogue-development.com/blog2/2008/03/interacting-with-an-air-app-from-a-browser-based-app/
Websites can detect if you've got Flash installed. How does that work and could it be used for both of my goals?
it's quite a bit simple, your browser tries to render some additional files, with some specific formats such as flash .swf and I the browser doesn't find installation, then will be start downloading, or you will get the option to download that program.
Flash also uses AC_RunActiveContent.js please take a look at this js, people usually put this on their webpages
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave cabs/flash swflash.cab#version=8,0,0,0','width','981','height','635','id','build5','align','middle','src','build5','quality','high','bgcolor','#ffffff','name','build5','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','build5' ); //end AC code
}

Categories