building webapp with html5
TRANSCRIPT
BUILDING WEBAPP FOR
MOBILE
Trần Lê Duy TiênA Proud Clicker @ VNG Corp.
http://facebook.com/leduytien
http://zini.vn/leduytien
A short summary
of WEBAPP origin
A SHORT HISTORY OF WEB APP
• WebApp got first wide-spreaded attention after the introduction of the first generation iPhone, thanks to the fact that Apple didn’t allow native app development at the time.
• After the iPhone, Palm introduced WebOS for their smartphones, designed with the dream of a webapp platform.
• Google recently introduced Google Chrome OS with only webapp running on it.
WHAT IS WEBAPP & WHY?
WebApp• “Web”: it is built using only web technologies such
as HTML, Javascript and CSS• “App”: it should behave like an “app”, all
interactions occur within the app (there is no page linking from the user point of view) & be able to work without Internet.
Why is webapp?• Webapp getting popular in the mobile era as it is
the only solution for the dream of developers to only have to write once and run it anywhere.
The state of webapp
• Facebook abandoned their webapp-based application and switched to native app.
• Palm’s WebOS after sold to HP is dead• Google is experimenting with webapp on their
Chrome browser & Chrome OS, but so far it’s still unclear.
WHY?• Even on the latest version of iOS, webapp still
can’t match what native app can do both in term of performance and feature
• Users don’t get it.
zing news webapp
EXPERIMENTS
the FIRST VERSION
The first version of Zing News Webapp (no longer available). Viewers are automatically redirected to this app on browser when they visit Zing News
the SECOND (CURRENT) VERSION
On iOS devices, browse http://news.zing.vn will automatically redirect you to this webapp. On Android devices, point your browser to http://touch.news.zing.vn
Things LEARNED
• When visit a webpage from browser, users expect to see the web as they known. Any different in the way the web respond lead to confusion.
• Users never see the webapp as an app if it open in browser. To them it’s just a website behaving different & strange.
• Don’t try make a website behave like an app. If you build webapp, it is meant to be install/launch like an app.
THE THIRD ATTEMPT
Would be released together with Zing News version 3 introduced in previous presentation.
BUILDING A WEBAPP
Things you need to learn
Assume you already “master” HTML & CSS & Javascript, this presentation will just go over some major implementation points to build webapp:
• How to enable webapp capability in iOS• Basic structure of a webapp• How to download resources to local device• How to use web storage API to cache data to
local database• Tips building webapp
Enable webapp capability FOR WEBPAGE
<head><meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"><link rel="apple-touch-icon" href="touch-icon.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-rentina.png" /><link href="splash-screen-640x1096.jpg" rel="apple-touch-startup-image" media="(device-height: 568px)"><link href="splash-screen-640.jpg" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">
CODE Structure OF YOUR WEBAPP
It’s a single web page. There is no “linking” in app, all data will load using ajax & displayed.
Your single HTML file should only include basic HTML for screen layers that will be filled with content later.
Change z-index value to make a layer active
<html manifest="cache.manifest"><head>
(include normal js/css resources)
</head><body>
<div id=“latest”></div><div id=“featured”></div><div id=“article”></div><div id=“category”></div><div id=“popup”></div>
</body></html>
MANIFEST – SAVE YOUR SITES
You can still run an app without Internet connection. A webapp therefore should be able to at least open offline.
Use cache.manifest file to tell browser to download your app resources to local device and use them for later access.
CACHE MANIFEST# rev 1.00
CACHE:js/jquery.min.jscss/styles.cssimg/icons.png
NETWORK:http://www.sites/img_folder/http://www.sites/data_folder/http://www.google-analytics.com/
FALLBACK:/ offline.htmlhttp://connect.facebook.com/ js/offline.js
UNDERSTAND HOW MANIFEST WORK
The first time you visit a site with manifest, the browser just show the page and in the background download the resources
The next time you visit the site, the browser use the offline version it downloaded last time. In the background, it check the manifest for any changes. If yes, it redownload all resources again.
User will always used the version older than the current one until he/she relaunch the web.
CREATE AN “INSTALLATION” MECHANISM
Create a middle step to check for updates all app resources before redirect user to the main app.
Install.html App.htmlUSER
INSTALLATION MECHANISM
window.addEventListener('load', function(e) {
var appCache = window.applicationCache;
// no update
appCache.addEventListener('noupdate', function(){
window.location.href = appHome;
}, false);
// all resource had been cached
appCache.addEventListener('cached', function(){
window.location.href = appHome;
}, false);
// if there is updates and resources had been downloaded
appCache.addEventListener('updateready', function(e) {
if (appCache.status == appCache.UPDATEREADY) {window.applicationCache.swapCache();
}
}, false);
// if is downloading, update the progress bar
appCache.addEventListener('downloading', function(){
appCache.addEventListener('progress', function(){ … });
})
});
Using local db to cache data
What if user open your webapp without Internet connection? Your app should still be able to display data the last time it had.
Two types of storage available in HTML5• window.localStorage – which save data until you
delete them (or out of space limit)• window.sessionStorage – only save data in the
same session
Both have disk space limit, with each domain have about 5MB for database.
USING LOCAL STORAGE
Check if browser support:'sessionStorage' in window && window['sessionStorage'] !== null
'localStorage' in window && window['localStorage'] !== null
Save datawindow.localStorage.setItem(key, data);window.sessionStorage.setItem(key, data);
Retrieve datawindow.localStorage.getItem(key); // always return as Stringwindow.sessionStorage.getItem(key); // always return as String
Clear databasewindow.localStorage.clear();window.sessionStorage.clear();
CACHING DATA WITH LOCAL STORAGE
$.ajax({
url:url,dataType: "text”
}).done(function(data) {
// save the data if (local DB support)
window.localStorage.setItem(url,data);
// do other things with data
}).fail(function() {
if (window.localStorage.getItem(url) !== null)// use the cache data
else// inform user there is no data available
});
TIPS WHEN BUILDING WEBAPP
• Make webapp fullscreen on iPhone 5:if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}
• Set cache expiration for manifest file immediately. Remove it during development process.
• Don’t use any mobile js framework (jQuery core is ok to reduce coding time)
• For HTML element, assign ID attribute whenever possible so that you can get to it faster.
• Remember to use setTimeOut – a few hundred milliseconds delay will help smoother the experience.
TIPS WHEN BUILDING WEBAPP
• Make your app responsive & fast. For all UI interaction event, always update the interface first. Small trick might help.
• Make sure there only max two concurrent ajax calls at any moment
$.xhrPool = [];$.ajaxSetup({
beforeSend: function(jqXHR) {$.xhrPool.push(jqXHR);
},complete: function(jqXHR) {
var index = $.xhrPool.indexOf(jqXHR);if (index > -1) $.xhrPool.splice(index, 1);
} });
TIPS WHEN BUILDING WEBAPP
• Use CSS animation insteads of js animation whenever possible. • There is jQuery plugin that automatically convert .animate()
function to css base animation.• CSS animation ready to use: http://daneden.me/animate/
• Prevent web scrolling effect:document.addEventListener('touchmove', function (e) {
e.preventDefault();}, false);
• Enable 3d hardware on selected elements will help eliminate UI “flicker”, but be careful or your app will crash-webkit-transform:translate3d(0,0,0);
