api for push button

Author: nitinraturi

main.py

@@ -44,3 +44,23 @@ def push_to_all_users():
         print("error",e)
 
     return redirect(url_for('main.index'))
+
+
+@main.route("/push_v1/",methods=['POST'])
+def push_v1():
+    message = "Push Test v1"
+    print("is_json",request.is_json)
+    
+    if not request.json or not request.json.get('sub_token'):
+        return jsonify({'failed':1})
+
+    print("request.json",request.json)
+
+    token = request.json.get('sub_token')
+    try:
+        send_web_push(json.loads(token), message)
+        return jsonify({'success':1})
+    except Exception as e:
+        print("error",e)
+
+    return jsonify({'failed':str(e)})

static/main.js

@@ -1,7 +1,6 @@
 'use strict';
 
-const applicationServerPublicKey = "BN4BnHEmqGkZN_Oi71tFEjTJILdAspeFWMIMvjP1ZHa-fWL-iRP3_OD0UZ9RJ4uxDDIOJhyoZu_P G9U6JJzo1AM";
-var sub_token = '';
+const applicationServerPublicKey = "BA0I0zCKG13_vN7T3I310T_Mkg0D6IpVc_t6lsSxfCqbvDrirGI16gef0Uks52pAjGXq02LpyNTG dYnzr7gIwhs";
 const pushButton = document.querySelector('.js-push-btn');
 
 let isSubscribed = false;
@@ -43,15 +42,12 @@ function updateSubscriptionOnServer(subscription) {
 	// TODO: Send subscription to application server
 
 	const subscriptionJson = document.querySelector('.js-subscription-json');
-	var sub_token = document.querySelector('#sub_token');
 	const subscriptionDetails =
 		document.querySelector('.js-subscription-details');
 
 	if (subscription) {
 		subscriptionJson.textContent = JSON.stringify(subscription);
-		sub_token.value = JSON.stringify(subscription);
 		subscriptionDetails.classList.remove('is-invisible');
-		console.log("subscribe",JSON.stringify(subscription));
 	} else {
 		subscriptionDetails.classList.add('is-invisible');
 	}
@@ -67,7 +63,7 @@ function subscribeUser() {
 			console.log('User is subscribed.');
 
 			updateSubscriptionOnServer(subscription);
-			sub_token = subscription;
+			localStorage.setItem('sub_token',JSON.stringify(subscription));
 			isSubscribed = true;
 
 			updateBtn();
@@ -76,7 +72,7 @@ function subscribeUser() {
 			console.log('Failed to subscribe the user: ', err);
 			updateBtn();
 		});
-}push_message
+}
 
 function unsubscribeUser() {
 	swRegistration.pushManager.getSubscription()
@@ -144,10 +140,18 @@ if ('serviceWorker' in navigator && 'PushManager' in window) {
 }
 
 function push_message() {
-	console.log("sub_token", sub_token);
+	console.log("sub_token", localStorage.getItem('sub_token'));
 	$.ajax({
 		type: "POST",
-		url: "/push/",
-		data: JSON.stringify({'token':sub_token}),
+		url: "/push_v1/",
+		contentType: 'application/json; charset=utf-8',
+		dataType:'json',
+		data: JSON.stringify({'sub_token':localStorage.getItem('sub_token')}),
+		success: function( data ){
+			console.log("success",data);
+    },
+    error: function( jqXhr, textStatus, errorThrown ){
+        console.log("error",errorThrown);
+    }
 	});
 }

static/sw.js

@@ -2,7 +2,7 @@
 
 /* eslint-disable max-len */
 
-const applicationServerPublicKey = "BN4BnHEmqGkZN_Oi71tFEjTJILdAspeFWMIMvjP1ZHa-fWL-iRP3_OD0UZ9RJ4uxDDIOJhyoZu_P G9U6JJzo1AM";
+const applicationServerPublicKey = "BA0I0zCKG13_vN7T3I310T_Mkg0D6IpVc_t6lsSxfCqbvDrirGI16gef0Uks52pAjGXq02LpyNTG dYnzr7gIwhs";
 
 /* eslint-enable max-len */
 

templates/index.html

@@ -37,15 +37,16 @@ <h1>WebPush Notification</h1>
 
 			<hr>
 			<p>You can test push notification below.</p>
+			<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" onclick="push_message()">Test Push Notification</button>
 
-			<form action="/push/" method="POST">
+			<!-- <form action="/push/" method="POST">
 				<div class="mdl-textfield mdl-js-textfield">
 					<input required type="hidden" name="sub_token" id="sub_token">
 					<label class="mdl-textfield__label" for="message">Your message.</label>
 					<input class="mdl-textfield__input" required type="text" name="message" id="message">
 				</div>
 				<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">PUSH</button>
-			</form>
+			</form> -->
 		</section>
 	</main>