【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

soyo_su發表於2019-02-17

在前端大爆發的今天,隨著層出不窮的新技術和新框架的不斷推出和W3C標準的不斷更新,前端開發已經不侷限於展示服務端返回的資訊,而更多的去關注功能,這也帶給了我們更多思考。

本次JSCONF2018大會上就有一個內容,標題為《Aggressive Web Apps》,直譯為侵略性的頁面應用,但我更喜歡叫它《更好的瀏覽器彈出式視窗》。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

提到瀏覽器彈出式視窗,沒接觸過的人可能會很陌生,但是如果我叫它瀏覽器桌面推送可能會更好理解,即使在實際生活中沒有用到過瀏覽器桌面推送,亂七八糟的應用推送也會讓人記憶深刻。為什麼說它亂七八糟,因為很多訊息使用者真的不關心,不想要,它都會強制推送出來。同樣,瀏覽器桌面推送也會存在這個問題。

接下來,就三個模組,分別說明瀏覽器桌面推送的實現,怎樣給使用者帶來更好的瀏覽器桌面推送,如何優雅的獲取桌面推送許可權。

一、瀏覽器桌面推送的實現

首先你需要有一個正在使用的頁面,並且註冊並安裝了Serviceworker(注:service worker 是一段執行在瀏覽器後臺程式裡的指令碼,它獨立於當前頁面,提供了那些不需要與web頁面互動的功能在網頁背後悄悄執行的能力),在註冊Servieworker時,你可以去向使用者請求彈出式視窗的許可權,如果使用者確認授權,便可獲得一個瀏覽器桌面推送服務的URL和一對金鑰。接下來當你想推送一個桌面推送到使用者頁面,可以通過伺服器向剛剛獲取的桌面推送服務的URL傳送一個彈出請求,並通過獲得的金鑰加密,這樣瀏覽器就無法直接獲取你給使用者傳送的訊息,也會讓整個推送過程更加安全,彈出式視窗服務在獲取到傳送給使用者的推送訊息後,會觸發對應瀏覽器的Serviceworker的推送事件,這樣Serviceworker便可以通過瀏覽器展示一個桌面推送(瀏覽器彈出式視窗)在使用者面前。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

至於具體程式碼實現,集勤奮與智慧於一身的開發者早就找到了開(google)發(developer)的(Doc's)精(is)髓(good),這裡就不再做過多陳訴。

這時候你可能會想了,那這個介面的相容性如何

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

在Can i use我們可以看到,雖然有一部分瀏覽器還顯示為不支援狀態,但是在一句“您的瀏覽器版本過低,可能存在安全風險,建議升級瀏覽器”便可解決曾經困擾我們很久的相容性問題的時代,開發者大可大膽的像前考慮去使用新的特性來給使用者帶來更好的體驗。(PS : W3C專門做了一個頁面(成績單)來向各大瀏覽器廠商平行展示哪些功能他們支援哪些功能他們沒支援,誰支援了誰沒支援,來督促廠商相容新特性)

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

所以開發實現不是我們現在所面臨的問題,而且一切能用開(work)發(overtime)解決的問題都不是問題。但現在在我們所面臨的,遠比技術實現要複雜的多,那就是如何讓瀏覽器桌面推送能給使用者帶來更好的體驗,而不是被扼殺在搖籃之中,這也就引出了下一個話題,怎樣給使用者帶來更好的瀏覽器桌面推送。

二、怎樣給使用者帶來更好的瀏覽器桌面推送

混亂的市場亂象已經讓使用者對不論是瀏覽器桌面推送,還是應用桌面推送,都深惡痛絕,以至於經常會有這樣的使用者反饋。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

這是開發者不想看到的,也是每一個認真做產品的人不想看到的,桌面推送一定會有它的正面意義才會被構想出來,一般來說,高質量的,好的,有用的桌面推送能帶來更好的使用者體驗,比如使用者收到了新訊息需要一個推送,使用者的航班即將登機需要一個推送,快遞到了需要一個推送,外賣到了需要一個推送。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

一個好的推送包含三個特點:時效性、互動性,針對性。

時效性:比如使用者週末準備自駕遊,他預約了一輛車,那麼當他車子到達他的預約地點時推送這個訊息就具有時效性,這個訊息在他自駕遊結束後就不再需要。

互動性:有人傳送給使用者一個訊息,快遞或預定的車輛到達,航班開始登機,這些指引使用者去做一些操作的,訊息與使用者之間存在某種互動的。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

針對性:某個人收到了訊息,某個人預訂的車子到達,某個人的航班開始登機,這類訊息具有針對性,他不是寬泛的而是有針對行的。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

所以說,某一天使用者開啟電腦,桌面滴的彈出某某明星結婚的推送,而這位使用者卻並不對娛樂新聞關心,這對使用者來說並不具有時效性、互動性和針對性,所以這條推送對這個使用者來說是無意義的,長期以往會令使用者感覺厭煩的。當然,對於某些追星者,或者對娛樂新聞感興趣的人,這條新聞對他就具有針對性,那麼,這條推送就是一個好的推送,但系統至少應該在使用者型別上做一個區分,因為一旦使用者因為某些厭倦的推送關閉了整個瀏覽器桌面推送的話,那對整個行業生態來說都是極其不好的。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

某一天,有一個忍無可忍的使用者發了這樣一條推特

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

一個網頁應用讓使用者感到厭倦,這是每一個認真做產品的人都不想看到的,開發產品的初衷就是為使用者解決問題,給使用者帶來方便,而不是給使用者帶來問題,但很不幸,現在很多頁面應用已經給使用者帶來不好的體驗了,但是身為開發者,如何能給使用者體驗帶來提升,這就是我們的下一個話題,如何通過優雅的申請許可權來提示使用者體驗。

三、如何優雅的獲取桌面推送許可權

開發者在Web端可以申請的許可權有很多種,在這裡就不一一例舉,主要重點討論桌面推送許可權。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

永遠不要在使用者剛進入你的頁面時就向他申請許可權,因為此時使用者並不知道你要做什麼,你甚至無法給他一個完整的說明,在下面舉一個反例。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

圖片中顯示這是一個視訊網站的首頁,使用者並不知道開啟推送後會給他帶來什麼,所以通常沒有使用者會在此時同意開啟許可權,就算開啟了許可權,使用者接收到了他不想收到的推送,他也會產生厭倦,進而關閉該網站的推送許可權,甚至關閉整個瀏覽器的推送許可權,這都是開發者非常不願意看到的。

而在這其中有做的比較好的站點,他會在使用者操作到相關流程後,給使用者一個彈窗說明,向使用者說明相關內容後,再去申請許可權,這樣使用者可以明確的知曉開啟推送後將收到哪些內容,使用者有了足夠的心理預期,也更容易接受。最重要的,這可以避免給使用者帶來不必要的麻煩。所以說,永遠不要在使用者剛進入你的頁面時就向他申請許可權。

【JSConf EU 2018】有關瀏覽器彈出式視窗的相關探討

結語

很多剛入門的開發者都以為W3C是一個金字塔頂端的組織,其實不是的,每個人都可以參與到未來W3C標準的制定中,本次演講的演講者Phil就是如此,針對如何更好的獲取推送許可權,他在WICG中提出了一個建議,即在申請許可權時,要先與使用者進行互動確認後再申請許可權,不管開發者對此持什麼意見,都可以在(WICG/interventions/issues/49)中發表自己的意見,只要見解足夠有說服力,每個人都可以成為規則的制定者。最後,也是Phil反覆強調的,就是永遠不要在使用者剛進入你的頁面時就向他申請許可權。

感謝閱讀




相關文章