open web apps - state of the browser 2014
Post on 12-Sep-2014
2.933 views
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
![Page 1: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/1.jpg)
Christian Heilmann (@codepo8) State of the Browser 2014 (26/04/14, London, England)
OPEN WEB APPS
![Page 2: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/2.jpg)
![Page 3: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/3.jpg)
![Page 4: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/4.jpg)
![Page 5: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/5.jpg)
THIS IS NOT ABOUT NATIVE VS. WEB
![Page 6: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/6.jpg)
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
![Page 7: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/7.jpg)
DOES ONE THING AND ONE THING WELL!
![Page 8: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/8.jpg)
![Page 9: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/9.jpg)
CAN ALL OF THAT BE ACHIEVED WITH OPEN WEB APPS USING HTML5?
![Page 10: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/10.jpg)
FOCUSED APPS
![Page 11: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/11.jpg)
WORKS OFFLINE
![Page 12: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/12.jpg)
USE APPCACHE AND LOCAL FORAGE NOW.
https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/
![Page 13: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/13.jpg)
HELP US MAKE SERVICE WORKER EPIC.
![Page 14: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/14.jpg)
CONTAINED
http://smus.com/installable-webapps/
![Page 15: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/15.jpg)
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
![Page 16: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/16.jpg)
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/
![Page 17: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/17.jpg)
ENTER CORDOVA
• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
![Page 18: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/18.jpg)
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
![Page 19: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/19.jpg)
RESPONSIVE AND FAST
![Page 20: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/20.jpg)
ZOMG 60FPS!!!!
![Page 21: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/21.jpg)
BEFORE THEY WERE 60FPS
https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines
![Page 22: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/22.jpg)
![Page 23: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/23.jpg)
OPEN WEB APPS MEANS USING THE BEST OF APPS AND WEB. TAKE ON THE CHALLENGE!
![Page 25: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/25.jpg)
INSTALL FROM THE WEB…
![Page 26: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/26.jpg)
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…
![Page 27: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/27.jpg)
![Page 28: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/28.jpg)
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
![Page 29: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/29.jpg)
![Page 30: Open Web Apps - State of the Browser 2014](https://reader033.vdocument.in/reader033/viewer/2022052409/5412ebf88d7f72084e8b473e/html5/thumbnails/30.jpg)
THANKS! CHRIS HEILMANN @CODEPO8