Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Firefox OS Web APIs & Apps Jan Jongboom
  2. 2. @janjongboom
  3. 3. One of the main problems that were facing when developing mobile applications with webtechnologies, is that phone specific features arent available yet in the browser APIs. And whywould we; vibrating your desktop computer was not really an issue when the web standardswere decided upon.
  4. 4. To accomodate for the changing landscape parties like PhoneGap have already tried to bridgethe gap between native and the web on platforms like iOS and Android;
  5. 5. but Mozilla is taking this one step (maybe two or three) further by proposing standardizedsolutions to access phone specific APIs.
  6. 6. No more ‘native’ And this is necessary because there is literally no difference between a native app and a webapp. Everything on the screen,
  7. 7. from the e-mail client to the phone app;
  8. 8. and from the web browser (yes! the web browser) to the camera are written in HTML / CSS /Javascript. And this means that APIs needed to be defined to access these features from yourshiny web app.
  9. 9. Decouple web and onlineAnother problem that we need to solve in this space is the fact that web basically meansonline. But with a mobile application you cant fully rely on a user having a data connectionat all time.
  10. 10. How can we adjust a current application to also be available when the user is on a plane?
  11. 11. Overview 1. Oeh shiny, an overview of Web APIs 2. Offline support 3. First app in 5 minutes 4. Adding native capabilities 5. And off to the market placeSo heres the list of subjects that were going to tackle in this talk:
  12. 12. Regular APIs • Vibration • PushNotifications • ScreenOrientation • WebFMApi • GeoLocation • WebPayment • MouseLock • IndexedDB • OpenWebApps • AmbientLightSensor • NetworkInformation • ProxyimitySensor • BatteryStatus • Notification • Alarm • WebActivities Yellow = Approved by W3CThese are all ‘basic’ APIs that have been proposed by Mozilla to the World Wide Webconsortium. Even better, a bunch of them have already been approved. Requires sometimespermission.
  13. 13. Still requires explicit authentication
  14. 14. *Who has used IndexedDB?* Its very similar. The APIs are accessible via the `navigator`object. For example, to vibrate your phone:
  15. 15. Or for battery information:
  16. 16. The list I showed you before is the list of all APIs that you can use from any web application.However, some websites are more equal than others and thus require additional APIs
  17. 17. Think the phone application. Not every simple website should be able to make phone calls orsend text messages.
  18. 18. Jeg bruker bare sertifiserte API’er!These are the certified APIs. They go through the same W3C process as the other APIs butrequire your app to be certified.
  19. 19. Certified APIs• WebTelephony • WebBluetooth• WebSMS • PermissionsAPI• IdleAPI • NetworkStatsAPI• SettingsAPI • CameraAPI• PowerManagementAPI • Time/ClockAPI• MobileConnectionAPI • Attentionscreen• WiFiInformationAPI • Voicemail Requires certification process
  20. 20. Webactivities Connecting appsWebactivities are a way to loosely couple applications to eachother. They work in a pub/subway where every application can register itself as a listener for certain activities.
  21. 21. Hey I need an image! Sure, I can provide you with one!For example, the camera application will register itself as hey I can provide images. Whenyour application needs an image from the user,
  22. 22. Web activitiesthe user will be provided with the choice between all applications (camera, gallery, yourapp)that provide that. This can not only go for media, but in the future also for choosing whichphone app should be used to dial, or which web browser to surf.
  23. 23. I NEED AN ADULT!Because when you start devving this you might need some help (i need an adult image)
  24. 24. https://developer.mozilla.org/en-US/docs/WebAPIevery API has been described in detail in the Mozilla MDN documentation.
  25. 25. OfflineOffline is a hard problem to solve. Web applications are mostly built for connectivity but thatis not always available on your shiny phone.
  26. 26. Dealing with offline • Have the necessary application files available • Cache server side data • Store app state on deviceData can be expensive, people are roaming, etc. The ways that you have to deal with offlineusage is:
  27. 27. Two types of apps • Hosted • Assets on the server • Cacheable via appcache • Packaged • ZIP archive with assetsWithing Firefox OS there are two types of apps that you can develop:1. Hosted apps, that have their assets on a server; cachable via appcache2. Packaged apps; that are a zip archive
  28. 28. Caching with appcache
  29. 29. The web browser will now fetch your whole page, then read the appcache and load allresources described there.
  30. 30. ZIP • One big zip file • Resources loaded from zip file • Still requires manifest fileThe zip approach doesnt require this but has all dependencies in the zip archive.
  31. 31. The app manifest file • Part of your packaged app • Has metadata (name, description, version) • Can define required permissionshttps://marketplace.firefox.com/developers/docs/manifests
  32. 32. web = default app, permissions limited to open web api’s specified in therepriviliged = has to go through app store review process, has access to some more sensitiveapi’scertified = system critical apps
  33. 33. web = default app, permissions limited to open web api’s specified in therepriviliged = has to go through app store review process, has access to some more sensitiveapi’scertified = system critical apps
  34. 34. web = default app, permissions limited to open web api’s specified in therepriviliged = has to go through app store review process, has access to some more sensitiveapi’scertified = system critical apps
  35. 35. web = default app, permissions limited to open web api’s specified in therepriviliged = has to go through app store review process, has access to some more sensitiveapi’scertified = system critical apps
  36. 36. Storing data • Local Storage • IndexedDB • Limited storage! • Manifest file can increaseFor storing data rely on local storage or IndexedDB, which has limited storage but these limitscan be improved by specifying this in the manifest file.
  37. 37. Writing first appLets get this thing rolling. [Mortar](https://github.com/mozilla/mortar) is a set of projectsthat can bootstrap you in creating Web Apps.
  38. 38. Mortar • HTML5 Web App • Files • Caching • Manifest • Everything to get started fast!It does not only contain all relevant files for your project, but also does the caching for youand has the manifest files that are required to get your app in the marketplace.
  39. 39. The application now runs and you can use any browser to access the application and startusing it.
  40. 40. Mortar contains stubs for applications, a game, list-detail views, and tab view. These samplesare ready and free to use, and very easy to manipulate into your own application.
  41. 41. Of course, everyone has the emulator installed; so lets go into Firefox. Tools -> WebDeveloper -> Firefox OS.
  42. 42. The emulator shows up and the easiest way to get started: unlock the phone and click thebrowser icon, go to http://localhost:8008. This is it. Your app now runs in the emulator.
  43. 43. Debugging time • Install Firefox Nightly and go to the app page, debug with default tools • Remote connection via emulator • This breaks often! • WeinreBecause your app is just another web application, we can use the default firefox developertools to debug the application. You can do this from two sources.
  44. 44. Connect to emulator • Go to about:config • Toggle devtools.debugger.remote-enabled • In the emulator • Settings -> Device Information -> More information -> Developer • Toggle ‘Remote debugging’about:config devtools.debugger.remote-enabled true
  45. 45. This doesn’t work on recent builds of the debugger, and breaks often. Doesnt work on realdevice.
  46. 46. https://github.com/robnyman/ Firefox-OS-Boilerplate-AppSo your app runs on the emulator, but it doesnt use any capabilities that Firefox OS offersadditionally. Here is https://github.com/robnyman/Firefox-OS-Boilerplate-App
  47. 47. Get hacking!
  48. 48. Questions?github.com/janjongboom