iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
1

昨天實做sw.showNotification();的方法,送推播訊息至用戶端裝置,
但訊息推出去,我們總期望會需要知道使用者對訊息的反應,
因此,可以透過notificationclick事件監聽來接受回饋。

notificationclick 推播動作事件監聽

可以透過此事件,監聽使用者對推播訊息操作的選項。

self.addEventListener('notificationclick', function(event) {
    var notification = event.notification;
    var action = event.action;
    
    console.log(notification);
    if(action === 'confirm') {
        console.log('使用者點選確認');
        notification.close();
    } else {
        console.log(action);
    }
});

event.notification裡面會顯示推播的物件內容。
event.action使用者點選的動作
notification.close()關閉通知訊息視窗。

執行結果

點選「確認」動作(action)
https://ithelp.ithome.com.tw/upload/images/20180112/20103808SmjH1LO2nS.png
Notification的物件中,可以看到昨天設定的options參數的內容,和使用者點選的動作(action),是confirm確認按鈕。

notificationclose 推播關閉事件監聽

使用者有可能會直接滑掉或是關閉通知,可能訊息對他沒用處,
或是訊息並不吸引人等等,都有可能會讓使用者無視訊息,
當他不回應直接滑掉通知時,就會進入此監聽事件。

self.addEventListener('notificationclose', function(event){
    console.log('使用者沒興趣',event);
});

執行結果

  1. 滑掉推播訊息
    https://ithelp.ithome.com.tw/upload/images/20180112/20103808zYW4R0ec0I.png

Push API

API提供接受及推送,從伺服器發出訊息不管使用者是不是正在瀏覽網站。
這樣的好處是開發者可以非同步的方式,推送訊息給使用者,也能促進使用者接觸網站的機會。
Service Worker中,透過PushManager.subscribe()可以使用此API

function setPushSubscribe(){
    if (!('serviceWorker' in navigator)) 
        return;
    
    navigator.serviceWorker.ready
        .then(function(sw){
          return sw.pushManager.getSubscription();
        })
        .then(function(sub){
            if(sub === null){
                //建立新的訂閱

            }else{
                //已經訂閱
            }
        });
}

前幾天我們在app.js寫了一支直接透過按鈕觸發推播訊息的displayNotification()功能,現在我們要改用伺服器訂閱的方式,所以改觸發上面這支setPushSubscribe()方法。
前面一樣做基本防呆,
並透過sw.pushManager.getSubscription()抓取訂閱狀態,回傳Promise,如果裝置已經訂閱則進入else,如果沒有訂閱則sub == null

if(sub === null){
    //建立新的訂閱
    reg.pushManager.subscribe();
}

pushManger.subscribe()透過此語法建立訂閱後,會取得在前幾天畫的關係圖中,訂閱(Subscription)會有瀏覽器或伺服器的EndPoint,讓我們可以推播訊息。
換句話說,任何人只要知道EndPont都可以發訊息到伺服器,而伺服器會將訊息再轉發出去給訂閱者,而這樣只看得出是網站發出去的訊息。

為了避免這種情況,有兩種方式,在subscribe()中,可以設定object格式的參數。

reg.pushManager.subscribe({
    userVisibleOnly: true
});

userVisibleOnly: true此設定意旨推送出去的訊息,指有此訂閱戶可以看到。
但這沒有真正解決問題,我們會期望推播訊息,能辨識哪些是從我們伺服器發出的訊息,讓伺服器為唯一有效的發送點,才能解決假訊息的發生。

而另一個方法呢?
明天揭曉囉~

閱讀資源

https://developer.mozilla.org/en-US/docs/Web/Events/notificationclick
[https://developer.mozilla.org/en-US/docs/Web/API/Push_API](MDN:Push API)
https://developer.mozilla.org/en-US/docs/Web/Events/notificationclick
[https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe](MDN:Push Manager)

GitHub

https://github.com/DakHarry/30day-pwas-practice


上一篇
Day25-Notification API設定介紹
下一篇
Day27-Push Notification之成為訂閱用戶(Firebase實作)
系列文
30天走訪Progressive Web Apps(PWAs)30

尚未有邦友留言

立即登入留言