Everybody wants to make mobile apps these days. Here's the big secret. Many apps are really written in HTML5, CSS, and JavaScript. You already know everything you need to make apps that work on mobile devices. Better yet, you don't need to learn a new language or get permission from the app store or purchase a license, as you do for native apps.
There's a couple of wonderful tricks you can do for iOS users. You can design your program so the user can add an icon directly to the desktop. The user can then start the program like any other app. You can also make the browser hide the normal browser accoutrements so your program doesn't look like it's running in a browser!
It turns out these effects are quite easy to do.
Add an icon to your program
Modern versions of iOS (the iPhone/iPad operating system) already have the ability to store any web page on the desktop. Just view the web page in Safari and click the Share button. You'll find an option to save the web page to the desktop. You can instruct your users to do this, and they'll be able to launch your program like a normal app.
However, the default icon for a saved app is quite ugly. If you want a nice-looking icon, you can save a small image as a .png file and put it in the same directory as your program. Then, you can add this line to your page (in the header) and that image will appear on the desktop when the user saves your program:
<link rel="apple-touch-icon" href="myImage.png" />
As an added bonus, the iPhone or iPad automatically adjust the image to look like an Apple icon, adding the effects appropriate to the installed version of iOS (rounded and glassy in iOS6, flat in iOS7.)
Of course, this icon trick is an Apple-only mechanism. With most versions of Android, any bookmark you've designated with your main browser can be added to the desktop, but there is no custom icon option. The apple-touch-icon directive will simply be ignored if you're using some other OS.
Remove the Safari toolbar
Although your program looks good from the main screen, when the user activates the program it's still obvious that the program is part of the web browser. You can easily hide the browser toolbar with another line in the header:
<meta name="apple-mobile-web-app-capable" content="yes" />
This code will not do anything different unless the program is called from the desktop. However, in that case, it hides the toolbar, making the program look and feel like a full-blown app. As an added bonus, this runs the program in a full-screen mode, giving you a little more room for game play.
Again, this is an Apple-specific solution. There isn't an easy way to achieve the same effect on the Android devices.
Store your program offline
Now your program is looking a lot like an app, except it only runs when you're connected to the Internet. HTML5 has a wonderful feature that allows you to store an entire web page locally the first time it's run.
Then if the user tries to access the program and the system can't get online, the local copy of the game is run instead. In essence, the program is downloaded the first time it is activated and stays on the local device.
This is a relatively easy effect to achieve:
Make your program stable: Before you can use the offline storage mechanism, you'll want to make sure your program is close to release-ready. At a minimum, you'll need to ensure you know all of the external files needed by the game.
Use only local resources: For this kind of project, you can't rely on the external Internet, so you'll need to have all your files local. This means you can't really use PHP or external files. You'll need to have a local copy of everything on the server.
Build a cahce.manifest file: Look at the directory containing your game, and create a new text file called .
Write the first line: The first line of the cache.manifest file should only contain the text CACHE MANIFEST (all in capital letters).
Make a list of every file in the directory: Write the name of every file in the directory, one file per line. Be careful with your capitalization and spelling.
Add the manifest attribute: The tag has a new attribute called manifest. Use this to describe to the server where the cache manifest can be found:
<html lang = "en" manifest = "cache.manifest">
Load the page normally: You'll need to load the web page once in the normal way. If all is set up correctly, the browser will quietly make a copy of the file.
Test offline: The best way to test offline storage is to temporarily turn off wireless access on your machine and then try to access the file. If things worked out, you should be able to see your page as if you were still online.
Check server settings: If offline storage is not working, you might need to check with your server administration. The text/manifest MIME type needs to be configured on the server. You might have to ask your server administrator to set this option in the .htaccess file for your account:
addtype text/cache-manifest .manifest
Note that it can take the cache-manifest mechanism several hours to recognize changes, so when you make changes to your page, these changes aren't automatically updated to the local browser. That's why it's best to save off-line archiving for near the end of your project development cycle.