Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iPhone Appleless Apps

5,473 views

Published on

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.

Published in: Technology, News & Politics
  • Be the first to comment

iPhone Appleless Apps

  1. 1. Appleless iPhone Apps
  2. 2. ...without the App Store
  3. 3. ...without Objective-C
  4. 4. ...using web technology
  5. 5. HTML5 & CSS3
  6. 6. And it works without a connection!
  7. 7. Demo
  8. 8. Technology
  9. 9. •HTML & CSS •HTML5 offline applications •Meta tags to hide status bar •Touch icon •Touch events
  10. 10. Offline Applications <html manifest="rubiks.manifest">
  11. 11. CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js # version (busting)
  12. 12. First Load 1. Requests all resources 2. Parses manifest 3. Reloads and stores/caches all resources (not sure why) 4. Now ready
  13. 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. 14. Home Screen App •Touch icon 73x73: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> •Web app capable meta tags
  15. 15. <meta name="apple-mobile-web-app- capable" content="yes" /> <meta names="apple-mobile-web-app- status-bar-style" content="black- translucent" />
  16. 16. Touch Events •mousedown => touchstart •mouseup => touchend •mousemove => touchmove •within event.touches[0]
  17. 17. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
  18. 18. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
  19. 19. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
  20. 20. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
  21. 21. Native Look
  22. 22. •iUi - older, doesn't do native CSS transforms •jqTouch - jQuery does do native CSS transforms
  23. 23. jqtouch.com
  24. 24. But also:
  25. 25. •Geolocation •Offline storage: web database or storage •Off/Online detection •CSS 3D transforms & CSS transitions •Canvas
  26. 26. Thanks! Remy Sharp / @rem http://icanhaz.com/rubiks

×