iPhone Appleless Apps
•
2 likes•1,685 views
This document discusses how to build iPhone apps using only web technologies like HTML5, CSS3, and JavaScript without relying on native iOS frameworks or the App Store. Key points covered include how to create offline-capable apps using the cache manifest, emulate touch events with JavaScript, make the app feel native through CSS transforms and meta tags, and detect device capabilities. The example rubiks cube app demonstrates these techniques to create an offline-capable puzzle game experience on iPhone similar to a native app.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to iPhone Appleless Apps
Similar to iPhone Appleless Apps (20)
More from Remy Sharp
More from Remy Sharp (20)
Recently uploaded
Recently uploaded (20)
iPhone Appleless Apps
- 2. ...without the App Store
- 5. HTML5 & CSS3
- 6. And it works without a connection!
- 7. Demo
- 9. Technology
- 10. •HTML & CSS •HTML5 offline applications •Meta tags to hide status bar •Touch icon •Touch events
- 11. Offline Applications <html manifest="rubiks.manifest">
- 12. CACHE MANIFEST /demo/rubiks/style.css /demo/rubiks/jquery.min.js /demo/rubiks/rubiks.js # version (busting)
- 13. First Load 1. Requests all resources 2. Parses manifest 3. Reloads and stores/caches all resources (not sure why) 4. Now ready
- 14. 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
- 15. Home Screen App •Touch icon 73x73: <link rel="apple-touch-icon" href="apple-touch-icon.png" /> •Web app capable meta tags
- 16. <meta name="apple-mobile-web-app- capable" content="yes" /> <meta names="apple-mobile-web-app- status-bar-style" content="black- translucent" />
- 17. Touch Events •mousedown => touchstart •mouseup => touchend •mousemove => touchmove •within event.touches[0]
- 18. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
- 19. Simple jQuery $(document).bind('touchstart', function (evt) { // jQuery creates a bespoke event evt = evt.originalEvent.touches[0]; } );
- 20. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
- 21. Detecting iPhones var iPhone = RegExp(" AppleWebKit/") .test(navigator.userAgent) && RegExp(" Mobile/") .test(navigator.userAgent);
- 22. Native Look
- 23. •iUi - older, doesn't do native CSS transforms •jqTouch - jQuery does do native CSS transforms
- 24. jqtouch.com
- 25. But also:
- 26. •Geolocation •Offline storage: web database or storage •Off/Online detection •CSS 3D transforms & CSS transitions •Canvas
- 27. Thanks! Remy Sharp / @rem http://icanhaz.com/rubiks