之前企企一直使用 roost web push 作為本 blog 使用的 push notification,還寫過 blog 介紹,不過可惜 roost 將會於 1/3/2016 開始取消免費服務,完全收費,而且高達每月 US$49。另一間提供 push notification 的公司 Parse 亦將會關閉。
沒有辦法一定要找其他代替品,而找代替 plugin 時發覺現在已經有不少選擇。那麼企企選擇標準是:

  • 支援 safari 和 chrome / firefox 推送
  • 支援非 https 網站推送
  • 貌似最不容易關閉或改為收費服務

最後選擇了 OneSignal 這個 plugin,選擇它的原因不是因為它夠簡單,反而是夠複雜 — 它使用 Google Cloud Platform 作為 Chrome /Firefox 方面的 notification,大大降低了這個 plugin 製作公司的成本,那麼它關閉或收費的機會應該比較低一些。

其實每次轉換 notification plugin 時都有機會損失舊有的讀者;舊讀者除非删除 notification list 內的網站紀錄,否則就會收不到 notification 之餘,又不收到新的接受提示。所以之前使用 roost 時的讀者就不會再接收到文章更新提示了。

安裝 plugin

和平時一樣,搜尋 OneSignal 就可以安裝。

onesignal install
和平常一樣安裝新 plugin


[nextpage title=」設定 Google Apps」]
OneSignal 使用 Google 服務來傳送 notification 去 Chrome 和 Firefox.
所以需要到 Google Developers account 建立一個 project.

首先登入 Google Developers 按「建立專案」。

google developers consle create project 01
登入後建立專案

可以使用任意名稱,伺服器用美國中部會是一個不錯的選擇。

google developers consle create project 02
名稱任意就好了

成功建立 project 之後,就可以看到 project ID,大家記下這個 number,設定過程中需要用到。

google developers consle create project id
記下這個 Project ID

之後按「啟用和管理 API」,尋找 Google Cloud Messaging,並啓動這個 API.

google developers consle create project manage api
需要新增 API
google developers consle google cloud messaging
尋找 Google Cloud Messaging
google developers consle api enable
啓用這個 API

再到憑証按 Create credentials,選擇 API 金鑰,再選擇「伺服器」金鑰

google developers consle create credentials
選擇 API 金鑰
google developers consle server key
選擇「伺服器」金鑰

填上任意名稱後就可以建立,拿到 API 金鑰了。
這個金鑰是另一個需要記下的字串,一會需要用到。

google developers consle server key create
打上任意名稱後就可以按建立
google developers consle server key value
拿到 API key 了

[nextpage title=」設定 OneSignal – Chrome Push Notification」]
使用 OneSignal 這個 plugin,當然需要到它的網站開設戶口。
開設後就可以到 Dashboard 開設一個新 app,並輸入名稱。

onesignal web add a new app
按 Add a new app
onesignal web new app name
填上任意名稱

選擇 Web Push,再選 Chrome / Firefox

onesignal web chrome website push
選擇 Web Push
onesignal web select platform chrome
選 Google Chrome & Mozilla Firefox

之後填上你的網站 URL、Google API key 和預設顯示的圖示。
有幾點要留意,並不需要網址最後的 「/」,例如本網站填 https://www.enterpr1se.info 這樣就可以了。
如果你的網站並非在 root 的位置,例如 https://www.enterpr1se.info/blog ,亦只需要填 https://www.enterpr1se.info ,並不需要後面的 sub-folder.

OneSignal 支援 Chrome / Firefox 的非 HTTPS 推送,如果網站不是 HTTPS 的話,可以 tick 「My site is not fully HTTPS」
建立一個 sub-domain,並且需要 Google Project 的 number.
當然網站本身已經是 HTTPS 的就,就不需要理會,直接 click Save 就可以了。

onesignal web configure platform chrome 01
填上剛才 Google 那裏拿到的 API Key
onesignal web configure platform chrome 02
如果並非 HTTPS 網站,就要建立一個 sub-domain,和填上 Google 的 project number

按下 Save 後就可以了,後面的 Select SDK, Install SDK 等等都不用理會,直接按上面的交叉關閉這個視窗。

[nextpage title=」設定 OneSignal – Safari Push Notification」]

之後就到左手邊的 App Settings,再 click 右邊手邊的 Web Platforms –> Apple Safari
再按 Configure

onesignal web active apple safari
按 Configure 設定 Safari

填好網誌名稱和網址
和設定 Chrome 時一樣,不需要網址後的 「/」 和 sub-folder

onesignal web configure platform safari 01
填好網站名,網址
tick 「I’d like to upload my own notification icons」
onesignal web configure platform safari 02
選擇好所有不同 size 的 icon

Next Step continue 之後,就可以看到所有需要的資料了。
抄下

  • Your Rest API Key
  • Your Safari Web ID
  • Your App ID
onesignal web next step safari
按 Continue
onesignal web select platform safari all keys
可以看到所有需要的資料了,將這三個抄下

萬一 miss 了這三條 Key,都可以在 App Settings –> Keys & IDs 找回 OneSignal App ID 和 REST API Key.
WebID 可以在 App Settings –> Platorm –> Apple Safari 找到

onesignal web key and id safari
Keys & IDs 可以在 App Settings 找到
onesignal web apple safari web id
Web ID 可以在 App Settings, Platforms 找到

[nextpage title=」設定 Plugin」]

有足夠資料了,回到網站 OneSignal Plugin 的 Configuration 填好。

onesignal plugin configuration
將所有資料填好

留意網站是否 HTTPS,有 HTTPS 的話就 enable 「My site uses an HTTPS connection (SSL)

Notify Button 只是非 HTTPS 網站才需要,如果已經有 HTTPS,就不要 enable 它了。
Notify Button 會在網站的右下角出現,訪客點擊就可以選擇是否接收 notification 通知。

如果已經是 HTTPS 網站,disable 了 Notify Button,就需要 enable 「Automatically prompt new site visitors to subscribe to push notifications」
否則新用戶就接收不到 notification 的提示。

onesignal plugin prompt settings notify button
Notification button 是非 HTTPS 網站必用
onesignal plugin no notify button
如果不使用 notify button 就需要 enable 自動向新用戶提醒接受 notification

如果想自訂訊息的話(例如想使用中文),就 enable 「Customize the notify bell text」
否則的話如上圖只需要 「Enable the notify button」 和 「Show first-time site vistors an unread message icon」 就可以了。

Popup setting 方面,不用 「Show the OneSignal logo on the prompt」,因為用回自己的 icon 較好。
同樣地,如果想將內用轉為中文,可以 enable 「Customize the popup text」,否則維持 disable 就可以了。

Welcome Notification Settings 方面,會建議 disable 「Send new users a welcome push notification after subscribing」
因為對於用戶來說會太煩,剛剛 click subscribe 就有 message 來。
而且對於網站來說,enable 後亦會令到管理員不易找到 notification 傳送數據。

如果想發表文章時自動傳送 notification 的話,就將 「Automatic Notification Settings」 兩個選項都 enable.
另外 「Use the post’s featured image for the notification icon」 都建議 enable.

onesignal plugin popup settings
popup setting 建議用回自己的 icon,亦建議不要開啓 welcome message
onesignal plugin automatic notifcation settings
當然建議開啓自動 notification 傳送

[nextpage title=」用戶 enable notification」]

用 notify button 的話,就會看到右下角會有 icon。

onesignal notify button
Enable 後就會在右下角看到通知
onesignal notify button subscribe
按下去後,訪客就可以選擇 subscribe 了。
onesignal notify popup
Subscribe 後就會彈出 popup,再按 Continue 就可以
notifications allow
有或者沒有 HTTPS 都會看到這個 notification

[nextpage title=」查看傳送數據」]

回到 onesignal 的後台,在 Dashboard 按 Recent Messages 旁的 View All.
或者按左手邊的 Sent 亦可以。

onesignal web view all
進入 onesignal 後台後,按 View All

主動 sent notification 時的數據可以在這裏看到,如果想看發表文章時的自動推送的話,就要按 View rest API notifications.

onesignal web view rest api notifications
按 View rest API notifications

可以看到本 blog 的傳送紀錄,有大量 「Thanks for subscribing」,這些就當用戶訂閱 notification 後的歡迎訊息,這些數據令到管理員難以找到發表文章的 notification 紀錄,所以才不建議各位開始歡迎訊息。

onesignal web view sent messages
可以看到有大量 welcome message 阻礙閱讀
onesignal web message report
可以看到傳送數據了