iPhone Appleless Apps

  • 4,654 views
Uploaded 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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,654
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
43
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Appleless iPhone Apps
  • 2. ...without the App Store
  • 3. ...without Objective-C
  • 4. ...using web technology
  • 5. HTML5 & CSS3
  • 6. And it works without 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 <html manifest="rubiks.manifest">
  • 11. CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js # version (busting)
  • 12. First Load 1. Requests all resources 2. Parses manifest 3. Reloads and stores/caches all resources (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 App •Touch icon 73x73: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> •Web app capable meta tags
  • 15. <meta name="apple-mobile-web-app- capable" content="yes" /> <meta names="apple-mobile-web-app- status-bar-style" content="black- translucent" />
  • 16. Touch Events •mousedown => touchstart •mouseup => touchend •mousemove => touchmove •within event.touches[0]
  • 17. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
  • 18. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = 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 transforms •jqTouch - jQuery does do native CSS transforms
  • 23. jqtouch.com
  • 24. But also:
  • 25. •Geolocation •Offline storage: web database or storage •Off/Online detection •CSS 3D transforms & CSS transitions •Canvas
  • 26. Thanks! Remy Sharp / @rem http://icanhaz.com/rubiks