This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

demand

I met a demand these days: when the user refreshes the page or closes the page, the front end should send a request to the background to release the authorization of the page.

Analysis, this is not in the page uninstall request, three five divided by two to achieve a version:

window.addEventListener("beforeunload".() = > {
let oReq = new XMLHttpRequest();
oReq.open("POST"."http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "Programming samadhi"}));
Copy the code

Test findings:

  • Basically meet the requirements when refreshing the page (occasionally, there will be the phenomenon that the background does not receive the request, but the probability is very low)
  • Background did not receive the request when the page was closed

Async Ajax does not work, so try async Ajax.

After a search, the explanation is as follows:

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

The bottom line is: For Chrome now, synchronous XHR requests are not allowed to be sent when the page navigation leaves or is shut down by the user. These events are: beforeUnload, PageHide, And VisibilityChange.

Although the problem is not solved, but long knowledge, this wave is not too deficient!

navigator.sendBeacon()

A search later revealed that there was an interface specifically designed to do this, navigator.sendbeacon ().

describe

This approach is primarily used to meet the needs of statistical and diagnostic code that typically tries to send data to a Web server before unloading a document.

grammar

navigator.sendBeacon(url, data);
Copy the code

parameter

  • urlShow thatdataThe network address to be sent.
  • dataThe parameter is what will be sentArrayBufferView 或 Blob 、DOMStringorFormDataType of data.

The return value

The sendBeacon() method will return true when the user agent successfully added data to the transmission queue, and false otherwise.

implementation

Now that you have an interface, it’s easy to implement.

code

 window.addEventListener("beforeunload".(e) = > {
    const data = {name: "Programming samadhi"};
    window.navigator.sendBeacon("http://127.0.0.1:1991/loginout".JSON.stringify(data));
});
Copy the code

The effect

Whether refresh the page or close the page, the background can receive the request sent by the front end, perfect to achieve the requirements.

conclusion

Browsers are becoming more and more powerful, and the apis they support are becoming more and more rich. Things that were hard to implement in the past may now be a piece of work.

~

Thanks for reading!

~

Learn interesting knowledge, make interesting friends, and create interesting souls!

Hello everyone, I am the author of “programming Samadhi” Hermit King, my public number is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have the ink to greet! You return, regardless of gain and loss, only with aftertaste!

Both knowledge and skill, internal force and external work, both theory and practice should grasp, both hands should be hard!