重點整理
OneSignal 網頁推播會在訪客進站時詢問是否訂閱通知，之後網站發布新內容就能自動推播。設定分兩部分：先到 OneSignal 官網註冊、建立 Web Push App 取得金鑰，再在 WordPress 安裝 OneSignal 外掛，設定訂閱鈴鐺、提示文字與通知行為。
OneSignal 推播通知對網站而言是相當實用的網路行銷工具，當網站訪客進入後會主動在頁面上詢問當有新內容發布時是否想要收到網頁通知，並且在OneSignal 官網會有紀錄有多少人訂閱了網站通知，也能夠自訂消息發送給訂閱者。OneSignal 推播通知與電子報訂閱有些類似，差別在於前者是在網站與電腦上 ” 自動 ” 跳出新通知，而電子報則需要透過 ” 手動 ” 編輯電子郵件來發送給訂閱者，兩者並不衝突，建議可以同時使用，電子報教學：MailChimp WordPress 電子報 製作 – WordPress 必學行銷工具。
在 OneSignal 網頁推播通知的教學中，將解說如何在 OneSignal 官方網站的註冊與設定流程，並且在 WordPress 網站中安裝 OneSignal 專屬外掛，透過設定介面調整 OneSignal 推播按鈕的文字內容、位置、色彩等項目，以及使用者訂閱後通知訊息動作指定等，按照步驟指示操作相信很快就能完成設定，希望可以幫助到有開啟網頁推播通知需求的朋友。
(小提醒：必須要在網站加入 OneSignal 外掛才能完成啟用網站推播通知功能，並建議將網站升級為 SSL 加密（非必要）
，詳細說明：HTTPS、SSL是什麼？SSL憑證 對網站來說重要嗎？ )
OneSignal 網站註冊及取得啟動密鑰步驟
第一步：進入到 OneSignal 官網，點擊右上角的註冊按鈕。
第二步：可以使用社交帳戶快速建立快速註冊，或者填入使用者資訊，步驟與一般網站註冊流程，在此不多做說明。
第三步：註冊完成後會有介紹 OneSignal 功能的提示視窗，可以自行觀看，點擊 NEXT 到最後一頁後，選擇中央的按鈕建立 OneSignal App（下圖二）。
第四步：在接下來的畫面中點選左上角 ADD APP ，會跳出設定 APP 名稱的提示窗，輸入網站名稱後（可使用中文），如下圖二所示。
第五步：因為是要在網站上加入通知，因此在接下來的選項中請點選 Web Push ，如果要在 MacOS 或 Window 上也開啟網站推播通知，就必須分別重複教學的設定步驟，本篇教學會以網站設定作為示範，選擇完後請點擊右下角的 NEXT 。
在接下的 Configure Web Push 設定畫面中要選擇網站架設平台，請選中 WordPress Plugin 後選擇 WordPress，如下圖所示。
第六步：設定 WordPress 基本項目，由上至下分別是網站名稱、網址、網站品牌標示圖片，如果網址是以 HTTP 開頭的話，要將 My site is not fully HTTPS 的選項開啟至綠色，輸入後點選 Save，會跳出圖二的 APP ID 與 APP KEY ，將兩組英數混合的字串記下保留，下一小節設定 OneSignal 外掛時會要輸入。
第七步：完成後到 OneSignal 網站上方的 SETTINGS 可以確認網站通知功能是否啟用，如果有的話會在該欄位顯示 ACTIVE 的標示。
OneSignal WordPress 外掛設定解說
第一步：在外掛安裝介面 輸入 OneSignal，如下圖所示，依序點選安裝與啟用，完成後在側邊工具欄下方可以找到 OneSignal Push 的設定項目。
第二步：進入後首先到 Configuration 的標籤頁中，將剛剛申請的 APP ID 與 APP KEY 分別貼到對應欄位，同樣要注意網站 SSL 欄位，如果為 HTTPS 就要開啟，反之則關閉。另外在 Sent Notification Settings 設置的項目是不需要變動的，使用系統預設即可。
第三步：接續要設定的是 Subscription Bell （一般稱為小鈴鐺），在安裝並啟用外掛後，預設會在網站左下角顯示 Subscription Bell 圖示，當使用者同意接收網站通知或取消訂閱通知時，都會在小鈴鐺圖示中顯示提示文字，以下將設定項目翻譯為中文（順序為由上至下），提供給各位參考，也可以直接使用預設值，對推播通知功能不會有太大影響，請根據自己網站中所想要的功能做調整。
- 請求訂閱權限時啟用全螢幕提示（與 Subscription Bell 自動提示不相容）
- 自動提示新網站訪問者訂閱推送通知
- 在提示用戶訂閱之前顯示幻燈片提示
- 啟用S ubscription Bell
- 用戶訂閱後依舊顯示 Subscription Bell
- 向首次訪問網站的使用者者顯示未讀郵件圖示
- 在 Subscription Bell 訂閱框中顯示 OneSignal 圖示
- 自定義 Subscription Bell 文字
- 自定義 Subscription Bell 位置
- 自定義 Subscription Bell 顏色
另外在下圖標示 2 的區塊是設定 Subscription Bell 在網頁上顯示的位置以及呈現的樣式，可以自行試驗。
第四步： Subscription Bell Offset Position Customization 可以設定小鈴鐺在網頁中上下左右的間隔距離，以 px 為單位； Subscription Bell Color Customization 則是設置顏色，以十六進位制色彩代碼做為設定值，如 #FDDA24 。
第五步：Subscription Bell Text Customization 可以自定義小鈴鐺的提示文字，預設為英文，可以在此將文字內容翻譯為中文，直接在欄位輸入即可，下圖二就是完成翻譯的結果。
第六步：當網站為 HTTP 開頭時，就必須要在 HTTP Pop-Up Settings 中做變更，同樣可以自訂文字內容。
第七步：下圖是當使用者開啟推播通知時所顯示的歡迎訊息內容，同樣建議編輯為中文，並且在 URL 網址中輸入像聯絡我們的頁面網址，或其他內容較為重要的網站頁面網址等。
第八步：另外在 OneSignal 外掛設定介面中有另外一個名稱為 Setup 的頁籤，基本上就是啟用 OneSignal Push 的安裝指引手冊，如果有遇到本篇文章沒有提到的問題，可以在此頁籤中瀏覽看看。
第九步：下圖是筆者完成 OneSignal 外掛設定後的範例畫面，圖一是當有新訪客進入網站後會顯示的推播訊息，圖二為小鈴鐺圖示。
第十步：回到 OneSignal 主畫面，可以看到開啟網站通知的人數，在 Messages 中也可以自訂通知發送給所有訂閱者。
下圖是編輯文章時會自動在右上角啟用 OneSignal 選項，如果勾選項目當此篇文章發布時將自動發送通知給所有訂閱者。
新版 OneSignal 外掛的設定方式有什麼不同？
本文截圖是舊版外掛，訂閱鈴鐺、提示文字等選項都在 WordPress 後台設定。新版 OneSignal WordPress 外掛把大部分設定移到 OneSignal 官網後台，外掛本身主要只需要填入 App ID 與 API 金鑰。
實際操作順序變成：
- 在 OneSignal 後台建立 Web 應用程式並完成網站設定。
- 在後台調整訂閱提示、鈴鐺樣式與歡迎通知。
- 回到 WordPress 外掛貼上 App ID 與金鑰。
如果外掛畫面和本文不同，就照 OneSignal 後台的設定步驟操作。
常見問題
OneSignal 網頁推播一定要 HTTPS 嗎？
是的。瀏覽器的推播功能只允許在 HTTPS 網站上使用，網站還是 HTTP 的話要先安裝 SSL 憑證。舊文提到的 HTTP 選項是早期的變通做法，現在建置網站推播應以 HTTPS 為前提。
網頁推播和電子報有什麼不同？
網頁推播不需要訪客留下 Email，只要在瀏覽器按「允許」就能訂閱，通知會直接出現在桌面或手機通知列；缺點是訊息短、換瀏覽器或清除資料就會失去訂閱。電子報能放完整內容，兩者適合搭配使用。
iPhone 收得到網頁推播嗎？
可以，但有條件：iPhone 需要 iOS 16.4 以上，且使用者要先用 Safari 把網站「加入主畫面」，從主畫面開啟後才能訂閱推播。單純用瀏覽器瀏覽網站時不會跳出訂閱詢問。
結語
在本篇教學中只有先初步提到 OneSignal 如何註冊及使用外掛啟用網站推播通知，在 OneSignal 的網站中其實還有不少功能，為了避免文章內容過多影響閱讀體驗，在之後的教學文章中會再推出與 OneSignal 官方網站相關的設定教學。