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

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

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

提到瀏覽器彈出式窗口，沒接觸過的人可能會很陌生，可是若是我叫它瀏覽器桌面推送可能會更好理解，即便在實際生活中沒有用到過瀏覽器桌面推送，亂七八糟的應用推送也會讓人記憶深入。爲何說它亂七八糟，由於不少消息用戶真的不關心，不想要，它都會強制推送出來。一樣，瀏覽器桌面推送也會存在這個問題。

接下來，就三個模塊，分別說明瀏覽器桌面推送的實現，怎樣給用戶帶來更好的瀏覽器桌面推送，如何優雅的獲取桌面推送權限。

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

首先你須要有一個正在使用的頁面，而且註冊並安裝了Serviceworker(注：service worker 是一段運行在瀏覽器後臺進程裏的腳本，它獨立於當前頁面，提供了那些不須要與web頁面交互的功能在網頁背後悄悄執行的能力)，在註冊Servieworker時，你能夠去向用戶請求彈出式窗口的權限，若是用戶確認受權，即可得到一個瀏覽器桌面推送服務的URL和一對密鑰。接下來當你想推送一個桌面推送到用戶頁面，能夠經過服務器向剛剛獲取的桌面推送服務的URL發送一個彈出請求，並經過得到的密鑰加密，這樣瀏覽器就沒法直接獲取你給用戶發送的消息，也會讓整個推送過程更加安全，彈出式窗口服務在獲取到發送給用戶的推送消息後，會觸發對應瀏覽器的Serviceworker的推送事件，這樣Serviceworker即可以經過瀏覽器展現一個桌面推送(瀏覽器彈出式窗口)在用戶面前。

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

這時候你可能會想了，那這個接口的兼容性如何

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

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

2、怎樣給用戶帶來更好的瀏覽器桌面推送

混亂的市場亂象已經讓用戶對不管是瀏覽器桌面推送，仍是應用桌面推送，都深惡痛絕，以致於常常會有這樣的用戶反饋。

這是開發者不想看到的，也是每個認真作產品的人不想看到的，桌面推送必定會有它的正面意義纔會被構想出來，通常來講，高質量的，好的，有用的桌面推送能帶來更好的用戶體驗，好比用戶收到了新消息須要一個推送，用戶的航班即將登機須要一個推送，快遞到了須要一個推送，外賣到了須要一個推送。

一個好的推送包含三個特色：時效性、交互性，針對性。

時效性：好比用戶週末準備自駕遊，他預定了一輛車，那麼當他車子到達他的預定地點時推送這個消息就具備時效性，這個消息在他自駕遊結束後就再也不須要。

交互性：有人發送給用戶一個消息，快遞或預約的車輛到達，航班開始登機，這些指引用戶去作一些操做的，消息與用戶之間存在某種交互的。

針對性：某我的收到了消息，某我的預訂的車子到達，某我的的航班開始登機，這類消息具備針對性，他不是寬泛的而是有針對行的。

因此說，某一天用戶打開電腦，桌面滴的彈出某某明星結婚的推送，而這位用戶卻並不對娛樂新聞關心，這對用戶來講並不具備時效性、交互性和針對性，因此這條推送對這個用戶來講是無心義的，長期以往會令用戶感受厭煩的。固然，對於某些追星者，或者對娛樂新聞感興趣的人，這條新聞對他就具備針對性，那麼，這條推送就是一個好的推送，但系統至少應該在用戶類型上作一個區分，由於一旦用戶由於某些厭倦的推送關閉了整個瀏覽器桌面推送的話，那對整個行業生態來講都是極其很差的。

某一天，有一個忍無可忍的用戶發了這樣一條推特

一個網頁應用讓用戶感到厭倦，這是每個認真作產品的人都不想看到的，開發產品的初衷就是爲用戶解決問題，給用戶帶來方便，而不是給用戶帶來問題，但很不幸，如今不少頁面應用已經給用戶帶來很差的體驗了，可是身爲開發者，如何能給用戶體驗帶來提高，這就是咱們的下一個話題，如何經過優雅的申請權限來提示用戶體驗。

3、如何優雅的獲取桌面推送權限

開發者在Web端能夠申請的權限有不少種，在這裏就不一一例舉，主要重點討論桌面推送權限。

永遠不要在用戶剛進入你的頁面時就向他申請權限，由於此時用戶並不知道你要作什麼，你甚至沒法給他一個完整的說明，在下面舉一個反例。

圖片中顯示這是一個視頻網站的首頁，用戶並不知道開啓推送後會給他帶來什麼，因此一般沒有用戶會在此時贊成開啓權限，就算開啓了權限，用戶接收到了他不想收到的推送，他也會產生厭倦，進而關閉該網站的推送權限，甚相當閉整個瀏覽器的推送權限，這都是開發者很是不肯意看到的。

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

結語

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

感謝閱讀