Post on 06-May-2015
Firefox OSUnicorns and rainbows
Jan Jongboom
@janjongboom
You already have created an app
Embrace the phone
The mobile web is broken
We’re back in 1999
We’re back in 1999
No AJAX?!
-webkit-prefix
Let’s open up the mobile web
Firefox OS app=
website + W3C proposed phone APIs
The web is awesome
So let’s get going... (nothing fancy yet)
github.com / comoyo / ffos-list-detail
“Firefox OS Simulator”
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
http://localhost:8081/manifest.webapp
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
није лоше!
github.com/comoyo/ffos-list-detail
Now get funky!
Architecture
KernelDevice Drivers
Hardware Abstraction Layer
BrowserJavascript engine
APIs for hardware access
User facing apps (HTML/CSS or WebGL)Gaia
Gecko
Gonk
Unleash the power of WebAPIs
Regular APIs• Vibration• ScreenOrientation• GeoLocation• MouseLock• OpenWebApps• NetworkInformation• BatteryStatus• Alarm• WebActivities
• PushNotifications• WebFMApi• WebPayment• IndexedDB• AmbientLightSensor• ProxyimitySensor• Notification
Yellow = Approved by W3C
Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI
• WebBluetooth• PermissionsAPI• NetworkStatsAPI• CameraAPI• Time/ClockAPI• Attentionscreen• Voicemail
Requires certification process
Your phone is aware of your
surroundings, take advantage!
https://github.com/robnyman/Firefox-OS-Boilerplate-App
Application bus
Hey I need an image!
Sure, I can provide you with one!
Web activities
I NEED AN ADULT!
https://developer.mozilla.org/en-US/docs/WebAPI
Offline
Dealing with offline
• Have the necessary application files available
• Cache server side data
• Store app state on device
Storing data
• Local Storage
• IndexedDB
Limited storage!
Ask for more through manifest
Two types of apps
• Hosted
• Assets on the server
• Cacheable via appcache
• Packaged
• ZIP archive with assets
Caching with appcache
ZIP
• One big zip file
• Resources loaded from zip file
• Still requires manifest file
One more thing...
The app manifest file
• Has name, description, version for market place
• Define permissions (calling, storage)
• Web activity provider (I provide images!)
https://marketplace.firefox.com/developers/docs/manifests
Get hacking!
Questions?
Twitter: @janjongboom
slideshare.net/janjongboom