Improved push subscription change event

scripts/ServiceWorker/ServiceWorker.ts

@@ -273,10 +273,23 @@ function onPush(evt: PushEvent) {
 	})
 }
 
-function onPushSubscriptionChange(evt: any) {
+async function onPushSubscriptionChange(evt: PushSubscriptionChangeEvent) {
-	return self.registration.pushManager.subscribe(evt.oldSubscription.options)
+	const userResponse = await fetch("/api/me", {credentials: "same-origin"})
-	.then(async subscription => {
+	const user = await userResponse.json()
-		console.log("send subscription to server...")
+
+	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))) : ""
@@ -284,10 +297,8 @@ function onPushSubscriptionChange(evt: any) {
 	const rawSecret = subscription.getKey("auth")
 	const secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
 
-		const endpoint = subscription.endpoint
-
 	const pushSubscription = {
-			endpoint,
+		endpoint: subscription.endpoint,
 		p256dh: key,
 		auth: secret,
 		platform: navigator.platform,
@@ -298,15 +309,11 @@ function onPushSubscriptionChange(evt: any) {
 		}
 	}
 
-		const response = await fetch("/api/me", {credentials: "same-origin"})
+	await fetch(`/api/pushsubscriptions/${user.id}/add`, {
-		const user = await response.json()
-
-		return 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.

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;