Firefox OS Apps and Web APIs

2,173 views

Published on

My presentation of March 13 in Budapest abou

Published in: Technology
5 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,173
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
58
Comments
5
Likes
2
Embeds 0
No embeds

No notes for slide

Firefox OS Apps and Web APIs

  1. 1. Firefox OS Web APIs & Apps Jan Jongboom March 13, Budapest 1
  2. 2. @janjongboom 2
  3. 3. You already have created an app 3
  4. 4. Embrace the phone 4
  5. 5. The mobile web is broken 5
  6. 6. 6
  7. 7. We’re back in 1999 7
  8. 8. We’re back in 1999 7
  9. 9. No AJAX?! 8
  10. 10. -webkit-prefix 9
  11. 11. Let’s open up the mobile web 10
  12. 12. Firefox OS app = website + W3Cproposed phone APIs 11
  13. 13. 12
  14. 14. 13
  15. 15. The web is awesome 14
  16. 16. So let’s get going...(nothing fancy yet) 15
  17. 17. 16
  18. 18. 17
  19. 19. 18
  20. 20. “Firefox OS Simulator” 19
  21. 21. 20
  22. 22. 21
  23. 23. 21
  24. 24. http://localhost:8081/ manifest.webapp 21
  25. 25. 22
  26. 26. 22
  27. 27. 23
  28. 28. Firefox OS nagyonegyszerű! 24
  29. 29. Now get funky! 25
  30. 30. 26
  31. 31. 27
  32. 32. Unleash the power of WebAPIs 28
  33. 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. 34. 30
  35. 35. 31
  36. 36. 32
  37. 37. 33
  38. 38. 34
  39. 39. I only usecertified APIs! 35
  40. 40. Certified APIs• WebTelephony • WebBluetooth• WebSMS • PermissionsAPI• IdleAPI • NetworkStatsAPI• SettingsAPI • CameraAPI• PowerManagementAPI • Time/ClockAPI• MobileConnectionAPI • Attentionscreen• WiFiInformationAPI • Voicemail Requires certification process 36
  41. 41. Your phone is aware of yoursurroundings, take advantage! 37
  42. 42. https://github.com/robnyman/ Firefox-OS-Boilerplate-App 38
  43. 43. Application bus 39
  44. 44. Hey I need an image!Sure, I can provide you with one! 40
  45. 45. Web activities 41
  46. 46. I NEED AN ADULT! 42
  47. 47. https://developer.mozilla.org/en-US/docs/WebAPI 43
  48. 48. Offline 44
  49. 49. Dealing with offline• Have the necessary application files available• Cache server side data• Store app state on device 45
  50. 50. Storing data• Local Storage• IndexedDB• Limited storage! • Manifest file can increase 46
  51. 51. Two types of apps• Hosted • Assets on the server • Cacheable via appcache• Packaged • ZIP archive with assets 47
  52. 52. Caching with appcache 48
  53. 53. 49
  54. 54. 49
  55. 55. 49
  56. 56. 49
  57. 57. 49
  58. 58. 50
  59. 59. ZIP• One big zip file• Resources loaded from zip file• Still requires manifest file 51
  60. 60. One more thing... 52
  61. 61. The app manifest file • Part of your packaged app • Has metadata (name, description, version) • Can define required permissionshttps://marketplace.firefox.com/developers/docs/manifests 53
  62. 62. 54
  63. 63. 54
  64. 64. 54
  65. 65. 54
  66. 66. Get hacking! 55
  67. 67. Questions?http://bit.ly/ffos-budapest github.com/janjongboom 56

×