Background: for a recent countdown learning time recording project, you need to record the progress of the current page when the user clicks the back button of the browser or directly closes the browser, or directly exits wechat or enters the background. The next time you go in, you need to start the countdown from the last place you left. At first, I thought it was very simple to directly monitor the browser's return event window.onbeforeunload, which can be monitored on Android and pc, but not on iOS

Solution: according to Baidu's relevant documents, it is found that the iOS end detection needs to use pagehide to detect, so the code is modified as follows

var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios terminal

 if (isAndroid) {
                                //This is the Android operating system
                                window.onbeforeunload = function () {
                                    //Before window closing
                                   ...Pause the countdown and ajax Request to log to database
                                };
                            } else if (isIOS) {
                                //This is ios operating system
                                window.addEventListener('pagehide', function () {
                                           ...Pause the countdown and ajax Request to log to database
                                });
                            } else {
                                //this pc
                                window.onbeforeunload = function () {
                                    //Before window closing
                                    c      ...Pause the countdown and ajax Request to log to database
                                };
                            }

I was depressed for a long time. Apple's official document clearly stated that I could use this to monitor, but I couldn't. at one time, I thought it was a low version of the system, but I still couldn't monitor pagehide after upgrading to the latest system, Unable to record the data to the database. Finally, I went through Baidu's humble comments on a post and saw a saying: "try to change ajax request to synchronization, and I changed the code with a try attitude."

 //This is ios operating system
                                window.addEventListener('pagehide', function () {
                                    $.ajaxSetup({
                                        async: false//Turn off asynchrony
                                    });
                                    ...ajax Request record data to database
                                });
                                window.addEventListener('pageshow', function () {
                                    $.ajaxSetup({
                                        async: true//Restore asynchrony on page display
                                    });
                                });

The release test has been monitored. The long-standing problem has been solved. Although I don't know why, it's a good thing to solve it

Monitor browser return, close, exit, enter background complete code

if (isAndroid) {
                                //This is the Android operating system
                                window.onbeforeunload = function () {
                                    //Before window closing
                                    ...ajax operation
                                };
                            } else if (isIOS) {
                                //This is ios operating system
                                window.addEventListener('pagehide', function () {
                                    $.ajaxSetup({
                                        async: false
                                    });
                                   ...ajax operation
                                });
                                window.addEventListener('pageshow', function () {
                                    $.ajaxSetup({
                                        async: true
                                    });
                                });
                            } else {
                                //this pc
                                window.onbeforeunload = function () {
                                    //Before window closing
                                    ...ajax operation
                                };
                            }

                            //window.onunload = function () {
                            //    //After the window is closed
                            ...ajax operation
                            //};
                            window.addEventListener("popstate", function (e) {
                              ...ajax operation
                            }, false);
                            if (typeof document.hidden !== "undefined") {
                                hidden = "hidden";
                                visibilityChange = "visibilitychange";
                            } else if (typeof document.mozHidden !== "undefined") {
                                hidden = "mozHidden";
                                visibilityChange = "mozvisibilitychange";
                            } else if (typeof document.msHidden !== "undefined") {
                                hidden = "msHidden";
                                visibilityChange = "msvisibilitychange";
                            } else if (typeof document.webkitHidden !== "undefined") {
                                hidden = "webkitHidden";
                                visibilityChange = "webkitvisibilitychange";
                            }
                            document.addEventListener(visibilityChange, function () {
                                console.log("Whether the current page is hidden:" + document[hidden]);
                                if (document[hidden]) {//The page is hidden for background runtime monitoring
                                    ...ajax operation
                                }
                                else {
                                    ...Operation when the page re enters the foreground, such as restoring the countdown
                                }
                            }, false);