最近寫了一個把Page Visibility API和 AngularJS 接起來的小工具: angular-page-visibility
話說從頭
其實就是因為最近kono 的 web app需要在 user 切換 tab 的時候,去trigger一些特定的事件。一開始找到了jquery.blur 和 jquery.focus, 結果發現有點糗。糗點在於,我本來預期的行為是,當 user 切換 tab 到別的地方的時候,立刻 trigger blur
的 event, 然後在 user 回來的時候,再 trigger focus
的事件(對,就像正常人想像的那樣)。結果事實上是,當 user 離開 tab 的時候, blur
沒有被 trigger, 然後當 user 回到我們的 tab 之後,立刻 trigger focus
再 trigger blur
, 基本上就是全錯的意思 @@。 後來找到了原來有 Page Visibility API (我現在才知道 orz)。 但是好像沒有合意的 AngularJS interface。於是動手自己搞一個。
How it works
其實真正做的事情就像MDN寫的那樣,和 Angular 的介面,我把它做成一個可以被 inject 的 factory, 接到的是一個 $scope
object, 以便於用熟悉的 $broadcast
, $on
來收發 events.
Usage
用法是把它 inject 進任何你想 inject 的地方,然後聽 pageFocused
和 pageBlurred
這兩個事件:
// my_controller.js
angular.module('app')
.controller('MyController', function($scope, $pageVisibility) {
$pageVisibility.$on('pageFocused', function(){
// page is focused
});
$pageVisibility.$on('pageBlurred', function(){
// page is blurred
});
});
然後在 page blur / focus 的時候,就會 trigger 該 trigger 的 listener 惹。
Testing note
這個小 project 的 unit test 還是用 jasmine + sinon.js。
最近開始嘗試 coffee script, 發現原來 karma 可以讓 test code 不用先轉成 javascript 就直接跑,這樣跑起來快蠻多的。(也是現在才知道!!)
結論
code 在這邊, 如果有 bug 或任何意見,請不吝指教阿阿阿。