Web開發(fā)者在系統(tǒng)開發(fā)中經常要面對產品經理各式各樣的需求恢氯,當然,大部分對產品體驗還是有幫助的鼓寺,例如我們今天提到的刷新頁面勋拟,前進后退,關閉瀏覽器標簽時妈候,為了避免用戶誤操作敢靡,需給出二次確認提示框,這個相信大家都非常熟悉了州丹,采用瀏覽器提供的BOM事件機制就可以解決醋安,使用window對象的onbeforeunload事件即可,如果產品經理只提出這樣的需求墓毒,那確實無可厚非吓揪,然而其需要的不僅僅是這些...
例如,我們一次項目開發(fā)中所计,產品經理就針對我們的實現(xiàn)提出了“改進方案”:
- 你們這彈出框太丑了柠辞,跟系統(tǒng)整體風格不搭調啊,不能使用咱們自己組件庫中的Dialog嗎主胧?很好的問題...我只想說叭首,you can you up...
- 你們這刷新和關閉標簽頁中展示的文案一樣啊,需要區(qū)分對待下踪栋,刷新提示XXX焙格,關閉時提示SSS,這樣用戶才能更明確夷都。恩眷唉,考慮到了用戶的體驗,很好囤官,我還是想說冬阳,you can you up...其實,瀏覽器在關閉和刷新時党饮,本身已經區(qū)別對待了肝陪,提示是不同的,只不過我們自定義的部分并不能顯示不同的文案而已刑顺;當然氯窍,也有一些hack的方法饲常,但是很難適應多個瀏覽器,各瀏覽器內部對于關閉標簽頁和刷新的實現(xiàn)機制會有所不同狼讨;
- 你們每次登錄進來不皆,為什么要延時10秒,才讓坐席簽入電話系統(tǒng)靶苈ァ(我們做的是客服系統(tǒng))?能不能把這個限制去掉啊能犯,用戶體驗太不好了鲫骗!我們也想去掉啊,但是電話系統(tǒng)頻繁簽入簽出會有問題踩晶,用戶刷新了瀏覽器执泰,再次簽入,如果相隔時間很短的話渡蜻,電話系統(tǒng)會出現(xiàn)故障术吝,為了避免這個問題,我們才加上了這個限制茸苇,但是回過頭來思考排苍,就可以進入我們今天討論的主題了;
區(qū)分刷新與關閉標簽頁
我們無法根據瀏覽器事件區(qū)分刷新還是關閉標簽頁学密,進而在相應動作觸發(fā)前淘衙,執(zhí)行不同的動作,但是對于上文中產品提出的第三點意見腻暮,其實還是可以考慮優(yōu)化一下的彤守,就是只有在刷新的時候延時10秒,新登錄或關閉標簽頁一段時間之后再進來時不延時哭靖;
要做到這點其實也很簡單具垫,使用瀏覽器的本地存儲機制就可以實現(xiàn),例如cookie试幽,LocalStorage等筝蚕,這里就不能使用SessionStorage了,因為本次回話結束后抡草,該緩存就失效了饰及;由于在cookie中存儲會增加cookie的字節(jié)數(shù),每次請求中相應的網絡傳輸量會增加康震,因此燎含,我們采用了LocalStorage;其操作很簡單腿短,我們使用的前端框架是AngularJS屏箍,具體如下:
const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}
上面代碼主要作用是绘梦,進入系統(tǒng)后,會先去LocalStorage中獲取上次退出時的時間赴魁,再獲取當前時間卸奉,兩個時間進行減法,如果值小于10秒颖御,我們就認為這是刷新榄棵,如果值大于10秒,我們認為是關閉標簽頁或新登錄潘拱,進而可以執(zhí)行不同的方法疹鳄,讓客服有更好的體驗,不用每次進入系統(tǒng)都要等待10秒才能簽入電話系統(tǒng)了芦岂,產品經理還是很重要的瘪弓,吼吼,要不是他的疑問禽最,可能我們也不會來優(yōu)化這個地方了...當然腺怯,其實RD也要逐漸培養(yǎng)這種用戶體驗至上的思維,哪怕有一點可提升客服效率的地方川无,都值得我們花時間來優(yōu)化呛占;
下面把相關退出的代碼也貼一下吧,前面忘說了懦趋,不管是刷新栓票,還是關閉標簽頁,只要是頁面銷毀愕够,我們都會去執(zhí)行登出電話系統(tǒng)的操作走贪,所以每次進來后需要重新簽入;
//刷新頁面或者關閉頁面
$window.onbeforeunload = () => {
return '操作將會導致頁面數(shù)據清空惑芭,請謹慎操作...';
};
//每次頁面unload時坠狡,設置LocalStorage時間;
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};
我們可能還注意到一些問題遂跟,那就是刷新逃沿,關閉頁面,前進后退幻锁,你需要跳出瀏覽器默認二次確認框凯亮,但是用戶點擊退出系統(tǒng)按鈕,則必須彈出自己組件庫中的Dialog了哄尔,還必須不能兩個都彈出假消,具體代碼如下:
onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您確定要退出系統(tǒng)嗎?'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 內部操作岭接,大家不用管
...
}
}