English Version: My first HTML5 APP
For quite some time Apps are a big talking point. I haven’t dealt with Apps as yet; the process to create an App seemed to me much too complicated. I don’t want to be an licensed Apple-Developer and I don’t want to to offer my applications on a website which is controlled by Apple. My heart beats in the open source rhythm.
For some clients and customers it can be very attractive to sell their Apps in the Appstore for marketing reasons. In such a case there are plenty of good App Developers. My competence area is and stays HTML & Co. For that reason I’ve decided to create my first HTML 5 App. Actually I just wanted to practice first.
At the back of my mind was the idea to add an HTML 5 App to a future version of a Joomla-Template.
But before I get myself into experiences I have to learn the ropes of creating an App with HTML 5.
I knew there are plenty of possibilities to cache the contents with the LocalStorage and the Manifest-File, and later in the offline mode to access them, a technique which intrigued me. In the net I searched for interesting examples and finally found the thymer-application of Calvin, on which base I created my Joomla Developer App. The whole thing isn’t more than an experiment and not supposed to be taken seriously.
Web developers often sit hours and hours in front of their computer, without moving when they have some exciting problems to solve. Then in the evening the back hurts and in the course of years your weight rises. But when you get up every 2 hours for just 3 minutes jumping you’ll feel better, so my App reminds you after a variable time to move around to reduce your body’s weight
You can find the example here: http://der-auftritt.de/kunden/myfirstapp
Technique
Offline avaliable with the Manifest-File
At first a completely normal HTML-Site is built the contents of which should later be available in the offline mode. This happens with help of the Manifest-File in which you list the deposited files and involve them in the head of the HTML site.
<! doctype html>
< html manifest = "angie.manifest" >
....
While creating the File you have to watch out for some things:
- The file has to be saved as utf-8 and must not have any unicode-signs
- The file has to start with: CACHE MANIFEST
- For every referenced element must be set up a new line
- It has to be delivered with the MINE-type cache/manifest
The last step requires some effort, cause most often webservers aren't able yet to deliver these MINE-types. For that reason we have to teach this MINE-type to the webserver by creating a .htaccess file. Notice the AddType text/cache-manifest .manifest. in the file.
The whole thing is less fault-tolerant. I myself am creative in this way which is sometimes also chaotic.For example if there is a unused file located in the manifest it will not work as desired. So we have to preserve order!
Example:
CACHE MANIFEST
clock_32x32.png
index.html
jquery-1.5.2.min.js
minus_12x3.png
reload_12x14.png
...
If you want to control in Firefox whether all files arrived in the offline cache you have to enter
about: cache
in your browser.
You can delete these contents with: Edit->Preferences->Advanced->Network
The Meta-Data: Icons for the IPhone depose and affect the illustration.
On the IPhone you can add the latest browser site to your home screen. To integrate this Icon Meta-Data are avaliable. The Icon itself should be 57x57 Pixels and in the png format.
<link rel="apple-touch-icon" href="iphon_icon.png"/>
Furthermore we have the option to determine a splash screen, this will be shown when you click on the Home-Screen-Icon.
<link rel="apple-touch-startup-image" href="startup.png" />
The size complies with the available resolution. In this case 320x 460 Pixel.
Force fullscreen.
To open the application with a click in Fullscreen-Mode there is also a Meta-Data available.
< meta name = "apple-mobile-web-app-capable" content = "yes"/>
The attribute content=”yes” is the key to success. A complete reference of the Meta-Data is to be found on the Apple website
.HTML 5 Element <audio> Integration
The aim of my little App is, that after a specific time an alarm rings and afterwards my little image jumps to a hot beat. The whole worked very quick in the Firefox. The necessary Audiofiles were just integrated with the <audio>-Element and if necessary with play() enabled. The only problem was the beat, because it was to repeat every time. The loop- function is not supported by the Firefox, so that I had to integrate the sound with two different id's. So when one sound was finished the other started.
As I wanted to check the whole thing with the Desktop-Safari (on Windows) nothing worked. The contents of the audio-element were not recognized. The reason for that was that Safari just interprets the <audio>-Element right when on my PC the Quicktime-Plugin is installed. So I had no option to install the Plug-In.
Audio-Sprites
But with this the problems aren't solved. Safari hat some problems when you integrate more than one Audiofile. Doesn't matter what I tried, every time the first sound was played and the other one was ignored. This hit me on an idea to put both sounds in the same data and to switch in the timeline forward and back.
document.getElementById('alarm-sound').play();
// rewind
document.getElementById('alarm-sound').addEventListener('ended', function(){
this.currentTime = 6.00;
this.pause();
this.play();}, false);
With help of the EventListener('ended') it is possible to controll, wether <audio>-File is played, then you can react accordingly. This method has solved at the same time the Firefox Loop-Problems. The only downside is the little time lag, when the cycle is interrupted. For this problem I haven't found a solution yet. I'm thankful for tips.
The test run on the IPhone: disillusioning
Everything worked like I wanted but unfortunately without sound. Apple prevented playing sound automatically on the IPhone without User-Interaction. This is justified because of huge range problems. To prompt the User-Event I assigned the function:
document.getElementById('alarm-sound').load();
And it worked.
The bottom line is that: To create the App wasn't that easy but I learned many things. I don't know whether the whole thing works on the Android or on the IPad, because I don't own one I'd be thankful for tests.