First of all, forgive me for taking so long to write this down.

First of all, record the occurrence scenario of this problem. Since our company is engaged in projects related to live broadcast function types, in the process of developing H5, there is a requirement to perform some operations on the page when the page exits (sending an asynchronous request).

When see this requirement, wish close it only need to monitor the page to do the operation of an exit is OK, so simple, actually otherwise, in the development of H5 when debugging each browser to find not so simple, but also had difference between android and IOS, some browsers will trigger, some not trigger, some into the monitoring method, But instead of performing asynchronous operations, I looked up a lot of data

To explain why this happens:

·· This only happens on the built-in back and off of Ios or Tencent’s built-in browser

  1. Let’s start with the solution
window.addEventListener('pagehide'.() = >{
console.log('Page closed')
    $.ajaxSettings.async = false; // Synchronize requests to prevent the page from closing before the POST request has been executed
    $.post("url", {},function(data){},'json')},false)
Copy the code

May everyone through this solution, the synchronous and asynchronous requests to this can be part of the solution, but, in the IOS WeChat built-in browser, the ajax request is not valid, because on the IOS mobile phone, shut down the page is process of soon, interface to response the assembly is broken, That’s why invalid requests occur, so there’s a way to do it

Navigator.sendbeacon (urRL, formData) The first parameter is the address of the request, the second parameter is the parameter to carry, POST request, Window.addeventlistener ('onunload',()=>{navigator.sendBeacon(urrl, formData)}, false)Copy the code

This allows the request to be sent efficiently

I think there is a blind spot when checking the data. Many people say that the onUnload event cannot be monitored by ios mobile phones, but I found it can be monitored during the test. If you can’t, you can use pagehide event as the proxy

  1. In the built-in browser of Android and ios phones, when we click the browser built-in return, we cannot effectively monitor the page return and close, nor can we effectively enter the monitored event, which appears at this timevisibilitychangeThis event listens for the display of the page. We can listen to the browser as it clicks back
document.addEventListener('visibilitychange'.(e) = >{
  if (document.visibilityState === 'hidden') {
    console.log('Page hidden')}else if (document.visibilityState === 'visible') {
    console.log('Page displayed')}},false)
Copy the code

3. The scheme mentioned above cannot effectively support the requirements of my project, because there are many cases of closing the browser in ios mobile phones, such as: press home to return to the foreground, slide your finger to the middle platform, etc. These operations cannot be monitored no matter what events are used

So if you need to do something like this, don’t even think about doing it on the client side. You only have two options right now: 1. 2. Do this on the server.

Of course, avoiding the product side of the business doesn’t make it possible to do this either, so it has to be done on the server side, that is, with a heartbeat check method to fulfill this requirement

Every few minutes the back end returns a message, I receive the message at the same time to the back end of a signal, which is equivalent to a long link, of course, performance is definitely a loss, this is unavoidableCopy the code

The above are some of their own views and practical experience, there are any mistakes and good solutions can leave a comment!! Become a little ant on the road