iPhone Appleless Apps

4,914
-1

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,914
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×