JavaScript application for iPad. Couple of tips
I got a project on adapting a flash e-learning course for iPad.
I wanted to share some points.
Media
The project was supposed to allow playing video / audio files, and without unnecessary movements by the user.
IPad video can only be played by clicking on something, i.e. automatically play a media file, for example, when you load the page does not work, or it turns out, but not in all versions of iOS.
So the first time to play video / audio has to click on the user. Further, if the src attribute is changed to the same tag, catching the onended event, playback can be done automatically.
There were several problems with this part of the project:
1. Before the file was uploaded, the video tag showed a QuickTime logo.
display: none or visibility: hidden did not work. Helped -webkit-transform: translateX (-2048px).
2. Some kind of jerking of sound took place before the video was loaded and ready to play. The problem was solved by checking the readyState property of the video tag.
3. For some reason, sometimes, by clicking the user, instead of the desired video file, an audio file was played. I read that in iOS the media object is implemented as a singleton, i.e. There can be only one instance per page. In general, this is all theory and this did not make me any easier. I tried to delete the src attribute or make it empty - no effect. By experimenting, src = ".." helped (src = "." Still did not help). Probably, it was possible to come up with something more beautiful, but since it was impossible to delete media tags and then I was very tired of this glitch, then I left everything that way.
So, playing the video file do this:
')
Another point about the video - clicking on it will not be able to catch, you need to put a layer on top and have an event to track on it.
Window events
1. ononline, onoffline - it was necessary to track the connection to the Internet in order to show the user some warnings and, if possible, to continue working.
2. onpageshow - works when the user does not close the window, clicked on the “home” button on the device itself, and then went back to safari.
3. onorientationchange - works out when switching between portrait and landscape modes of the device itself. Here you can catch window.orientation value to determine the mode.
4. onbeforeunload - this seemingly standard iPad event does not work. I had to download the entire application to the external iframe and monitor the onunload event.
Animation
1. Better to do with the help of css, using -webkit-transition. It works much faster, and this is very important, especially for iPad1.
2. Instead of animating the top and left properties, use translate3d.
3. The scale is well animated, it can come in handy when switching between portrait and landscape modes.
4. The opacity, width, height are badly animated, especially if the element has -webkit-box-shadow.
CSS
Everything is very good here, one browser and many useful features.
1. As far as possible, you need to avoid downloading pictures. Gradients, circles, triangles - everything can be done in styles.
2. The fastest way to hide items is with the translate3d or translateX properties.
3. You need to study the –web-kit css properties, which can save a lot of time. Here you can see http://css-infos.net/properties/webkit .
Touch events
1. I used jQuery Mobile, I really had to dig it up a bit, otherwise it added extra tags to the page. In svzak with scrollview plugin, a powerful scroller is obtained. I also tried http://cubiq.org/iscroll
2. For Drag'n'Drop, I used this plugin http://www.gotproject.com/blog/post2.html , though I had to finish it, because it did not take into account the scale value of the elements.
3. Instead of clicking, I used touchstart whenever possible — much faster.
Performance
1. iPad1 and iPad2 are very different in performance, so it is better to develop using iPad1.
2. It would be good to avoid serious manipulations with the addition / removal of DOM elements - iPad1 sometimes just bent over me.
3. Also, it is better to connect the files in the application header using, say, headjs.com, without this, sometimes the browser crashes without warning.
In general, the impression of work remained mixed - constantly had to look for some hacks, and because of this, there was often a feeling that everything was not going the way it should be. In my assessment of the project, I made a mistake twice due to the fact that I had never worked with iPad devices before.
But when I looked at the result at the end of the work, it was pleasant.
I wanted to share some points.
Media
The project was supposed to allow playing video / audio files, and without unnecessary movements by the user.
IPad video can only be played by clicking on something, i.e. automatically play a media file, for example, when you load the page does not work, or it turns out, but not in all versions of iOS.
So the first time to play video / audio has to click on the user. Further, if the src attribute is changed to the same tag, catching the onended event, playback can be done automatically.
There were several problems with this part of the project:
1. Before the file was uploaded, the video tag showed a QuickTime logo.
display: none or visibility: hidden did not work. Helped -webkit-transform: translateX (-2048px).
2. Some kind of jerking of sound took place before the video was loaded and ready to play. The problem was solved by checking the readyState property of the video tag.
3. For some reason, sometimes, by clicking the user, instead of the desired video file, an audio file was played. I read that in iOS the media object is implemented as a singleton, i.e. There can be only one instance per page. In general, this is all theory and this did not make me any easier. I tried to delete the src attribute or make it empty - no effect. By experimenting, src = ".." helped (src = "." Still did not help). Probably, it was possible to come up with something more beautiful, but since it was impossible to delete media tags and then I was very tired of this glitch, then I left everything that way.
So, playing the video file do this:
')
$(video).css("-webkit-transform", "translateX(-2048px)"); // -
/* , */
video.play();
if(video.readyState !== 4){
setTimeout(function(){
video.pause();
}, 1);
}
/* , */
$(video).bind("canplaythrough", function(){
$(video).css("-webkit-transform", "translateX(0)");
video.play();
});Another point about the video - clicking on it will not be able to catch, you need to put a layer on top and have an event to track on it.
Window events
1. ononline, onoffline - it was necessary to track the connection to the Internet in order to show the user some warnings and, if possible, to continue working.
2. onpageshow - works when the user does not close the window, clicked on the “home” button on the device itself, and then went back to safari.
3. onorientationchange - works out when switching between portrait and landscape modes of the device itself. Here you can catch window.orientation value to determine the mode.
4. onbeforeunload - this seemingly standard iPad event does not work. I had to download the entire application to the external iframe and monitor the onunload event.
Animation
1. Better to do with the help of css, using -webkit-transition. It works much faster, and this is very important, especially for iPad1.
2. Instead of animating the top and left properties, use translate3d.
3. The scale is well animated, it can come in handy when switching between portrait and landscape modes.
4. The opacity, width, height are badly animated, especially if the element has -webkit-box-shadow.
CSS
Everything is very good here, one browser and many useful features.
1. As far as possible, you need to avoid downloading pictures. Gradients, circles, triangles - everything can be done in styles.
2. The fastest way to hide items is with the translate3d or translateX properties.
3. You need to study the –web-kit css properties, which can save a lot of time. Here you can see http://css-infos.net/properties/webkit .
Touch events
1. I used jQuery Mobile, I really had to dig it up a bit, otherwise it added extra tags to the page. In svzak with scrollview plugin, a powerful scroller is obtained. I also tried http://cubiq.org/iscroll
2. For Drag'n'Drop, I used this plugin http://www.gotproject.com/blog/post2.html , though I had to finish it, because it did not take into account the scale value of the elements.
3. Instead of clicking, I used touchstart whenever possible — much faster.
Performance
1. iPad1 and iPad2 are very different in performance, so it is better to develop using iPad1.
2. It would be good to avoid serious manipulations with the addition / removal of DOM elements - iPad1 sometimes just bent over me.
3. Also, it is better to connect the files in the application header using, say, headjs.com, without this, sometimes the browser crashes without warning.
In general, the impression of work remained mixed - constantly had to look for some hacks, and because of this, there was often a feeling that everything was not going the way it should be. In my assessment of the project, I made a mistake twice due to the fact that I had never worked with iPad devices before.
But when I looked at the result at the end of the work, it was pleasant.
Source: https://habr.com/ru/post/136738/
All Articles