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
- 3. “All the pieces matter...” - Lester Freemon, The Wire
- 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)
- 7. The most important thing to know about the mobile web...
- 11. Just one Web
- 12. Smartphone browsers != Webkit
- 13. Furthermore, which webkit are you talking about? READ PPK’S ARTICLE TITLED “THERE IS NO WEBKIT ON MOBILE”
- 14. It’s ok if the same site looks different in different devices As long as they are optimized for it.
- 15. But if you do have a different mobile site... ALWAYS provide a link to switch back to the desktop version.
- 17. W3C Mobile Web Best Practices guidelines RTFG
- 19. Offline Apps: Storing the files need to run offline
- 20. CACHE MANIFEST #this is a comment. style.css script.js index.htm contents of the manifest file.
- 21. <html manifest=”demo.manifest”> Linking the manifest file to the html page.
- 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
- 24. ALWAYS KEEPING AN UPDATED CACHE � �
- 25. Offline Apps: Storing the data for offline use
- 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.
- 28. Web Storage Session Storage and Local Storage
- 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.
- 31. Automatically save entered form info locally in case page crashes or closes, person can resume from where he left off
- 32. STORE USER DATA OFFLINE PERIODICALLY � �
- 33. Or... You could save only when you detect a new keystroke (or a minimum number of them)
- 34. Gotcha Two tabs updating the same value
- 35. Storage events Know if some other page has changed the value or not
- 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/
- 40. Media queries
- 41. � Provide different styles to different resolutions using media queries
- 42. Traditionally, mobile browsers provide a ‘zoomed out’ view, and then you can tap in
- 43. Viewport meta tag Allows you to set the zooming level
- 45. Scaling constraints <meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5">
- 46. Disable user scaling <meta name="viewport" content="width=device-width, user-scalable=no">
- 47. In Opera, you can use CSS to control viewport For example... @-o-viewport { width: device-width; max-zoom: 2; min-zoom: 0.5; }
- 49. “These are my thoughts in a well published format” -The early web
- 50. “Here is what we can all do together” - “Web 2.0”
- 51. “This is what I’m thinking” - Facebook, twitter and other social tools
- 52. “This is where I’m at” - The next step
- 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
- 57. watchPosition() Same as getCurrentPosition() but fires whenever there is a change in location. Sometimes its better to use this than the former.
- 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)
- 59. The Geolocation Spec May be up for a bit of a change in the future
- 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
- 61. A sneak peak
- 62. Device Orientation Access to gyroscope, accelerometer info etc
- 63. Access gyroscope info window.addEventListener ("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true);
- 64. Access accelerometer info window.addEventListener("devicemotion", function(event) { // Process event.acceleration }, true);
- 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
- 72. Cheers! More questions? Ask me now or contact me at: shwetankd@opera.com or, twitter.com/shwetank