firefox os apps and web apis
DESCRIPTION
My presentation of March 13 in Budapest abouTRANSCRIPT
Firefox OSWeb APIs & Apps
Jan JongboomMarch 13, Budapest
1
@janjongboom
2
You already have created an app
3
Embrace the phone
4
The mobile web is broken
5
6
We’re back in 1999
7
We’re back in 1999
7
No AJAX?!
8
-webkit-prefix9
Let’s open up the mobile web
10
Firefox OS app=
website + W3C proposed phone APIs
11
12
13
The web is awesome
14
So let’s get going... (nothing fancy yet)
15
16
17
18
“Firefox OS Simulator”
19
20
21
21
http://localhost:8081/manifest.webapp
21
22
22
23
Firefox OS nagyon
egyszerű!
24
Now get funky!
25
26
27
Unleash the power of WebAPIs
28
Regular APIs• Vibration• ScreenOrientation• GeoLocation• MouseLock• OpenWebApps• NetworkInformation• BatteryStatus• Alarm• WebActivities
• PushNotifications• WebFMApi• WebPayment• IndexedDB• AmbientLightSensor• ProxyimitySensor• Notification
Yellow = Approved by W3C
29
30
31
32
33
34
I only use certified APIs!
35
Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI
• WebBluetooth• PermissionsAPI• NetworkStatsAPI• CameraAPI• Time/ClockAPI• Attentionscreen• Voicemail
Requires certification process
36
Your phone is aware of your
surroundings, take advantage!
37
https://github.com/robnyman/Firefox-OS-Boilerplate-App
38
Application bus39
Hey I need an image!
Sure, I can provide you with one!
40
Web activities
41
I NEED AN ADULT!42
https://developer.mozilla.org/en-US/docs/WebAPI
43
Offline
44
Dealing with offline
• Have the necessary application files available
• Cache server side data
• Store app state on device
45
Storing data
• Local Storage
• IndexedDB
• Limited storage!
• Manifest file can increase
46
Two types of apps
• Hosted
• Assets on the server
• Cacheable via appcache
• Packaged
• ZIP archive with assets
47
Caching with appcache
48
49
49
49
49
49
50
ZIP
• One big zip file
• Resources loaded from zip file
• Still requires manifest file
51
One more thing...
52
The app manifest file
• Part of your packaged app
• Has metadata (name, description, version)
• Can define required permissions
https://marketplace.firefox.com/developers/docs/manifests
53
54
54
54
54
Get hacking!
55
Questions?
github.com/janjongboom
http://bit.ly/ffos-budapest
56