用戶買了VIP？那Web要怎麼知道呢？用頁面可見性API解決

APP中的付費項目通常會用原生的支付寶和微信支付，支付完成後回到web頁面。

如果頁面通過調橋來進行跳轉付款界面，理想情況下有個回調讓頁面知道用戶付款成功了，以對頁面進行響應的更新。還有一種方法時，APP在得到用戶支付完成的消息後刷新webview，但是如果頁面是有很多未保存狀態的SPA的話，這種方法就不太合適。

其實我們並不需要真的得知用戶是否完成了付款，退一步講，我們只需要知道用戶切換到了其它界面，然後切換回來就行。此時用戶可能完成了付款，也可能未完成。我們需要做的，是從後臺獲取用戶的最新狀態信息，以更新頁面。

這裏我們使用了document.visibilityState和visibilitychangeAPI。document會監控頁面的可見性，並在可見性變化時觸發相應事件。

/**
 * 處理頁面可見性變化
 * @param callback 回調
 * @param once 一次
 */
function handleVisibilitychange(callback, once) {
  let c = () => {
    if (document.visibilityState === 'visible') {
      callback()

      if (once) {
        document.removeEventListener('visibilitychange', c)
      }
    }
  }

  document.addEventListener('visibilitychange', c)
}