公众号网页、H5，PC网页仿App退出提示

小米应用商店退出提示如下：

实现方式

在线Demo（记得点击一次屏幕哟~）

应用入口添加如下代码（注意：进入页面后必须点击一次屏幕，退出提示才会生效）：

// antd-mobile@2.3.4
import { Toast } from 'antd-mobile';

if (typeof window !== 'undefined') {
  // 检测我们是否在浏览器环境
  let waitToExit = false;
  window.onpopstate = function (event) {
    // console.log('event', event);
    // console.log(
    //   'location: ' +
    //     document.location +
    //     ', state: ' +
    //     JSON.stringify(event.state),
    // );
    const { state } = event;

    if (state.isHomePage) {
      if (waitToExit) {
        // console.log(browser.versions.weixin);
        // 打开网页后需要点击（触摸）屏幕后，history.pushState() 才能生效
        browser.versions.weixin ? wx.closeWindow() : window.history.back();
      } else {
        waitToExit = true;
        Toast.info('再点一次,退出"UMIJS-MYAPP"', 3, () => {
          waitToExit = false;
          history.pushState(state, '');
          history.pushState({ isHomePage: false, page: 2 }, '');
        });
      }
    }
  };
  window.addEventListener('load', function () {
    // 避免二级页面刷新重复执行pushState
    if (history.length !== 1) {
      return;
    }
    window.history.replaceState(
      {
        isHomePage: true,
        page: 0,
      },
      'Default state',
    );
    // 首次进入页面，需要点击（触摸）一次屏幕，触发返回动作时才会触发 onpopstate 事件
    history.pushState({ isHomePage: true, page: 1 }, '');
    history.pushState({ isHomePage: false, page: 2 }, '');
  });
}

第一版：

// antd-mobile@2.3.4
import { Toast } from 'antd-mobile';

if (typeof window !== 'undefined') {
  // 检测我们是否在浏览器环境
  let waitToExit = false;
  window.onpopstate = function (event) {
    // console.log('event', event);
    // console.log(
    //   'location: ' +
    //     document.location +
    //     ', state: ' +
    //     JSON.stringify(event.state),
    // );
    const { state } = event;

    if (state.isHomePage) {
      if (waitToExit) {
        // console.log(browser.versions.weixin);
        // 打开网页后需要点击（触摸）屏幕后，history.pushState() 才能生效
        browser.versions.weixin ? wx.closeWindow() : window.history.back();
      } else {
        waitToExit = true;
        Toast.info('再点一次,退出"UMIJS-MYAPP"', 3, () => {
          waitToExit = false;
          history.pushState(state, '');
        });
      }
    }
  };
  window.addEventListener('load', function () {
    window.history.replaceState(
      {
        isHomePage: true,
        page: 0,
      },
      'Default state',
    );
    // 首次进入页面，需要点击（触摸）一次屏幕，触发返回动作时才会触发 onpopstate 事件
    history.pushState({ isHomePage: false, page: 1 }, '');
  });
}

问题一：点两次返回并没有进入退出逻辑：

if (waitToExit) {
    // console.log(browser.versions.weixin);
    // 打开网页后需要点击（触摸）屏幕后，history.pushState() 才能生效
    browser.versions.weixin ? wx.closeWindow() : window.history.back();
} 

解决：

window.addEventListener('load', function () {
    window.history.replaceState(
      {
        isHomePage: true,
        page: 0,
      },
      'Default state',
    );
    // 首次进入页面，需要点击（触摸）一次屏幕，触发返回动作时才会触发 onpopstate 事件
-    history.pushState({ isHomePage: false, page: 1 }, '');
+    history.pushState({ isHomePage: true, page: 1 }, '');
+    history.pushState({ isHomePage: false, page: 2 }, '');
  });

问题二：进入首页pageA，导航到pageB，手动刷新网页。此时点击返回按钮会提示 再点一次,退出"UMIJS-MYAPP"

解决：

window.addEventListener('load', function () {
+    // 避免二级页面刷新重复pushState
+    if (history.length !== 1) {
+      return;
+    }
    window.history.replaceState(
      {
        isHomePage: true,
        page: 0, href: location.href
      },
      'Default state',
    );
    // 首次进入页面，需要点击（触摸）一次屏幕，触发返回动作时才会触发 onpopstate 事件
    history.pushState({ isHomePage: true, page: 1 }, '');
    history.pushState({ isHomePage: false, page: 2 }, '');
  });

问题三：进入首页pageA，点击一次返回按钮，会提示 再点一次,退出"UMIJS-MYAPP"， 等待提示消失后，导航到pageB，此时点击返回按钮，页面会返回pageA，但是也会提示 再点一次,退出"UMIJS-MYAPP"

解决：

if (state.isHomePage) {
  if (waitToExit) {
    // 打开网页后需要点击（触摸）屏幕后，history.pushState() 才能生效
    browser.versions.weixin ? wx.closeWindow() : window.history.back();
  } else {
    waitToExit = true;
    Toast.info('再点一次,退出"UMIJS-MYAPP"', 3, () => {
      waitToExit = false;
      history.pushState(state, '');
+      history.pushState({ isHomePage: false, page: 2 }, '');
    });
  }
}