Christian Heilmann (@codepo8) State of the Browser 2014 (26/04/14, London, England)

OPEN WEB APPS

THIS IS NOT ABOUT NATIVE VS. WEB

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

DOES ONE THING AND ONE THING WELL!

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

FOCUSED APPS

WORKS OFFLINE

USE APPCACHE AND LOCAL FORAGE NOW.

https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/

HELP US MAKE SERVICE WORKER EPIC.

CONTAINED

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

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

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/

ENTER CORDOVA

• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration

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

RESPONSIVE AND FAST

ZOMG 60FPS!!!!

BEFORE THEY WERE 60FPS

https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines

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

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

INSTALL FROM THE WEB…

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…

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

THANKS! CHRIS HEILMANN @CODEPO8