Building WebApp with HTML5

Trần Lê Duy Tiên
A Proud Clicker @ VNG Corp.
http://facebook.com/leduytien
http://zini.vn/leduytien

A short summary
of WEBAPPorigin

A SHORTHISTORYOF WEBAPP
• 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.

WHATISWEBAPP & 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.

Thestate 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.

theFIRST 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

theSECOND(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

ThingsLEARNED
• 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.

THETHIRD ATTEMPT
Would be released together with Zing News version
3 introduced in previous presentation.

Thingsyouneedto 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">

CODEStructureOF YOURWEBAPP
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– SAVEYOURSITES
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.js
css/styles.css
img/icons.png
NETWORK:
http://www.sites/img_folder/
http://www.sites/data_folder/
http://www.google-analytics.com/
FALLBACK:
/ offline.html
http://connect.facebook.com/ js/offline.js

UNDERSTANDHOWMANIFESTWORK
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

INSTALLATIONMECHANISM
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(){ … });
})
});

Usinglocaldb to cachedata
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.

USINGLOCALSTORAGE
Check if browser support:
'sessionStorage' in window && window['sessionStorage'] !== null
'localStorage' in window && window['localStorage'] !== null
Save data
window.localStorage.setItem(key, data);
window.sessionStorage.setItem(key, data);
Retrieve data
window.localStorage.getItem(key); // always return as String
window.sessionStorage.getItem(key); // always return as String
Clear database
window.localStorage.clear();
window.sessionStorage.clear();

CACHINGDATAWITH LOCALSTORAGE
$.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 WHENBUILDINGWEBAPP
• 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.

• 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);
}
});

• 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);

Building WebApp with HTML5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Building WebApp with HTML5

Similar a Building WebApp with HTML5 (20)

Último

Último (20)

Building WebApp with HTML5