像 Facebook, Youtube 有新消息時,在手機或電腦右下角跑出通知,而且他們甚至不是 APP,也不是需要安裝的應用程式,只是一般的網站而已,他們究竟是怎麼做到的? 看看本文的基本介紹。

這幾年 HTML5 喊得滿天價響,就連外行人都會問說:「你這網頁是用 HTML5 做的嗎?」,剛剛講的事情”推播通知”,就用到了兩個 HTML5 的 API :

一、HTML5 – 通知(Notification) API


– 在特定步驟(如一進網頁,或是使用者點擊某按鈕) 呼叫 api
– 讓網頁瀏覽器跟使用者要求權限,
– 一旦使用者按下允許之後…
– 這個網頁就可以透過瀏覽器,在當下顯示通知給使用者看。
– 這個網站域名在這個瀏覽器,就擁有了發通知的權限。

二、HTML5 – 推播(Push) API


(圖片來自 Service Workers 初体验 | w3cTrain )
– 讓伺服器發訊息給瀏覽器的一個技術。
– 經由 service worker… 等高深的瀏覽器機制傳輸接收資料。
– 若使用者沒打開你的網頁,甚至根本連電腦都沒開,瀏覽器還是會把訊息收下來存在異次元空間。
– 經由剛剛的 HTML5 通知 API 把訊息顯示出來,或是下次打開瀏覽器時會顯示出來。

開始實作

我們了解以上兩個技術之後,馬上投入企業預算五年五百塊,或是叫可憐的工程師中午以前就把它做出來? 但是馬上會碰到實務問題…
1.聽到 HTML5,下意識就是在Edge, Firefox, Chrome 一定各有一些地雷。沒關係,可以先 google html5 notification api demo,技術上先討論如何透過 notification API 讓網頁能跳出「是否接收允許通知」的對話視窗。
2.說實在的,一進網頁就跳一個對話視窗問是否允許,有多少人敢去按? 設計上要討論如何消費者願意接收通知。
3.怎麼讓 php 虛擬主機或 IIS 推送通知? github 上面找到的 code 大部分都是給 app 開發人員給 android, iOS app 用的。要拿來 PUSH API 的伺服器還需要 SSL 認證?
4.在工程師已經下班的情況下,文案編輯人員如何自行調整編輯通知內容?
5.版面顯示限制? 每則通知上面能放幾顆按鈕?
6.最好還要有個預覽畫面,知道打超過幾個字會被切掉或斷行?
7.可以預先編輯內容,預約定時上架更好。
8.能統計有多少人點擊推播通知就更好了,這年頭開口閉口大數據嘛,you know。

珍惜生命,遠離程式碼。市面上已經至少有兩個產品提供網頁推播通知的解決方案, iZooto 和 OneSignal

我們先介紹印度的新創軟體公司的產品 iZooto,可以輕鬆的在網站上讓人訂閱,與發送推播通知,只要三步驟:
1.註冊 iZooto
2.在網站上嵌入一段 Javascript 碼。
3.讓大家造訪您的網站,並讓客人願意按下訂閱。
這樣就完成了!管理員可以開始發訊息騷擾使用者。

必須用 iZooto 網站推播通知的理由

如何傳遞訊息給另一個螢幕前的使用者? 這一直是個問題,發 email 卻進到垃圾信件匣,發簡訊卻已讀不回甚至被擋,白天打電話又不接,在 FB 跟 IG 社群網站唱獨腳戲自HIGH,Line@ 發太多訊息也要錢,投廣告太花錢,平面媒體曝光也花錢,但是有了 HTML5 的網站推播通知,我們現在又多了一種方式可以騷擾使用者,讓他用電腦或手機上網時,看到通知。

1.iZooto 是一個成熟的訊息工具,不會漏訊息,也不會離開沒幾分鐘就自動登出,可以預約時間發送通知,這非常重要,甚至可以設定在使用者的當地時區發送。
2.iZooto 提供方便的編輯發送操作介面,可以預覽,所見即所得,這才是一個成熟的內容編輯工具。

3.iZooto 提供多種提示訂閱的顯示方式,而不是進網站就突兀地跳出「是否允許通知」,還可以設定訪客在網站停留多少,可能對這網站有一點興趣了,我們再問他是否要訂閱。

4.iZooto 系統內提供各種檢視報表:訂閱人數/取消訂閱人數/發出去訊息的點擊率/發出去的每個按鈕被點了幾次…之類的。發訊息時也可以設定 UTM 參數,用 GA 之類的工具撈報表時更方便。

5.不止是推訊息給所有訂閱者,iZooto 還提供 iZooto API 與分眾工具(Audience builder),讓通知發給:
– 特定的使用者(特定地區、特定群組、特定裝置…等等)
– 特定動作規則的人(上週訂閱的、以前曾點過幾次推播通知的、每次發通知都不點的…)
– 特定標記的人 (使用 api 把某個訪客註記 tag ,例如單次購物超過$3000、東西加入購物車卻沒結帳…等等)

6.5000 訂閱人以下是免費的,只是功能比較少
– 如果您有很多個網站要發,又不想付錢,就要註冊好幾組帳號…
– 假設您的網站訊息量非常多(如新聞網),高階方案有 RSS push 可以用

7.有線上客服,iZooto 的線上客服不只回得很快,而且真的有解決問題,早上到半夜都有人回。反觀國內某些公司,問個問題只能寄信石沉大海,或是打電話轉接轉老半天,然後什麼問題都沒解決…。

8.註冊時國家可以好好的選擇”Taiwan”,而不是一些 !@#$%^& 的名稱,值得讚賞。

9.如果訂閱人數很多,或是想花錢買高級功能的話,可以使用折價券,打九折

大家準備好要騷擾瀏覽者了嗎?
快加入 push notifications 的行列吧!
即使發出訊息時沒開電腦,下次開瀏覽器時還是會看到。

這技術最大的缺陷是 IE、iOS 不支援(瀏覽器無法接收推播通知)

說到推播通知…

常常有客人一進門或是電話打來,開口就說要做個 APP,我就會拿鍵盤把他敲暈,然後在他手機裝上百度全家桶,再叫一台車況很差的 55688 把他丟到 9*APP 的門口……可惜不能這樣。
http://www.wanhuajing.com/d58317

要讓目標客群在網路或行動裝置上,看到企業的事業與商品,
或是讓大家在行動裝置上使用貴公司提供的服務,
APP 的確是一種解決方案,但是例如「大家都在做App,我們也要做!」沒想清楚商業目的,數位化只是浪費力氣 – 徐瑞廷或是在你決定之前,想想你真需要APP?你真的需要網站嗎? – Kimix 金觀點都一再鼓吹APP的非必要性,常見的說法如下:

  • 初次見面的使用者,沒有人會特定為了一些毫無誘因的事情,特地浪費下載時間與手機空間,安裝你的APP。
  • APP 裡面的內容不管多豐富,目前無法直接從搜尋引擎找到,尤其是你的目標客群都用 Yahoo 的時候。
  • 發現有問題,沒辦法今天改好,讓使用者馬上用到正常的新版本,因為 App 市集上架跟更新要審查,尤其是你的目標客群都用 iOS 的時候。
  • 基本上要 Android 跟 iOS 各做一套。雖然現在有很多奇巧淫技,例如把 web 編譯成 app (如Cordova) 上架到 App store,或是號稱跨平台開發(如 Xamarin),但摸摸你的手機問一下,那些你覺得超棒、超好用的 app,有幾個是這樣做出來的?
  • 而且還有可能手機系統更新,你的 APP 就不能用了,所以還有後續維護的費用。

 
以線上購物這件事來說,雖然現在有 91APP 之類的 RWD 官網 + 跨平台 APP 的開店方案,但功能或價格上總有少許令人不滿意之處。重點不在於 APP 不 APP,而在於 APP 與服務設計的整體思考,還有提需求時是否準備足夠的預算? 白話來說,就是有些需求可能根本用不著做app,然後提需求時吃米不知道米價。

網站推播通知的最大缺陷,在於使用者的瀏覽器與裝置環境

為什麼看不到訂閱通知?為什麼通知沒跳出來?
1.(電腦)IE11(含)以下,不會顯示訂閱提示(查看瀏覽器支援表)
2.(電腦/手機) 已經訂閱過的瀏覽器,不會顯示訂閱提示。
3.(電腦 手機同一台電腦,如果已經用 Chrome 瀏覽器訂閱過,開其他的瀏覽器 Firefox,仍然會再顯示訂閱提示。
4.(手機)iOS (iPhone/iPad)不支援此功能,iOS 不管使用 Safari, Chrome, Firefox ,都不會顯示訂閱提示。
5.(電腦/手機)HTML5 test 中,Output – Web Notifications 的項目是 NO 的瀏覽器,也不會顯示訂閱提示。(如華碩 Zenfone 手機內建的瀏覽器)
6.(電腦/手機)不支援 Push API 的瀏覽器也都不會顯示訂閱提示(如 Microsoft Edge 41.16299.492.0(EdgeHTML 16.16299))
7.(電腦/手機)使用瀏覽器無痕/隱私模式上網,不會顯示訂閱提示。
8.(手機)使用 in-app 瀏覽器不會顯示訂閱提示 (如在 Facebook app 和 Line 點擊網頁連結,會直接在 app 內的瀏覽器顯示網頁,而不會開啟手機內的 Chrome 或 Safari)。
9.(電腦) 瀏覽器安裝 uBlock 或 Adblock 之類的擴充套件,會阻擋如 OneSignal 之類的網站推播通知平台的 js 程式檔案。

最後介紹兩個 web app 技術,不用”上架”或”下載”,也可以在手機上得到近似 app 的體驗。

1.Google 在推的 PWA (Progressive Web App)

pwa 範例
– 不用學習製作 iOS 或 Android native app 的原生程式語言
– 讓網頁用起來像 APP
– 可離線使用
– 接收推播通知
– 有啟動畫面(splash screen)
– 全螢幕運行,沒有網址列等系統操作按鈕
– 接收推播通知
– 可以一鍵把網頁加到主螢幕…等等特性。
– 基本需求: 此網頁要有 HTTPS
– 基本需求:要達成上述所有功能,只有 Google Chrome 辦得到。
– PWA 案例 – AliExpress 全球速賣通
成功案例的數字超漂亮,堪比大躍進,但我覺得是不是因為之前的網站做太差? 不過阿里巴巴團隊一向是我們此輩技術人員的殿堂,不然你哪時候看過 PChome 還是台灣那些財團的購物網站,開發團隊有個部落格會分享他們的程式怎麼 tune 效能,用了哪些方法提升使用者體驗,用了哪些開發流程跟新技術? 只看到老闆靠北政府而已。
– 瀏覽更多 PWA 案例: https://pwa.rocks/ 請用手機的 Google Chrome 瀏覽器。

2.微信的小程序

微信也在公測一個 web app 功能,叫做小程序,想解決以下問題…

問題1:現在一般是在公眾號/服務號/企業號…whatever 的自定義底部菜單建鏈接,讓使用者誤以為這個公眾號還可以購物! 但其實只是用微信的 webview 開一個網頁而已,而且那個網頁有的還不太好用。


問題2:乖乖的在京東上架,讓商品在微信的購物頻道裡面出現
問題3:只能用公眾平台提供的各種接口功能
– 關注我們並回覆 1,可得到 XXX…就是這類的應用。
– 別人的XX號有,我們也要有!但是地方的店家請不起工程師。
– 功能很多,但不夠多
– 用完之後就取消關注了

微信的小程序可以幹嘛?