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