Table of Content
Adding web page to home screen
One way to deploy web site as application is to package the site as a home screen bookmark. Your users can add your website into home screen via the “add to home screen” bookmark.
Although the home screen icon is still a web page, we can configure it to make it like an application. This is done via several Web kit specific meta tags.
One meta tag, for example, allows us to provide an icon. Another tag allows us to set the launching image while the app is being opened. Another tag let us configure the ability to go full-screen and get rid of the web browser interface.
After the user adds the web to home screen, the user can see it even in the apps switching screen. And the user can kill the web app as if it is an native app.
Here is an example of using the meta tags to configuration the home-screen-based web application.
1<!doctype html> 2 3<html> 4 <head> 5 <!-- Run in full-screen mode. --> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 8 <!-- Make the status bar black with white text. --> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 10 11 <!-- Customize home screen title. --> 12 <meta name="apple-mobile-web-app-title" content="Web App"> 13 14 <!-- Disable phone number detection. --> 15 <meta name="format-detection" content="telephone=no"> 16 17 <!-- Set viewport. --> 18 <meta name="viewport" content="initial-scale=1"> 19 20 <!-- Prevent text size adjustment on orientation change. --> 21 <style>html { -webkit-text-size-adjust: 100%; }</style> 22 23 <title>iOS 7 Web App</title> 24 25 <!-- Icons --> 26 27 <!-- iOS 7 iPad (retina) --> 28 <link href="/static/images/apple-touch-icon-152x152.png" 29 sizes="152x152" 30 rel="apple-touch-icon"> 31 32 <!-- iOS 6 iPad (retina) --> 33 <link href="/static/images/apple-touch-icon-144x144.png" 34 sizes="144x144" 35 rel="apple-touch-icon"> 36 37 <!-- iOS 7 iPhone (retina) --> 38 <link href="/static/images/apple-touch-icon-120x120.png" 39 sizes="120x120" 40 rel="apple-touch-icon"> 41 42 <!-- iOS 6 iPhone (retina) --> 43 <link href="/static/images/apple-touch-icon-114x114.png" 44 sizes="114x114" 45 rel="apple-touch-icon"> 46 47 <!-- iOS 7 iPad --> 48 <link href="/static/images/apple-touch-icon-76x76.png" 49 sizes="76x76" 50 rel="apple-touch-icon"> 51 52 <!-- iOS 6 iPad --> 53 <link href="/static/images/apple-touch-icon-72x72.png" 54 sizes="72x72" 55 rel="apple-touch-icon"> 56 57 <!-- iOS 6 iPhone --> 58 <link href="/static/images/apple-touch-icon-57x57.png" 59 sizes="57x57" 60 rel="apple-touch-icon"> 61 62 <!-- Startup images --> 63 64 <!-- iOS 6 & 7 iPad (retina, portrait) --> 65 <link href="/static/images/apple-touch-startup-image-1536x2008.png" 66 media="(device-width: 768px) and (device-height: 1024px) 67 and (orientation: portrait) 68 and (-webkit-device-pixel-ratio: 2)" 69 rel="apple-touch-startup-image"> 70 71 <!-- iOS 6 & 7 iPad (retina, landscape) --> 72 <link href="/static/images/apple-touch-startup-image-1496x2048.png" 73 media="(device-width: 768px) and (device-height: 1024px) 74 and (orientation: landscape) 75 and (-webkit-device-pixel-ratio: 2)" 76 rel="apple-touch-startup-image"> 77 78 <!-- iOS 6 iPad (portrait) --> 79 <link href="/static/images/apple-touch-startup-image-768x1004.png" 80 media="(device-width: 768px) and (device-height: 1024px) 81 and (orientation: portrait) 82 and (-webkit-device-pixel-ratio: 1)" 83 rel="apple-touch-startup-image"> 84 85 <!-- iOS 6 iPad (landscape) --> 86 <link href="/static/images/apple-touch-startup-image-748x1024.png" 87 media="(device-width: 768px) and (device-height: 1024px) 88 and (orientation: landscape) 89 and (-webkit-device-pixel-ratio: 1)" 90 rel="apple-touch-startup-image"> 91 92 <!-- iOS 6 & 7 iPhone 5 --> 93 <link href="/static/images/apple-touch-startup-image-640x1096.png" 94 media="(device-width: 320px) and (device-height: 568px) 95 and (-webkit-device-pixel-ratio: 2)" 96 rel="apple-touch-startup-image"> 97 98 <!-- iOS 6 & 7 iPhone (retina) --> 99 <link href="/static/images/apple-touch-startup-image-640x920.png" 100 media="(device-width: 320px) and (device-height: 480px) 101 and (-webkit-device-pixel-ratio: 2)" 102 rel="apple-touch-startup-image"> 103 104 <!-- iOS 6 iPhone --> 105 <link href="/static/images/apple-touch-startup-image-320x460.png" 106 media="(device-width: 320px) and (device-height: 480px) 107 and (-webkit-device-pixel-ratio: 1)" 108 rel="apple-touch-startup-image"> 109 </head> 110 111 <body> 112 <h1>iOS 7 Web app</h1> 113 114 <p>Add this page to your home screen or <a href="https://gist.github.com/tfausak/2222823">view its source</a>. 115 </body> 116</html>
What’s next? We’re going to take a look at “Phonegap build”.
