From 3a3867cc21b20869f021206441d7aff55d82cf7d Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Wed, 20 Nov 2019 17:27:50 +0900
Subject: [PATCH] Improved push subscription change event

---
 scripts/ServiceWorker/ServiceWorker.ts | 69 ++++++++++++++------------
 scripts/ServiceWorker/index.d.ts       |  5 ++
 2 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/scripts/ServiceWorker/ServiceWorker.ts b/scripts/ServiceWorker/ServiceWorker.ts
index 3746b324..a319e1c0 100644
--- a/scripts/ServiceWorker/ServiceWorker.ts
+++ b/scripts/ServiceWorker/ServiceWorker.ts
@@ -273,40 +273,47 @@ function onPush(evt: PushEvent) {
 	})
 }
 
-function onPushSubscriptionChange(evt: any) {
-	return self.registration.pushManager.subscribe(evt.oldSubscription.options)
-	.then(async subscription => {
-		console.log("send subscription to server...")
+async function onPushSubscriptionChange(evt: PushSubscriptionChangeEvent) {
+	const userResponse = await fetch("/api/me", {credentials: "same-origin"})
+	const user = await userResponse.json()
 
-		const rawKey = subscription.getKey("p256dh")
-		const key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
-
-		const rawSecret = subscription.getKey("auth")
-		const secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
-
-		const endpoint = subscription.endpoint
-
-		const pushSubscription = {
-			endpoint,
-			p256dh: key,
-			auth: secret,
-			platform: navigator.platform,
-			userAgent: navigator.userAgent,
-			screen: {
-				width: window.screen.width,
-				height: window.screen.height
-			}
-		}
-
-		const response = await fetch("/api/me", {credentials: "same-origin"})
-		const user = await response.json()
-
-		return fetch("/api/pushsubscriptions/" + user.id + "/add", {
-			method: "POST",
-			credentials: "same-origin",
-			body: JSON.stringify(pushSubscription)
+	await fetch(`/api/pushsubscriptions/${user.id}/remove`, {
+		method: "POST",
+		credentials: "same-origin",
+		body: JSON.stringify({
+			endpoint: evt.oldSubscription.endpoint
 		})
 	})
+
+	const subscription = evt.newSubscription || await self.registration.pushManager.subscribe(evt.oldSubscription.options)
+
+	if(!subscription || !subscription.endpoint) {
+		return
+	}
+
+	const rawKey = subscription.getKey("p256dh")
+	const key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
+
+	const rawSecret = subscription.getKey("auth")
+	const secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
+
+	const pushSubscription = {
+		endpoint: subscription.endpoint,
+		p256dh: key,
+		auth: secret,
+		platform: navigator.platform,
+		userAgent: navigator.userAgent,
+		screen: {
+			width: window.screen.width,
+			height: window.screen.height
+		}
+	}
+
+	await fetch(`/api/pushsubscriptions/${user.id}/add`, {
+		method: "POST",
+		credentials: "same-origin",
+		body: JSON.stringify(pushSubscription)
+	})
 }
 
 // onNotificationClick is called when the user clicks on a notification.
diff --git a/scripts/ServiceWorker/index.d.ts b/scripts/ServiceWorker/index.d.ts
index 436586aa..94e6436f 100644
--- a/scripts/ServiceWorker/index.d.ts
+++ b/scripts/ServiceWorker/index.d.ts
@@ -484,6 +484,11 @@ interface PushEvent extends ExtendableEvent {
 	readonly data: PushMessageData;
 }
 
+interface PushSubscriptionChangeEvent extends ExtendableEvent {
+	readonly newSubscription: PushSubscription;
+	readonly oldSubscription: PushSubscription;
+}
+
 interface ServiceWorkerContainerEventMap {
 	"error": ErrorEvent;
 	"controllerchange": Event;