Firefox OS Apps & Apis - WebRebels App day 2013

665 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
665
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox OS Apps & Apis - WebRebels App day 2013

  1. 1. Firefox OSUnicorns and rainbowsJan Jongboom
  2. 2. @janjongboom
  3. 3. You already havecreated an app
  4. 4. Embrace the phone
  5. 5. The mobile web isbroken
  6. 6. We’re back in 1999
  7. 7. We’re back in 1999
  8. 8. No AJAX?!
  9. 9. -webkit-prefix
  10. 10. Let’s open up themobile web
  11. 11. Firefox OS app=website + W3Cproposed phone APIs
  12. 12. The web is awesome
  13. 13. So let’s get going...(nothing fancy yet)
  14. 14. Have a mobile webapp?Go take a nap, we’re back in 5
  15. 15. github.com / comoyo / ffos-list-detail
  16. 16. It’s thiscool!github.com/comoyo/ffos-list-detail
  17. 17. Embrace the phone!
  18. 18. Unleash the powerof WebAPIs
  19. 19. APIs
  20. 20. Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI• WebBluetooth• PermissionsAPI• NetworkStatsAPI• CameraAPI• Time/ClockAPI• Attentionscreen• VoicemailRequires certification process
  21. 21. Your phone is aware ofyour surroundings...Take advantage!
  22. 22. http://bit.ly/ffos-magic
  23. 23. Camera is only availablefor certified apps...
  24. 24. Application bus
  25. 25. Hey I need animage!Sure, I can provideyou with one!
  26. 26. Web activities(like Android intents)
  27. 27. I NEED AN ADULT!
  28. 28. https://developer.mozilla.org/en-US/docs/WebAPI
  29. 29. Offline• Web is built for connectivity :-(• Two types of assets:• Application assets• Server data
  30. 30. Caching assets• ZIP up your app• Lose flexibility of the web• But very easy!• Use appcache• Browser feature• Example implementation in demo-app
  31. 31. Caching resources• AJAX calls• Cache results in indexedDBor local storage• Read from cache if request fails• In demo-app see the http service
  32. 32. The app manifest file• Has name, description, version• Define permissions (calling, storage)• Appcache location (can be in html as well)• Web activity provider (I provide images!)https://marketplace.firefox.com/developers/docs/manifests
  33. 33. Get hacking!
  34. 34. Questions?Twitter: @janjongboomslideshare.net/janjongboom

×