The document discusses mobile web architecture and hybrid mobile applications. It begins with an introduction to hybrid apps and PhoneGap. It then covers various HTML5 features that are useful for building hybrid apps like users and sessions, location services, cameras, videos, audio and push notifications. It explains the hybrid architecture of combining web views with native wrappers. It also provides examples of implementing location services, cameras, audio/video and push notifications in a hybrid mobile app.

1. Mobile Web Architecture
Structure, architecture and capabilities of hybrid mobile
applications

2. Contact Me
•
Ynon Perek
•
ynon@ynonperek.com
•
http://ynonperek.com

3. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

4. Why is mobile
different?

5. Questions To Ask for Mobile
•
How does my solution:
•
Affects battery life ?
•
Affects network traffic ?
•
Deal with interruptions ?
•
Deal with connectivity ?
•
Respects user’s privacy ?

6. Choosing Mobile Technology

7. Problems With Native
•
Too many different programming languages

8. Problems With Native
•
Too many different programming languages
•
“Same app”, different code

9. Web is not perfect either
•
Code runs in a browser:
•
Slower
•
Restricted by the browser

10. Web vs. Native
Native
Web
Browser
App
App

11. Hybrid Apps
Web Content
Native App Wrapper

12. Demo: Implementing A
Hybrid Solution

13. Hybrid Architecture
Web
Content
Native Wrapper
3rd party
extensions
Server + DB

14. Takeaways
•
Hybrid architecture provides the good AND bad
from both worlds
•
Understanding the platform is necessary

15. Hybrid Apps +
•
Most of the app is written once
•
Only native parts are written again and again
•
“Feels” native
•
Developer controls native code => can use native
APIs

16. Hybrid Apps •
Complex code
•
Requires knowledge in many programming
languages
•
Data is transferred between environments
•
Hard to debug

17. Let’s Analyse A Hybrid App
•
Hystagram is a hybrid
version of instagram with
minimal functionality
•
Supports:
•
Taking photos
•
Watching photos
•
Uploading photos to
server

18. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why

19. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why
Native
Need to show a camera
overlay

20. Processes and scopes
Process
Take a photo
Upload photo to server
View photo stream
Scope
Why
Native
Need to show a camera
overlay
Native
Upload must continue
when app is not active

21. Processes and scopes
Process
Scope
Why
Native
Need to show a camera
overlay
Upload photo to server
Native
Upload must continue
when app is not active
View photo stream
Web
Because we can
Take a photo

22. Introducing Phonegap

23. Introducing Phonegap
•
An open source connection layer between web
content and native
•
Extensible
•
Supported platforms:
iOS, Android, Blackberry, WebOS, Windows
Phone, Symbian, Bada

24. Q&A

25. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

26. The Web Side
Users and Sessions
Location
Camera
Video
Audio

27. Web 101
HTTP Request
HTTP Response

28. HTTP and state
•
HTTP is stateless
•
This means server has no way to know two
requests originated from the same client

29. Cookies
•
Bits of data saved on a device and sent to the
server with each HTTP request
•
Used to store state
•
Demo

30. Session Management
Login: user, pass
Client
Server
DB

31. Session Management
Login: user, pass
Verify: user, pass
Client
Server
DB

32. Session Management
Login: user, pass
Client
Save session
Server
DB
Session id

33. Session Management
Login: user, pass
Save session
Client
Set Cookie:
Session id
Server
DB
Session id

34. Session Management Options
•
Session id on client, Session data on server
•
Encrypted session data on client, key on server
•
RESTful

35. RESTful Web Services
•
Server provides resources
•
Resources are in known conventional URLs

36. RESTful Web Services
/collection
/collection/item
GET
Returns an array of
items
Returns details for a
specific item
POST
Create a new item
PUT
DELETE
Modify an existing item
Delete the collection
Delete an item

37. RESTful authentication
•
Client uses a private authentication token to
access restricted resources
•
Demo:
https://developers.facebook.com/tools/explorer

38. What You Should Use

39. What You Should Use
•
For web clients, cookies are the easiest
•
If possible, prefer to store only session id in the
cookie
•
For other clients, consider a token

40. Q&A

41. Geolocation
•
Detect where your user is
now
•
Show nearby places
•
Display location aware data
•
Enable location specific
features

42. Technologies
•
GPS
•
A-GPS
•
Cell Information
•
WiFi Positioning

43. GPS
•
Global Positioning System
•
Accuracy error: 2-10m
•
Requires clear sky view
•
Time to position:
5 seconds - 5 minutes

44. A-GPS
•
Uses both GPS chip and
network information to get
location
•
Much faster to get location

45. Cell Information
•
Uses cell towers to
calculate a device’s location
•
Accuracy: A block or up to
some km
•
Time to location: immediate

46. WiFi Positioning
•
Detect location using a list
of wireless routers in your
area
•
Relies on existing router
databases

47. Permissions
•
Browser asks user
permissions before sharing
location
•
Best practice: Request
location just before using it

48. Location Failures
•
Location services don’t
always work
•
Why ?
•
What do you do when
you’re lost ?

49. Location API
1 navigator.geolocation.getCurrentPosition(
successCallback,
2
3
6
7
failureCallback,
4
{
5
timeout: 0,
maximumAge: 60000,
enableHighAccuracy: false
8
});

50. Using A Map

51. Show Me The Map
•
Both iOS and Android have built in maps
applications
•
Open the built-in maps application using a simple
link
•
Demo

52. Built-In Maps +
•
Great UI
•
User feels “at home”

53. Built-In Maps -
•
User leaves the app

54. When To Use
•
Use built-in maps app for navigation
•
Use embedded maps for geo-data related to your
app

55. Map APIs
•
Google Maps
•
Open Street maps
•
Demo:
https://developers.google.com/maps/
documentation/javascript/examples/map-simple

56. Q&A

57. Taking Photos

58. getUserMedia
•
Desktop browsers support the new getUserMedia
API
•
Demo: http://shinydemos.com/photo-booth/

59. getUserMedia Browser Support

60. Using The Camera
•
iOS >= 6; Android >= 3
•
<input type="file" field opens camera app
Normal <input> capture="camera" accept="image/*"
id="takePictureField">

61. What You Can Do
•
Take a picture and send it to server
•
Analyse picture on the client - Demo
•
Apply filters or edit - Demo

62. What You Still Can’t Do
•
Can’t check if camera is available
•
No camera overlay

63. Q&A

64. VIDEO
THE EASY WAY

65. Video Tag
•
HTML5 introduces a <video> tag to embed
videos in a web page.
•
Different browsers support different video
formats. The <video> tag can specify multiple
formats.

66. Video Formats
•
Video formats are like
languages
•
The same video can be
encoded in different
formats
•
A browser must “speak the
language” to be able to play
the video

67. Video Converter
•
Miro is a free open source
video player and converter
•
http://www.getmiro.com

68. Browser Support
•
HTML5 spec does not define a video codec to
use
•
h.264 is the most widely supported. Plays on
iPhone and Android

69. The Markup
<video poster=”star.png”>
<source src=”zebra.mp4” />
</video>
!

70. Limitations: Autoplay
“ Apple has made the decision to disable the
automatic playing of video on iOS devices,
through both script and attribute
implementations.”
Issue 159336:
On Android, html5 video autoplay attribute
does not work.

71. Limitations: Play Inline
“ Currently, Safari optimizes video
presentation for the smaller screen on
iPhone or iPod touch by playing video using
the full screen
”
Videos play inline for Android >= 3

72. Playing Audio
HTML5 Audio
Audio API

73. Audio Tag
•
New addition of HTML5
•
Simple to use
•
Both HTML tag and JS api

74. Audio Tag
<audio src="scifi002.mp3" controls="YES"></audio>

75. Audio Tag JS API
audio.src =
“http://static1.grsites.com/archive/sounds/scifi/scifi002.mp3";
audio.pause();
audio.currentTime = 0;
audio.play();

76. Audio Tag
•
Demo
•
Play a gun fire sound when button is clicked

77. Audio Tag Limitations on Mobile
•
Not accurate (has short delays)
•
Starts to load sound after user interaction
•
Can’t control the audio data

78. Audio API
•
A new improved API for playing sounds
•
Timing considerations built-in

79. Audio API Browser Support

80. Audio API Architecture
Audio Context
Source
Destinatio
n

81. Audio Context
Source
Gain
(volume)
Destinatio
n

82. Quiz
How do you implement cross fade ?

83. Cross Fade
Audio Context
Source
Gain
(volume)
Destinatio
n
Source
Gain
(volume)

84. Audio API: What You Can Do
•
Apply audio filters (using filter nodes)
•
Change volume (using gain nodes)
•
Merge multiple audio sources to one destination
•
Play with accurate timing

85. Audio API Demo
•
Same game as before
•
This time no delays in playing the audio
•
More complex demo:
http://labs.dinahmoe.com/ToneCraft/#

86. Recording Audio
•
getUserMedia() will allow audio recording
•
Not yet supported on mobile

87. Q&A

88. Agenda
Introduction to Hybrid Apps (+Phonegap)
1
HTML5 Features for Hybrid Apps
2
Push Notifications
3

89. User’s Perspective

90. Marketer’s Perspective
“
For the first time in human
history, you can tap almost
two billion people on the
shoulder.
”

91. Developer’s Perspective
•
What is a notification ?

92. Developer’s Perspective
•
What is a notification ?
•
User visible information reflecting some event

93. Developer’s Perspective
•
Why should I use notifications ?

94. Developer’s Perspective
•
Why should I use notifications ?
•
Ensure time-sensitive delivery when your app isn’t
running

95. Developer’s Perspective
•
How does push compared to poll ?

96. Developer’s Perspective
•
How does push compared to poll ?
•
Pushes are server driven and immediate, polls are
app driven and latent

97. Keep In Mind
•
Push notifications are not reliable
•
(even if the APN server gets them)

98. Types Of Notifications
•
Badges (iOS only)
•
Alerts

99. Push Service Architecture
Your Server
User’s Device
Push
Notification
Server

100. Getting A Token

101. Sending A Notification

102. Demo App
•
A simple push chat room hybrid app
•
HTML layer handles user interface
•
Native layer receives notifications

103. Server: Sending A Notification
my $notifier = $APNS->notify({
cert => "cert.pem",
key => "key.pem",
passwd => "1234"
});
!
$notifier->devicetoken($device_token);
$notifier->message("message");
$notifier->sound('default');
$notifier->custom({ custom_key => 'custom_value' });
$notifier->sandbox(1);
!
$notifier->write;

104. APNS Best Practices
•
Keep the connection open
•
Use multiple connections to the gateway
•
Be polite with your users

105. Q&A

106. Thanks For Listening
•
Ynon Perek
•
ynon@ynonperek.com
•
http://ynonperek.com

107. Photos Used In The Slides
•
Choices (slide 6):
http://www.flickr.com/photos/danmoyle/
11715566974/sizes/l/
•
Man with camera (slide 43):
http://bit.ly/1gb5ZZM