iPhone Appleless Apps

  • Published on
    27-Jan-2015

  • View
    103

  • Download
    1

Embed Size (px)

DESCRIPTION

A talk that demonstrates how to exploit the technology inside Safari on the iPhone to create rich apps without having to go through the app store.

Transcript

  • 1. Appleless iPhone Apps

2. ...without the AppStore 3. ...without Objective-C 4. ...using webtechnology 5. HTML5 & CSS3 6. And it workswithout a connection! 7. Demo 8. Technology 9. HTML & CSS HTML5 offline applications Meta tags to hide status bar Touch icon Touch events 10. Offline Applications 11. CACHE MANIFEST/demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js# version (busting) 12. First Load1. Requests all resources 2. Parses manifest 3. Reloads and stores/caches allresources (not sure why) 4. Now ready 13. Subsequent load 1. Request manifest 2. Checks for changes in manifest 3. If changed: Reload all resources and cache locally 4. else Load client with local resources 14. Home Screen AppTouch icon 73x73:Web app capable meta tags 15. 16. Touch Eventsmousedown => touchstart mouseup => touchend mousemove => touchmove within event.touches[0] 17. Simple jQuery $(document).bind('touchstart',function (evt) {// jQuery creates a bespoke eventevt = evt.originalEvent.touches[0];} ); 18. Simple jQuery $(document).bind('touchstart',function (evt) {// jQuery creates a bespoke eventevt = evt.originalEvent.touches[0];} ); 19. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent); 20. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent); 21. Native Look 22. iUi - older, doesn't do native CSS transformsjqTouch - jQuery does do native CSS transforms 23. jqtouch.com 24. But also: 25. Geolocation Offline storage: web database or storageOff/Online detection CSS 3D transforms & CSS transitionsCanvas 26. Thanks!Remy Sharp / @remhttp://icanhaz.com/rubiks