[2024]Digital Global Overview Report 2024 Meltwater.pdf
Html5 and beyond the next generation of mobile web applications - Touch Tour Chennai
1. HTML5 and beyond: The
next generation of mobile
web applications
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
19. CACHE MANIFEST
#this is a comment.
style.css
script.js
index.htm
NETWORK:
dynamicpage.php
The NETWORK: section header bypasses the cache
20. 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
24. 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.
26. 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.
27. You can store images (and
more) with localStorage
....BUT DON”T.
33. GET NEW VALUE IF ITS BEEN CHANGED
IN PARALLEL TAB
�
�
�
34. 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
35. Other storage
options
- IndexedDB (Limited browser support currently)
- WebSQL (Standard in impasse. Limited desktop browser
support but nice mobile browser support.)
36. 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/
54. Think of the possibilities
Augmented reality
Geofencing
location aware advertising
...more
55. //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
56. 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
57. 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
59. 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)
61. 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
67. Check for access
if (navigator.getUserMedia){
navigator.getUserMedia('video', v_success,
v_error);
}
else{
not_supported();
}
68. Check for access
var video_element = document.querySelector('video');
...
...
function v_success(stream){
video_element.src = stream;
}
69. 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);
}
70. Keep in mind
WebRTC spec (containing getUserMedia) is
still in flux. Not a mature standard yet.
71. 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