My presentation of March 13 in Budapest abou

1. Firefox OS
Web APIs & Apps
Jan Jongboom
March 13, Budapest
1

2. @janjongboom
2

3. You already have
created an app
3

4. Embrace the phone
4

5. The mobile web is
broken
5

6. 6

7. We’re back in 1999
7

8. We’re back in 1999
7

9. No AJAX?!
8

10. -webkit-prefix
9

11. Let’s open up the
mobile web
10

12. Firefox OS app
=
website + W3C
proposed phone APIs
11

13. 12

14. 13

15. The web is awesome
14

16. So let’s get going...
(nothing fancy yet)
15

17. 16

18. 17

19. 18

20. “Firefox OS Simulator”
19

21. 20

22. 21

23. 21

24. http://localhost:8081/
manifest.webapp
21

25. 22

26. 22

27. 23

28. Firefox OS
nagyon
egyszerű!
24

29. Now get funky!
25

30. 26

31. 27

32. Unleash the power
of WebAPIs
28

33. Regular APIs
• Vibration • PushNotifications
• ScreenOrientation • WebFMApi
• GeoLocation • WebPayment
• MouseLock • IndexedDB
• OpenWebApps • AmbientLightSensor
• NetworkInformation • ProxyimitySensor
• BatteryStatus • Notification
• Alarm
• WebActivities
Yellow = Approved by W3C
29

34. 30

35. 31

36. 32

37. 33

38. 34

39. I only use
certified APIs!
35

40. Certified APIs
• WebTelephony • WebBluetooth
• WebSMS • PermissionsAPI
• IdleAPI • NetworkStatsAPI
• SettingsAPI • CameraAPI
• PowerManagementAPI • Time/ClockAPI
• MobileConnectionAPI • Attentionscreen
• WiFiInformationAPI • Voicemail
Requires certification process
36

41. Your phone is
aware of your
surroundings, take
advantage!
37

42. https://github.com/robnyman/
Firefox-OS-Boilerplate-App
38

43. Application bus
39

44. Hey I need an
image!
Sure, I can provide
you with one!
40

45. Web activities
41

46. I NEED AN ADULT!
42

47. https://developer.mozilla.org/en-US/docs/WebAPI
43

48. Offline
44

49. Dealing with offline
• Have the necessary application files
available
• Cache server side data
• Store app state on device
45

50. Storing data
• Local Storage
• IndexedDB
• Limited storage!
• Manifest file can increase
46

51. Two types of apps
• Hosted
• Assets on the server
• Cacheable via appcache
• Packaged
• ZIP archive with assets
47

52. Caching with appcache
48

53. 49

54. 49

55. 49

56. 49

57. 49

58. 50

59. ZIP
• One big zip file
• Resources loaded from zip file
• Still requires manifest file
51

60. One more thing...
52

61. The app manifest file
• Part of your packaged app
• Has metadata (name, description, version)
• Can define required permissions
https://marketplace.firefox.com/developers/docs/manifests
53

62. 54

63. 54

64. 54

65. 54

66. Get hacking!
55

67. Questions?
http://bit.ly/ffos-budapest
github.com/janjongboom
56