Slides for my closing talk before the panel at State of the Browser in London on 26th of April 2014 covering the why and how of Open Web Apps.

1. Christian Heilmann (@codepo8)
State of the Browser 2014
(26/04/14, London, England)
OPEN WEB APPS

5. THIS IS NOT ABOUT NATIVE VS. WEB

6. WHAT MAKES A GOOD APP?
• focused: fullscreen with a simple interface
• mobile: works offline
• contained: deleting the icon deletes the app
• integrated: works with the OS and has hardware
access
• responsive and fast: runs smooth, can be killed
without taking down the rest of the OS

7. DOES ONE THING AND ONE
THING WELL!

9. CAN ALL OF THAT BE ACHIEVED
WITH OPEN WEB APPS USING
HTML5?

10. FOCUSED APPS

11. WORKS OFFLINE

12. USE APPCACHE AND LOCAL
FORAGE NOW.
https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/

13. HELP US MAKE SERVICE
WORKER EPIC.

14. CONTAINED
http://smus.com/installable-webapps/

15. Privileged Web App
More access, more
responsibility
Web Content
Regular web content
APP TYPES
Installed Web App
A regular web app
Certified Web App
Device-critical
applications

16. INTEGRATED
https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/
https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/

17. ENTER CORDOVA
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

18. CORDOVA <3 FIREFOX OS (IT’S TRUE)
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

19. RESPONSIVE AND FAST

20. ZOMG 60FPS!!!!

21. BEFORE THEY WERE 60FPS
https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines

23. OPEN WEB APPS MEANS USING
THE BEST OF APPS AND WEB.
TAKE ON THE CHALLENGE!

24. FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

25. INSTALL FROM THE WEB…

26. https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
!
Aquarium Plants (Android w/ hand-coded native wrapper)
Calc (iOS w/ hand-coded native wrapper)
Calcula Hipoteca (Amazon Appstore)
Captain Rogers (HTML5 Desktop)
Cartelera Panama (Appcelerator Titanium)
Fresh Food Finder (PhoneGap)
Picross (WebOS)
Reditr (Chrome Dev Store)
Speed Cube Timer (Blackberry Webworks)
Squarez (C++)
Touch 12i (Windows Phone/ HTML5)
NOTHING IS WASTED…

28. APPMAKER!
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API

30. THANKS!
CHRIS HEILMANN
@CODEPO8