移动端利用'Page Visibility'保持应用状态注意事项(译文)

发表于

当浏览器最小化或者打开其他页签时，很多情况下，你可能并不希望当前页签应用被中止或者打断，而是期望当前页签应用的状态能够维持原状。
幸运的是，我们可以使用Page Visibility APi来实现。PC系统中规中矩的参照api使用即可，下面主要介绍几点Mobile端使用需要注意的几点。

visibilityState, pageshow, pagehide, beforeunload, unload

很多移动应用中使用此api遇到的问题在于他们没有考虑手机的生命周期：他们监听了一些可能永远都不会触发的事件，或者忽视了少数高耗用户的用户体验。
老实说，移动平台对于探索不同的事件也确实并非易事，那针对上面的那些事件，我们到底该在何时何处，如何使用呢？
先上一张图说明app的生命周期：
lifecycle

你别寄希望在移动平台触发上面的pagehide、beforeunload及unload事件了。这个问题并不来源于你喜爱的浏览器出现的bug，根源在于所有的移动操作系统的工作原理。
一个应用从active状态到background状态，可能由以下几种方式触发：

  • 用户可以通过点击消息通知等切换到其他app；
  • 用户可以通过任务管理器的切换进入其他app；
  • 用户可以点击home返回桌面；
  • 操作系统选择是否中断用户的行为-例如：有来电。
    一旦应用切换到background状态，它就可能在未来某一刻被杀死-例如：操作系统可能会中止进程并释放资源、用户可能会通过任务管理器关闭app。
    这样导致的结果就是你期望触发的上面三个事件，都没有触发。

为了良好的用户体验，不管是Mobile端还是PC端的应用，都必须使用Page Visibility Api，在visibilityChange事件触发时来执行session保存及暂存逻辑等操作，这是你应用可以依赖的唯一一个事件。

1
2
3
4
5
6
7
8
9
10
11
// query current page visibility state: prerender, visible, hidden
var pageVisibility = document.visibilityState;
// subscribe to visibility change events
document.addEventListener('visibilitychange', function() {
 		// fires when user switches tabs, apps, goes to homescreen, etc.
   	if (document.visibilityState == 'hidden') { ... }
   	// fires when app transitions from prerender, user returns to the app / tab.
   	if (document.visibilityState == 'visible') { ... }
});

如果你指望unload事件来做这些事，你就忽视了移动端可能永远不会触发unload事件。同样的，如果你指望beforeunload事件，你就忽视了在清理应用情况下关闭应用时将不会触发此事件。

实际情况下的考虑

一般情况下，你只需要使用Page Visibility Api就够了。然而在今天，你可能会想讨论下pagehide，这算是当页面进入unloaded状态的一种特例。下面是一些主流浏览器在哪些情况下会触发哪些事件的一个简要说明：

can i use?

  • visibilityChange在移动平台的任务切换状态下可以正常工作；
  • beforeunload备受限制，只能在PC端可以正常使用；
  • unload不能在Safari浏览器中正常工作。

最后(自己想法)

Page Visibility Api用途有哪些呢，比如音视频播放，切换后台可以暂停，再切换进来保持状态等，希望通过此文可以在使用过程中避免一些莫名的坑。

(本文译自：dont-lose-user-and-app-state-use-page-visibility By Ilya Grigorik on November 20, 2015 )

money☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ money