Add a button for enabling push notifications

files/assets/js/bottom.js

@@ -234,3 +234,10 @@ for (const input of inputs) {
 		if (parseInt(input.value) > parseInt(input.max)) input.value = input.max;
 	};
 }
+
+if (!('serviceWorker' in navigator && 'PushManager' in window)) {
+	let e = document.getElementById("enable-push-nav-item").style = "display: none"; 
+	if (e) {
+		e.style = "display: none"
+	}
+}

files/assets/js/core.js

@@ -605,3 +605,51 @@ document.querySelectorAll('form').forEach(form => {
 		form.classList.add('is-submitting');
 	});
 });
+
+function urlB64ToUint8Array(base64String) {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + 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;
+}
+
+function updateSubscriptionOnServer(subscription, apiEndpoint) {
+	const formData = new FormData();
+	formData.append("subscription_json", JSON.stringify(subscription));
+
+	const xhr = createXhrWithFormKey(
+		apiEndpoint,
+		'POST',
+		formData
+	);
+
+	xhr[0].send(xhr[1]);
+}
+
+function enablePushNotifications() {
+	if (!('serviceWorker' in navigator && 'PushManager' in window)) return;
+	let publicKeyElement = document.getElementById('VAPID_PUBLIC_KEY');
+	if (!publicKeyElement) return;
+
+	let publicKey = urlB64ToUint8Array(publicKeyElement.value);
+	navigator.serviceWorker.getRegistration("/assets/js/service_worker.js").then((reg) => {
+		return reg.pushManager.subscribe({
+			userVisibleOnly: true,
+			applicationServerKey: publicKey,
+		})
+	}).then((subscription) => {
+		updateSubscriptionOnServer(subscription, "/push_subscribe")
+		alert("Push notifications are enabled!")
+	}).catch((e) => {
+		alert("Failed to enable push notifications :marseyill:")
+		console.log(e)
+	})
+}

files/assets/js/register_service_worker.js

@@ -1,76 +1,11 @@
 'use strict';
 
-function urlB64ToUint8Array(base64String) {
-	const padding = '='.repeat((4 - base64String.length % 4) % 4);
-	const base64 = (base64String + 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;
-}
-
-function updateSubscriptionOnServer(subscription, apiEndpoint) {
-	const formData = new FormData();
-	formData.append("subscription_json", JSON.stringify(subscription));
-
-	const xhr = createXhrWithFormKey(
-		apiEndpoint,
-		'POST',
-		formData
-	);
-
-	xhr[0].send(xhr[1]);
-}
-
-function subscribeUser(swRegistration, applicationServerPublicKey, apiEndpoint) {
-	const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
-	swRegistration.pushManager.subscribe({
-		userVisibleOnly: true,
-		applicationServerKey: applicationServerKey
-	})
-	.then(function(subscription) {
-		return updateSubscriptionOnServer(subscription, apiEndpoint);
-
-	})
-	.then(function(response) {
-		if (!response.ok) {
-			throw new Error('Bad status code from server.');
-		}
-		return response.json();
-	})
-	.then(function(responseData) {
-		if (responseData.status!=="success") {
-			throw new Error('Bad response from server.');
-		}
-	})
-	.catch(function() {
-	});
-}
-
-function registerServiceWorker(serviceWorkerUrl, applicationServerPublicKey, apiEndpoint){
-	let swRegistration = null;
+function registerServiceWorker(serviceWorkerUrl){
 	if ('serviceWorker' in navigator && 'PushManager' in window) {
-		navigator.serviceWorker.register(serviceWorkerUrl)
-		.then(function(swReg) {
-			subscribeUser(swReg, applicationServerPublicKey, apiEndpoint);
-
-			swRegistration = swReg;
-		})
-		.catch(function() {
-		});
-	} else {
+		navigator.serviceWorker.register(serviceWorkerUrl);
 	}
-	return swRegistration;
 }
 
 registerServiceWorker(
-	"/assets/js/service_worker.js",
-	document.getElementById('VAPID_PUBLIC_KEY').value,
-	"/push_subscribe"
+	"/assets/js/service_worker.js"
 )

files/templates/header.html

@@ -254,7 +254,9 @@
 							<a class="dropdown-item" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>My profile</a>
 							<a class="dropdown-item" href="/settings/personal"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
 
-							<a class="dropdown-item" href="/app"><i class="fas fa-mobile fa-fw mr-3"></i>Mobile app</a>
+							{% if g.browser != 'webview' %}
+								<a class="dropdown-item" href="/app"><i class="fas fa-mobile fa-fw mr-3"></i>Mobile app</a>
+							{% endif %}
 
 							<a class="dropdown-item donate-link" rel="nofollow noopener" href="/donate"><i class="fas fa-dollar-sign fa-fw mr-3"></i>Donate</a>
 
@@ -310,7 +312,12 @@
 					<a class="nav-link" href="/settings/personal"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
 				</li>
 
-				<a class="nav-item nav-link" href="/app"><i class="fas fa-mobile fa-fw mr-3"></i>Mobile app</a>
+
+				{% if g.browser == 'webview' %}
+					<a class="nav-item nav-link" href="/app" id="mobile-app-nav-item"><i class="fas fa-mobile fa-fw mr-3"></i>Mobile app</a>
+				{% endif %}
+
+				<a class="nav-item nav-link" href="#" id="enable-push-nav-item" data-nonce="{{g.nonce}}" data-nonce="{{g.nonce}}"  data-onclick="enablePushNotifications()"><i class="fas fa-bell fa-fw mr-3"></i>Enable push notifications</a>
 
 				<a class="nav-item nav-link donate-link" rel="nofollow noopener" href="/donate"><i class="fas fa-dollar-sign fa-fw mr-3"></i>Donate</a>
 

files/templates/home.html

@@ -160,7 +160,10 @@
 
 {% if request.path == '/' and v %}
 	<script defer src="{{'js/register_service_worker.js' | asset}}"></script>
-	<input hidden id="VAPID_PUBLIC_KEY" value="{{VAPID_PUBLIC_KEY}}">
+{% endif %}
+
+{% if v %}
+<input hidden id="VAPID_PUBLIC_KEY" value="{{VAPID_PUBLIC_KEY}}">
 {% endif %}
 
 {% if False and request.path == '/' and g.browser != 'webview' and time.time() > session.get('tooltip_dismissed',0)+86400*30 %}