Downloaded 45 times
![Touch Events
•mousedown => touchstart
•mouseup => touchend
•mousemove => touchmove
•within event.touches[0]](https://image.slidesharecdn.com/barcampbrighton-091105072859-phpapp02/75/iPhone-Appleless-Apps-17-2048.jpg)
![Simple jQuery
$(document).bind('touchstart',
function (evt) {
// jQuery creates a bespoke event
evt = evt.originalEvent.touches[0];
}
);](https://image.slidesharecdn.com/barcampbrighton-091105072859-phpapp02/75/iPhone-Appleless-Apps-18-2048.jpg)
![Simple jQuery
$(document).bind('touchstart',
function (evt) {
// jQuery creates a bespoke event
evt = evt.originalEvent.touches[0];
}
);](https://image.slidesharecdn.com/barcampbrighton-091105072859-phpapp02/75/iPhone-Appleless-Apps-19-2048.jpg)
Uploaded byRemy Sharp
iPhone Appleless Apps
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.
More Related Content
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
iPhone Appleless Apps
- 1.
- 2. ...without the App Store
- 3.
- 4.
- 5.
- 6. And it works without a connection!
- 7.
- 9.
- 10. •HTML & CSS •HTML5offline applications •Meta tags to hide status bar •Touch icon •Touch events
- 11. Offline Applications <html manifest="rubiks.manifest">
- 12.
- 13. First Load 1. Requestsall resources 2. Parses manifest 3. Reloads and stores/caches all resources (not sure why) 4. Now ready
- 14. Subsequent load 1. Requestmanifest 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 •Touchicon 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.
- 23. •iUi - older,doesn't do native CSS transforms •jqTouch - jQuery does do native CSS transforms
- 24.
- 25.
- 26. •Geolocation •Offline storage: webdatabase or storage •Off/Online detection •CSS 3D transforms & CSS transitions •Canvas
- 27. Thanks! Remy Sharp /@rem http://icanhaz.com/rubiks