pipwerks / scorm-api-wrapper

The pipwerks SCORM API Wrapper
http://pipwerks.com
362 stars 125 forks source link

using beforeunload eventlistener in the wrapper #42

Closed smartnio closed 6 years ago

smartnio commented 6 years ago

Hello, i was currently experiencing a problem with the communication between my course and the LMS. It happens, that if you are on a mobile device(iOS in my case), the LMS calls wasn't registered / send when i close the browser window/tab.

While i was testing some things, it seems that the onbeforeunload/onunload isn't supported for Safari on iOS. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility

I had the same experience with Chrome v50 on the same tablet. My fix is this:

if ('onpagehide' in window) {
  //pagehide is support by Safari on mobile devices
  window.addEventListener("pagehide",yourFunction);
} else {
  //use other eventlisteners if pagehide isn't supported
  window.onunload = window.onbeforeunload = yourFunction;
}

This might be interesting for your API-Wrapper, because you are using it too. Please, feel free to test this on your own first. It helped me.

Best, Martin

moloko commented 6 years ago

it seems that the onbeforeunload/onunload isn't supported for Safari on iOS

@Gohrlan onbeforeunload isn't supported by Safari for iOS but onunload is

This might be interesting for your API-Wrapper, because you are using it too

I don't think it is used anywhere in the API Wrapper...?

smartnio commented 6 years ago

Unfortunately i had no success with onunload on iOS10. Maybe it works on a later version. I can't say that. But following the official apple documentation onunload is also deprecated. See here

And you are right, it is not used in the wrapper. But it's mentioned on the pipwerks blog how to use the wrapper. If it's the case like i have right now, that onunload doesn't work, it should be mentioned somewhere: https://pipwerks.com/2010/08/06/scorm-tip-use-an-onunload-handler/

moloko commented 6 years ago

Interesting, I don't have access to a device running iOS10 currently but don't recall this ever being a problem. It's certainly fine on iOS 9 and iOS12.

If you were using window.onunload = window.onbeforeunload = yourFunction; that could be the problem - only one function can be attached to on onunload that way so it's possible for, say, the LMS to add its own function, overwriting yours.

The safer way, as described here is to use window.addEventListener instead - as you're doing for pagehide. @pipwerks blog post was written back in 2010 (a long ago in internet years!) and I seem to recall window.addEventListener didn't have wide support back then.

Interesting about onunload being deprecated in Safari for iOS though, I didn't know that. Still works in iOS12, thankfully, but I might well update my code to pagehide in order to future-proof it.

pipwerks commented 6 years ago

This is an interesting conversation. Thanks for posting your findings, @Gohrlan . onbeforeunload and onunload are not part of the wrapper, so I will close the issue -- no code changes are necessary here.

As you have pointed out, I do have some blog posts that recommend using those handlers. And as @moloko points out, those are some preeeeettttttty old articles. Google Chrome was a baby (was it even out yet?) and there was no cross-browser support for window.addEventListener -- Internet Explorer used window.attachEvent. Nowadays I definitely recommend using window.addEventListener.

I've closed the ticket, but feel free to continue the conversation if you like.

moloko commented 6 years ago

Yeah Chrome was two years old so still a baby. IE6 was still the most-used 😱 which is why we all built e-learning in Flash!