Best practices for building cross browser compatible web apps
Open Web Apps - State of the Browser 2014
30
Christian Heilmann (@codepo8) State of the Browser 2014 (26/04/14, London, England) OPEN WEB APPS
-
date post
12-Sep-2014 -
Category
Technology
-
view
2.933 -
download
0
description
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.
Transcript of Open Web Apps - State of the Browser 2014
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!
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
