Progressive Web Application (PWA):Notification and Web Push

前言

Progressive Web Application (PWA) 也可以讓我們來發通知，透過 Service Worker 的 Registration 物件來發送。
也可以接收來自 Server 的訊息通知(Web Push)，在 Service Worker js 中監聽 push 事件。
以下就讓我們來實作出 Notification 及 Web Push .

實作

要求顯示通知權限

一開始要判斷 Notification 是否存在，存在就可以透過 Notification.requestPermission 來要求顯示通知權限

const checkNotificationSupport = () => {
    if (!('Notification' in window)) {
        return Promise.reject('The browser doesn\'t support notifications.');
    }
    console.log("The browser support Notifications!")
    return Promise.resolve('ok!');
};

const requestNotificationPermissions = () => {
    return Notification.requestPermission(status => {
        console.log("Notification Permission Status:", status);
    })
};

簡單文字通知

透過 Service Worker 的 Registration 物件呼叫 showNotification Method 來顯示通知

navigator.serviceWorker.getRegistration()
.showNotification('Client Notification');

豊富的通知

一樣是呼叫 showNotification，第2個參數可讓我們設定較為複雜通知 UI

const options = {
	body: 'This is an important body!',
	icon: 'assets/apple-icon-180x180.png',
	actions: [
		{ action: 'search', title: 'try searching!' },
		{ action: 'close', title: 'do nothing' },
	],
	data: {
		notificationTime: Date.now(),
		user: 'rainmaker'
	}
}
navigator.serviceWorker.getRegistration()
.showNotification('customized Notification', options);

Web Push

Voluntary Application Server Identification (VAPID)

要使用 Web Push 就需要有 Voluntary Application Server Identification(VAPID)，所以可以使用 web-push 來建立
開啟 Command 視窗
1.安裝 web-push node 套件

npm install web-push -g

2.建立 VAPID

web-push generate-vapid-keys

pushManager.subscribe Client 訂閱 Web Push 通知

有了 VAPID 後，就可以透過 pushManager.subscribe 來訂閱

function urlB64ToUint8Array(url) {
    const padding = '='.repeat((4 - url.length % 4) % 4);
    const base64 = (url + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

//將定閱通知資料送到 Server 記起來
const subscribeWithServer = (subscription) => {
    return fetch('/api/PushSubscriber', {
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: {
            'Content-Type': 'application/json'
        }
    })
}

const subscribeUser = () => {
    const appServerPublicKey = "BLhYVuGAKX2B7YAYZm4ZnCWkdxb3bz0hUldJ4kCl6pBLxBlrWeKRB-OJJ-b1IZXOmF83twBz8svJVwJmFNfwaH4";
    const publicKeyAsArray = urlB64ToUint8Array(appServerPublicKey)
    navigator.serviceWorker.getRegistration()
        .then(sr => {
            sr.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: publicKeyAsArray
            }).then(subscription => {
                console.log(JSON.stringify(subscription, null, 4))
                subscribeWithServer(subscription)
                disablePushNotificationButton();
            })
                .catch(error => console.error("Failed to subscribe to Push Service.", error))
        });
}

pushManager.subscribe 的 subscription 內容如下，

所以 server side 就可以 Keys.auth 為 Key 將整個 subscription 存起來

pushManager.subscribe Client 訂閱 Web Push 通知

//將訂閱通知資料從 server 端刪除掉
const unsubscribeWithServer = (id) => {
    return fetch('/api/PushSubscriber/'+ id, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    })
}

const unSubscribeUser = () => {
    console.log("un-subscribing user")
    navigator.serviceWorker.getRegistration()
        .then(sr => {
            sr.pushManager.getSubscription()
                .then(subscription => {
                    if (subscription) {
                        let subAsString = JSON.stringify(subscription);
                        let subAsObject = JSON.parse(subAsString)
                        unsubscribeWithServer(subAsObject.keys.auth)
                        return subscription.unsubscribe()
                    }
                })
                .then(enablePushNotificationButton)
                .catch(error => console.error("Failed to unsubscribe from Push Service.", error))
        });
}

Server Push Notification

在 Server 端做 Web Push ，可透過 web-push-csharp 來幫我們。
所以安裝 WebPush 套件

Install-Package WebPush

需要通知 Client 時，就可以從 DB 中取出 Client 訂閱資料，進行通知

// using WebPush;
var subject = @"mailto:rainmaker_ho@gss.com.tw";
var publicKey = @"BLhYVuGAKX2B7YAYZm4ZnCWkdxb3bz0hUldJ4kCl6pBXxBlrWeKRB-OJJ-b1IZXOmF83twBz8svJVwJmFNfwaH4";
var privateKey = @"1prKXHYvYSIaWmsZ1Yv3KldSKIaBKwwIWudu1_p7Ig1";
var vapidDetails = new VapidDetails(subject, publicKey, privateKey);
var webPushClient = new WebPushClient();
var subscribers = _db.GetCollection<PushSubscriberVM>(PushSubscriberName).FindAll();
foreach(var subscriber in subscribers)
{
    var subscription = new PushSubscription(subscriber.endpoint
        , subscriber.keys.p256dh, subscriber.keys.auth);
    try
    {
        //這裡只是簡單地送 payload 給訂閱的 client
        webPushClient.SendNotification(subscription, "payload", vapidDetails);
    }
    catch (WebPushException exception)
    {
        Console.WriteLine("Http STATUS code" + exception.StatusCode);
    }
}

Service Worker Js 要監聽 push 事件

Service Worker Js 要監聽 push 事件，取得 Web Push 的內容，再呼叫 self.registration.showNotification 來顯示 Notification。

self.addEventListener('push', event => {
    const payload = event.data.text();
    self.registration.showNotification(payload);
});

以下為 Android 手機的通知

以上為 Web Push Notification 的實作介紹，因為通知是透過 browser 來通知的，所以 Browser 有開啟才會收到通知哦!

而要取得這個 Client 有沒有訂閱，可以透過 serviceWorkerRegObj.pushManager.getSubscription() 來取得訂閱的資料，如下，

navigator.serviceWorker.getRegistration()
.then(sr=>{
sr.pushManager.getSubscription()
    .then(subscription => {
        if (subscription) {
            //有訂閱
        }else{
            //無訂閱
        }
    })
});

按下 Notification 控制

在 Service Worker JS 中的 notificationclick 可控制使用者按下通知後要做的事

self.addEventListener('notificationclick', event => {
    if (event.action === "search") {
        clients.openWindow(`https://github.com/rainmakerho`);
    } else if (event.action === "close") {
        clients.openWindow(`https://rainmakerho.github.io/`);
    };
    console.log('notification clicked', event)
    //按下後，將其他的通知也一併關掉
    self.registration.getNotifications()
        .then(ns => ns.forEach(n => n.close()))
})

Notification Close

self.addEventListener('notificationclose', event => {
    console.log('notification closed', event)
})

參考資料

web-push-libs
web-push