Firefox OS Workshop @ Serbia & Montenegro

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