"Hello World" web app for Android and iOS
So you want a plain simple web app. This article has one ready for you, a simple HTML5 mobile app able to hook into your users' phones and tablets running as a regular app.
Before we dive into the code, let's define what web apps (or mobile apps, or HTML5 apps) are for those who heard of the term but are also a little confused. Web apps are software applications built for web browsers. They can run in any web browser and what is different about them is that they are designed to fit in the confined space of a smartphone or tablet and use its resources in the best possible way. HTML is the backbone of all webpages and its current evolution, HTML5, is designed to co-exist in harmony with the special strengths and weaknesses of smartphones and tablets. So, web apps are much like regular webpage applications that use the device's web browser to work as if they were native apps.
Web apps have some major advantages:
- You build them once and they run everywhere.
- Your average knowledge on HTML and JavaScript is enough to start. You don't need to know Objective-C, Java or C# for the equivalent platforms (iOS, Android, Windows Phone).
- You do not need anyone's approval to publish your web app, unless you want to list it in an app store.
The advantages of web apps can also be their disadvantages:
- Your code needs to be tested thoroughly to avoid browser compatibility issues.
- Complicated web apps can easily be outperformed by their equivalent written in native languages.
- You have restricted access to the device's embedded chipsets like the camera, microphone, accelerometer, compass, GPS etc. You also have restricted access to the related APIs.
- You have restricted access to resources, like for example storage space.
- Web apps are not always welcomed in official app stores, even if you build shells around them using native languages.
Now let's get into the code. The following is a very simple HTML document with a small addition of an AppCache manifest.
File example.html
<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
<title>Hello world app</title>
<meta charset="utf-8">
<link rel="shortcut icon" sizes="128x128" href="app_icon128.png">
<link rel="shortcut icon" sizes="196x196" href="app_icon196.png">
<link rel="apple-touch-icon" href="app_icon60.png">
<link rel="apple-touch-icon" sizes="76x76" href="app_icon76.png">
<link rel="apple-touch-icon" sizes="120x120" href="app_icon120.png">
<link rel="apple-touch-icon" sizes="152x152" href="app_icon152.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
File cache.appcache
CACHE MANIFEST
The cache manifest "cache.appcache" is a one line file. You can add more content to it according to how your app will work. This file is required to help the system understand what to do when the device goes offline. You can read more about the app cache manifest files here and here.
Let's focus on the main HTML file. One of the first things you can see is the HTML title tag. The HTML document's title will become the default title of the launch icon in your device's home screen.
The next and most obvious thing you may notice in our example is the multiple icon calls. Android wants them one way, iOS another. Both want different versions of the icon where the only thing changing is the size. That happens because the devices may have smaller or larger screen resolutions and they want to pick the appropriate one depending on the device's screen resolution. Both Android and iOS can work if you provide them with only one icon, but you have to be warned that auto-resized icons may seem flawed. In case you do want to have fewer icons prefer the largest resolution because it usually resizes better down to the lower resolutions.
The first two icons containing rel="shortcut icon" are for Android's default browser and Android Chrome. In our example we haven't used the full range of Android guidelines for icon sizes, but Chrome's for Android instead. Android app iconography guidelines require icon sizes for Low DPI (or LDPI, 36x36 pixels), Medium DPI (or MDPI, 48x48 pixels), High DPI (or HDPI, 72x72 pixels), XHDPI (96x96), XXHDPI (144x144), XXXHDPI (192x192). As time goes by, screen sizes become more and more dense so we chose to leave the small DPIs behind. You may choose otherwise, depending on your project's requirements.
The following lines containing rel="apple-touch-icon" are for iOS Safari according to Apple's guidelines for web apps. The 60x60 version is for old iPhones, 76x76 for old iPads, 120x120 for iPhone retina displays and 152x152 for iPad retina displays.
The next line <meta name="apple-mobile-web-app-capable" content="yes"> orders iPhone Safari (not iPad) to hide the address bar, hence show the app as if it is a regular app. In iOS 7 this setting hides the address bar in Safari for iPhones but not for iPads. At the time of writting this article iOS 7.1 is under way and it is going to be able to hide the address bar by adding "minimal-ui" in a command you can see down a few lines.
The next line <meta name="mobile-web-app-capable" content="yes"> resembles to the previous one and it is what Chrome wants for both Android and iOS wants to hide the address bar.
The line <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui"> orders all browsers to show the contents with the intended size and not auto-resize (or auto-fit) the page. In most browsers there is an annoying delay on taps; the latest Chrome versions remove that delay when they see that command. As you can see we also added "minimal-ui" to hide the address bar in iPad Safari in the coming iOS version 7.1.
In all cases above, the first time you get into the webpage with your browser, address bars will remain visible. In the next sections of this article you will learn how to get an icon of the webpage (or the web app) to your home screen. The next time you open the app using the launch icon from your home screen, the address bars will be gone.
You may notice that we talked about hiding the address bar in Android's Chrome but not Android's default browser. The only way we found to do that with Android's default browser is either using JavaScript to move the page down and make the browser automatically hide the address bar, or by CSS doing something like html, body { height: 120% }. Those are not the clear cut solutions we want to recommend, so we leave this one out. After all, starting from Android 4.4, Chromium (the open source cousin of Chrome) is Android's new default browser.
Finally, the line <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> fixes a glitch in iOS v7.0 Safari for iPhone. Hopefully, future releases of iOS will make this fix redundant.
The rest of the HTML document has nothing particularly interesting. Feel free to morph it in your own creative way.
Test run
You can test run this web app from your smartphone or tablet by accessing this URL with your browser:
http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html
Once you get into the app with your smartphone or tablet browser, read the following sections to learn how to add those icons to your home screen.
How to add the launch icon to your home screen from Android's default browser
Access the webpage from your Android's default browser (prior to Android 4.4). Click the menu button and from the options choose "Add shortcut". You can now access the web app from your home screen.
Notice: This section refers to Android's default browser for Android versions up to 4.3. From Android 4.4 on, the default browser is Chromium, so keep on reading the next section of this article.
How to add the launch icon to your home screen from Android's Chrome
Access the webpage from Chrome in Android. Click the menu button and from the options choose "Add to homescreen". Your browser will let you modify the title. When you are done, click the Add button. You can now access the web app from your home screen.
How to add the launch icon to your home screen from iPhone/iPad Safari
Access the webpage from your iPhone/iPad Safari browser. Click the share button and from the options choose "Add to Home Screen". Your browser will let you modify the title. When you are done, click the Add button on the top right corner of the screen. You can now access the web app from your home screen.
