WordPress使用OneSignal實(shí)現(xiàn)用戶訂閱和推送網(wǎng)站通知

相信最近幾天訪問(wèn)WordPress大學(xué)的朋友注意到我們添加了一個(gè)訂閱通知的功能，倡萌是使用OneSignal的推送服務(wù)，實(shí)現(xiàn)用戶訂閱和推送網(wǎng)站通知的。今天就來(lái)分享一下具體的操作方法。

OneSignal 是一家提供信息推送的服務(wù)商，支持手機(jī)端信息推送、Web端信息推送、電子郵件推送和APP應(yīng)用內(nèi)信息推送。只需要10多分鐘的簡(jiǎn)單設(shè)置，就可以實(shí)現(xiàn)功能。國(guó)外提供這方面的服務(wù)的商家有好幾個(gè)，但是倡萌通過(guò)對(duì)比最終選擇了 OneSignal，最大的優(yōu)勢(shì)是免費(fèi)支持30000訂閱用戶，不限通知推送數(shù)量。而別家一般僅支持2000訂閱用戶。

2022年5月31更新：OneSignal 免費(fèi)版不限制訂閱用戶，但是每條網(wǎng)絡(luò)推送信息的接收人最多為10000人，也就是說(shuō)，你直接在WordPress后臺(tái)推送文章更新的時(shí)候，最多只能推送給10000個(gè)人。

關(guān)于訂閱和推送，可能大家比較熟悉的是郵件訂閱。但是郵件訂閱通常需要郵件發(fā)送功能和服務(wù)，一旦訂閱用戶數(shù)量上來(lái)了，郵件的發(fā)送數(shù)量和成功率就是一個(gè)瓶頸，或者需要額外的費(fèi)用支出。

像 OneSignal 這類推送服務(wù)貌似是最近幾年才出現(xiàn)在大家的視野中，剛開(kāi)始還擔(dān)心這類國(guó)外的服務(wù)會(huì)水土不服，但是測(cè)試了幾天，發(fā)現(xiàn)一切都很OK。國(guó)內(nèi)用戶訂閱都很正常、推送消息幾乎秒到！目前雖然還不清楚訂閱量上來(lái)以后會(huì)是一個(gè)什么情況，但是 OneSignal 的免費(fèi)額度還是相當(dāng)有吸引力，對(duì)于一般的網(wǎng)站來(lái)說(shuō)，30000訂閱用戶數(shù)量應(yīng)該夠用的了。

好了，開(kāi)始介紹具體的操作吧！

注冊(cè) OneSignal 賬號(hào)

我們必須注冊(cè)一個(gè)OneSignal賬號(hào)，才可以使用他們的推送服務(wù)。訪問(wèn) OneSignal 官方 https://onesignal.com/ ，點(diǎn)擊右上角的 Sign Up 按鈕，即可進(jìn)入注冊(cè)界面：

填寫(xiě)郵箱、密碼和名稱，點(diǎn)擊 Create Account 按鈕完成注冊(cè)。

創(chuàng)建一個(gè)應(yīng)用

使用你剛才注冊(cè)的賬號(hào)登錄以后，就可以在后臺(tái)創(chuàng)建應(yīng)用，點(diǎn)擊下圖的 NEW APP/WEBSITE 按鈕，在彈出的對(duì)話框中，填寫(xiě)一個(gè)名稱，然后點(diǎn)擊 CREAT 按鈕：

下一步，我們選擇谷歌瀏覽器的圖標(biāo)，點(diǎn)擊 NEXT：

然后按照下圖選擇WordPress：

設(shè)置網(wǎng)站名稱、網(wǎng)址和上傳一個(gè)默認(rèn)圖標(biāo)，然后點(diǎn)擊左下角的 SAVE 按鈕：

保存了以后，就會(huì)看到下圖界面，里面有一個(gè) APP ID 和 APP KEY，復(fù)制下來(lái)，稍后我們要用到的。

如果你忘記復(fù)制了，以后可以進(jìn)入到這個(gè)應(yīng)用的 Settings 界面，點(diǎn)擊 Keys & IDs 選項(xiàng)卡，可以看到相關(guān)的內(nèi)容：

通過(guò)上一步，我們已經(jīng)創(chuàng)建了瀏覽器推送，但是針對(duì)蘋果瀏覽器 Safari ，還需要進(jìn)一步設(shè)置。在應(yīng)用列表，點(diǎn)擊應(yīng)用的名稱，進(jìn)入到管理界面。

點(diǎn)擊 Settings ，在 Platforms 下面可以看到，這里面還有很多需要設(shè)置的推送平臺(tái)，我們這里已經(jīng)設(shè)置了ALL瀏覽器， 點(diǎn)擊 Apple Safari 后面的那個(gè)圖標(biāo)：

在彈出的對(duì)話框中，可以設(shè)置網(wǎng)站名稱、網(wǎng)址，還可以設(shè)置一個(gè)圖標(biāo)，保存以后，就可以看到一個(gè) Web ID，這個(gè)很重要，我們后面要用到的，建議復(fù)制下來(lái)備用。

到這里，我們需要的瀏覽器推送的平臺(tái)已經(jīng)設(shè)置好了，如果你需要設(shè)置更多的平臺(tái)，請(qǐng)自己去設(shè)置，這里就不再做介紹了，一般我們使用瀏覽器推送就可以了。

安裝和配置 OneSignal 推送插件

OneSignal Push Notifications 是一個(gè) OneSignal 開(kāi)發(fā)的WordPress插件，專門用來(lái)對(duì)接 OneSignal 服務(wù)的。我們可以在WP后臺(tái)插件安裝界面搜索 OneSignal Push Notifications 進(jìn)行在線安裝，可以到官方下載后上傳安裝： https://wordpress.org/plugins/onesignal-free-web-push-notifications/

安裝并啟用插件以后，在WP后臺(tái)左邊菜單的最底部，可以看到 OneSignal Push 菜單，點(diǎn)擊進(jìn)入就可以看到如下的設(shè)置界面。該插件不支持語(yǔ)言包漢化，所以只有簡(jiǎn)單在圖片標(biāo)注一下中文了。

我們注意一下第一個(gè)圖片的 Account Settings 部分，這里有三個(gè)選項(xiàng)，需要填寫(xiě)一些API信息的。這就是我們上面提到的 APP ID 、APP KEY（REST API KEY）和 Safari Web ID，將它們分別填入即可，其他選項(xiàng)請(qǐng)盡可能參照?qǐng)D片設(shè)置：

注意看下面的圖片，在自動(dòng)通知設(shè)置這里，倡萌不推薦勾選，以免每次發(fā)布新文章都自動(dòng)推送通知，數(shù)量過(guò)多的話，可能會(huì)造成用戶的反感！

然后還有一個(gè)設(shè)置選項(xiàng)需要注意，就是設(shè)置自定義文章類型，如果你的網(wǎng)站不僅一種文章類型，這個(gè)設(shè)置就要根據(jù)需要設(shè)置一下。

設(shè)置完所有選項(xiàng)以后，不要忘記點(diǎn)擊左下角的 SAVE 按鈕！

前臺(tái)效果展示

如果按照上面的教程仔細(xì)設(shè)置好以后，這個(gè)時(shí)候訪問(wèn)前臺(tái)頁(yè)面，刷新一下，應(yīng)該可以看到下圖界面，提示是否允許顯示通知，所有訪問(wèn)的用戶都會(huì)看到這個(gè)提示：

然后在網(wǎng)站右下角，可以看到一個(gè)訂閱鈴圖標(biāo)：

收到通知以后，一般會(huì)在電腦界面顯示出來(lái)

后臺(tái)發(fā)布文章推送通知

按照上面的步驟詳細(xì)設(shè)置了以后，我們就可以在后臺(tái)發(fā)布文章界面（或者其他文章類型發(fā)布界面），看到一個(gè)設(shè)置選項(xiàng)：

如果你要推送這篇文章，可以勾選設(shè)置，但是這里有一點(diǎn)需要注意：發(fā)布文章并推送以后，如果你要更新文章，記得先取消勾選，否則更新文章會(huì)再次發(fā)送推送！！！！

在OneSignal官方推送通知

除了可以在 WordPress后臺(tái)發(fā)布文章的時(shí)候推送通知，還可以在 OneSignal 官方后臺(tái)進(jìn)行推送。進(jìn)入應(yīng)用的管理界面，點(diǎn)擊 Messages ，進(jìn)入即可：

更多的操作方法，請(qǐng)看官方文檔： https://documentation.onesignal.com/docs/notifications

小結(jié)

在這篇文章中，倡萌主要分享了 OneSignal 的Web端推送的設(shè)置，支持 Chrome、Firefox、Edge、Safari瀏覽器。 它還有很多其他平臺(tái)可以開(kāi)啟，具體就靠大家按需配置了。此外， OneSignal 官方后臺(tái)可以查看訂閱用戶信息，支持用戶分組，還有很多設(shè)置，大家就自己摸索吧，有什么問(wèn)題可以看官方文檔，幾乎每一個(gè)功能和步驟都有文檔鏈接，非常用心！