Building great mobile apps: Somethings you might want to know
1. Building great mobile web
apps: Some things you
might want to know
By Shwetank Dixit, Opera Software
2. about me
Web Evangelist, Opera Developer
Relations Team
Member, W3C Mobile Web for Social
Development Group
Member, W3C Web Education
Community Group
twitter.com/shwetank
email: shwetankd@opera.com
4. We’re (mainly) going to
talk about slick web apps
on full featured mobile
browsers
5. But first spare a thought
for the low powered
devices which can’t run a
full featured browser
6. But first spare a thought
for the low powered
devices which can’t run a
full featured browser
IT CONSTITUTES A MAJORITY OF THE MOBILE WEB
(AS OF RIGHT NOW AND THE NEAR TERM)
22. CACHE MANIFEST
#this is a comment.
style.css
script.js
index.htm
NETWORK:
dynamicpage.php
The NETWORK: section header bypasses the cache
23. CACHE MANIFEST
#this is a comment.
style.css
script.js
index.htm
FALLBACK:
original.jpg backup.jpg
If a file can’t load, then the FALLBACK: section header
specifies which files to load as a backup in their place
27. The problem with cookies
Unreliable
No programmatic APIs to manipulate it
Not structured
Most of important of all ...
Small file size, so very limited data can be
stored.
29. localStorage.setItem(yourkey,
yourvalue); // Store the value
var item = localStorage.getItem
(yourkey); // Retrieve the value and assign
it to a variable
Example of using Web Storage to store and
retrieve values in the browser’s local storage
With this, even if you close the browser and re-open the page again, the values should
still load properly.
30. You can store images (and
more) with localStorage
....BUT DON”T.
36. GET NEW VALUE IF ITS BEEN CHANGED
IN PARALLEL TAB
�
�
�
37. Gotcha
Using a free hosting service - Don’t use local
storage with it if they store users accounts
on different directories.
e.g, freehosting.com/user1
and freehosting.com/user2
38. Other storage
options
- IndexedDB (Limited browser support currently)
- WebSQL (Standard in impasse. Limited desktop browser
support but nice mobile browser support.)
39. Further reading
Run your web apps offline with HTML5 Application Cache: http://dev.opera.com/
articles/view/offline-applications-html5-appcache/
Web Storage: easier, more powerful client-side data storage: http://dev.opera.com/
articles/view/web-storage/
Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL:
http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-
appcache-websql/
53. Think of the possibilities
Augmented reality
Geofencing
location aware advertising
...more
54. //Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(successFunction, errorFunction);
} else {
alert('Geolocation not supported.');
}
Sample code for running geolocation, if
available
55. function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
Determining the position
56. function errorFunction(position){
if (pos.PositionError == 1){
alert('It seems you have decided not to share your
location');
}
if (pos.PositionError == 2){
alert('The location could not be determined by the
browser. Try to reload the page to try again');
}
Handling errors
SEE FULL LIST OF ERRORS ON THE SPEC
58. Accuracy
Scarily accurate in some places,
amusingly inaccurate in others.
DO NOT rely on it.
Provide fallbacks, and ways to enter location
info manually (like zipcode)
60. Further reading
How to use the W3C Geolocation API: http://dev.opera.com/articles/view/how-to-use-
the-w3c-geolocation-api/
Use the Geolocation API in Webapps: http://goo.gl/EBVYt
66. Check for access
if (navigator.getUserMedia){
navigator.getUserMedia('video', v_success,
v_error);
}
else{
not_supported();
}
67. Check for access
var video_element = document.querySelector('video');
...
...
function v_success(stream){
video_element.src = stream;
}
68. Use camera + <video> +
<canvas> for new tricks
var button = document.querySelector('#button');
button.addEventListener('click',snapshot, false);
...
...
function snapshot(){
var c = document.querySelector('canvas');
var ctx = c.getContext('2d');
var cw = c.clientWidth;
var ch = c.clientHeight;
ctx.drawImage(video_element, 0, 0, cw, ch);
}
69. Keep in mind
WebRTC spec (containing getUserMedia) is
still in flux. Not a mature standard yet.
70. Download the Opera
Mobile labs build with
device orientation and
getUserMedia support
Download from here: http://my.opera.com/core/blog/2011/03/23/webcam-
orientation-preview
