#推薦(免費):javascript
推播通知在行動端非常常見。在 Web 端,儘管開發人員對其功能的需求很高,但出於某些原因,推播通知被引入 Web 的時間比較晚。
Web 推播通知允許用戶在Web 應用程式需要更新時選擇是否接收更新訊息,目的是在重新吸引用戶群注意的更新資訊通常是對用戶來說有趣、重要、即時的內容。
在這種情況下,使用 Service Worker 的原因是它們在背景工作。這對於推播通知非常有用,因為這意味著只有當用戶與通知本身互動時,它們的程式碼才會被執行。
推送和通知都有各自的 API
實作Push 一般的三個步驟:
接下來討論更詳細的過程。
首先,我們需要檢查目前瀏覽器是否支援推播訊息,可以透過兩個簡單的檢查來判斷是否支援推播訊息:
navigator
物件上的serviceWorker
window
物件上的PushManager
#程式碼如下:
如果瀏覽器支援此功能,下一步驟就是註冊Service Worker。
如何註冊 Service Worker,上一篇文章 JavaScript 是如何運作的:Service Worker 的生命週期及使用場景 裡面就有講過了。
#Notification.requestpermission() 會在瀏覽器顯示以下提示:
granted、
default 或
denied。
Block 按鈕,你的Web 應用程式將無法再次請求使用者的權限,直到他們透過更改權限狀態手動
“解除” 你的應用程式的權限,此選項隱藏在設定面板中。
registration.pushManager.subscribe() 訂閱用戶。
#registration.pushManager.subscribe(options) 接受一個
options 對象,它包含必要參數和可選參數:
DOMString
或 ArrayBuffer
。 你的伺服器需要產生一對 application server keys -這些金鑰也稱為 VAPID 金鑰,它們是伺服器特有的。它們是一對公鑰和私鑰。私鑰秘密儲存在你的終端,而公鑰則與客戶端交換。這些鍵允許推播服務知道哪個應用程式伺服器訂閱了某個用戶,並確保觸發該用戶的推播訊息的伺服器是同一台伺服器。
你只需要為應用程式建立一次 私鑰/公鑰對,一種方法是存取 https://web-push-codelab.glit...。
在訂閱使用者時,瀏覽器將applicationServerKey
(公用金鑰)傳遞給推播服務,這表示推播服務可以將應用程式的公用金鑰綁定到使用者的PushSubscription
。
流程大概是這樣的:
subscribe()
方法傳遞伺服器金鑰。 PushSubscription
物件中,該物件透過 傳回 subscribe()
的 promise 得到 。 之後,只要你想推播訊息,都需要建立一個 授權頭(Authorization header),其中包含使用應用程式伺服器的私鑰簽署的資訊。當推播服務接收到發送推播訊息的請求時,它將透過尋找已連結到該特定端點的公鑰(第二步)來驗證訊息頭。
PushSubscription
物件包含向使用者的裝置發送推送訊息所需的所有訊息,如下:
{ "endpoint": "https://domain.pushservice.com/some-id", "keys": { "p256dh": "BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=", "auth":"FPssMOQPmLmXWmdSTdbKVw==" } }
一旦使用者被訂閱,並且你有了 PushSubscription
對象,就需要將其傳送到伺服器。在伺服器上,你存對資料庫的訂閱,從現在開始使用它向該用戶發送推播訊息。
當你想要向用戶發送推播訊息時,首先需要的是推播服務。透過 API 呼叫告訴伺服器你現在需要要傳送什麼資料、向誰發送訊息以及關於如何發送訊息的任何標準。通常,這個 API 呼叫是在伺服器上完成的。
推播服務是接收請求、驗證請求並將推播訊息傳送到對應的瀏覽器。
請注意
,推播服務不是由你管理的-它是一個第三方服務。你的伺服器是透過 API 與 推播服務通訊的伺服器。推送服務的一個例子是 谷歌的FCM。
推播服務處理所有繁重的任務,例如,如果瀏覽器處於離線狀態,推播服務會在發送對應訊息之前對訊息進行排隊,等待瀏覽器的再次連線。
每個瀏覽器都可以使用他們想要的任何推播服務,這是開發人員無法控制的。然而,所有的推播服務都有相同的 Api,所以這不會造成實作困難。
為了獲得處理推播訊息請求的 URL,需要檢查 PushSubscription
物件中端點的儲存值。
推送服務 API 提供了一種向用戶發送訊息的方法。 API 是 Web 協議,它是一個 IETF 標準,定義如何對推送服務進行 API 呼叫。
使用推播訊息傳送的資料必須加密。這樣,就可以阻止推播服務查看傳送的資料。這一點很重要,因為瀏覽器決定使用哪個推播服務(它可能正在使用不受信任且不夠安全的某個推播服務)。
對於每個推播訊息,也可以給以下說明:
一旦按照上面的解释将消息发送到推送服务,该消息将处于挂起状态,直到发生以下情况之一:
当推送服务传递消息时,浏览器将接收它,解密它,并在的 Service Worker 中分派一个 push
事件。这里最重要的是,即使 Web 页面没有打开,浏览器也可以执行你的 Service Worker。流程如下:
push
事件被分发给 Service Worker设置推送事件监听器的代码应该与用 JavaScript 编写的任何其他事件监听器类似:
self.addEventListener('push', function(event) { if (event.data) { console.log('This push event has data: ', event.data.text()); } else { console.log('This push event has no data.'); } });
需要了解 Service Worker 的一点是,你没有 Service Worker 代码运行时长的控制权。浏览器决定何时将其唤醒以及何时终止它。
在 Service Worker 中,event.waitUntil(promise)
,告诉浏览器在该promse 未完成之前工作将一直进行中,如果它希望完成该工作,它不应该终止 Sercice Worker。
以下是一个处理 push
事件的例子:
self.addEventListener('push', function(event) { var promise = self.registration.showNotification('Push notification!'); event.waitUntil(promise); });
调用 self.registration.showNotification()
将向用户显示一个通知,并返回一个 promise,该 promise 在显示通知后将执行 resolve 方法。
showNotification(title, options)
方法可以根据需要进行可视化调整,title
参数是一个字符串,而参数 options
是一个对象,内容如下:
{ "//": "Visual Options", "body": "<String>", "icon": "<URL String>", "image": "<URL String>", "badge": "<URL String>", "vibrate": "<Array of Integers>", "sound": "<URL String>", "dir": "<String of 'auto' | 'ltr' | 'rtl'>", "//": "Behavioural Options", "tag": "<String>", "data": "<Anything>", "requireInteraction": "<boolean>", "renotify": "<Boolean>", "silent": "<Boolean>", "//": "Both Visual & Behavioural Options", "actions": "<Array of Strings>", "//": "Information Option. No visual affect.", "timestamp": "<Long>" }
可以了解更多的细节,每个选项在这里做什么- https://developer.mozilla.org...
当有紧急、重要和时间敏感的信息需要与用户分享时,推送通知是吸引用户注意力的好方法。
例如,我们在 SessionStack 计划利用推送通知让我们的用户知道他们的产品何时出现崩溃、问题或异常。这将让我们的用户立即知道发生了什么错误。然后,他们可以将问题作为视频回放,并利用我们的库收集的数据(如DOM更改、用户交互、网络请求、未处理的异常和调试消息)查看发生在最终用户身上的所有事情。
以上是JavaScript關於Web推播通知的機制詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!