Update readme

README.md

@@ -1,3 +1,15 @@
+<meta property="og:url" content="https://github.com/Spyna/push-notification-demo" />
+<meta property="og:type" content="website" />
+<meta property="og:title" content="Web push notification demo" />
+<meta property="og:description" content="How to implement Web Push Notification" />
+<meta property="og:image" content="https://github.com/Spyna/push-notification-demo/raw/master/push-notification.jpg" />
+<meta property="og:image:width" content="466" />
+<meta property="og:image:height" content="643" />
+
+![A push notificatin][pushNotificaiton]
+
+[pushNotificaiton]: https://github.com/Spyna/push-notification-demo/raw/master/push-notification.jpg "Push notification"
+
 # push-notification-demo
 
 ## Front end 

front-end/src/scripts/index.js

@@ -74,20 +74,20 @@ let subscritionId;
 const pushNotificationSuported = isPushNotificationSupported();
 
 const pushNotificationConsentSpan = document.getElementById("push-notification-consent");
-const sendPushNotificationButton = document.getElementById("send-push-notification-button");
-sendPushNotificationButton.addEventListener("click", sendNotification);
+const pushNotificationSupportedSpan = document.getElementById("push-notification-supported");
+pushNotificationSupportedSpan.innerHTML = pushNotificationSuported;
+
+const askUserPemissionButton = document.getElementById("ask-user-permission-button");
+askUserPemissionButton.addEventListener("click", askUserPermission);
 
 const susbribeToPushNotificationButton = document.getElementById("create-notification-subscription-button");
 susbribeToPushNotificationButton.addEventListener("click", susbribeToPushNotification);
 
 const sendSubscriptionButton = document.getElementById("send-subscription-button");
 sendSubscriptionButton.addEventListener("click", sendSubscriptionToPushServer);
 
-const askUserPemissionButton = document.getElementById("ask-user-permission-button");
-askUserPemissionButton.addEventListener("click", askUserPermission);
-
-const pushNotificationSupportedSpan = document.getElementById("push-notification-supported");
-pushNotificationSupportedSpan.innerHTML = pushNotificationSuported;
+const sendPushNotificationButton = document.getElementById("send-push-notification-button");
+sendPushNotificationButton.addEventListener("click", sendNotification);
 
 if (pushNotificationSuported) {
   updateUserConsent(Notification.permission);

front-end/src/scripts/push-notifications.js

@@ -1,12 +1,5 @@
-import { urlB64ToUint8Array } from "./utils/base64";
-
 const pushServerPublicKey = "BIN2Jc5Vmkmy-S3AUrcMlpKxJpLeVRAfu9WBqUbJ70SJOCWGCGXKY-Xzyh7HDr6KbRDGYHjqZ06OcS3BjD7uAm8";
 
-/**
- * the public key needs to be encoded in a Uint8Array
- */
-const convertedPushServerPublicKey = urlB64ToUint8Array(pushServerPublicKey);
-
 /**
  * checks if Push notification and service workers are supported by your browser
  */
@@ -65,7 +58,7 @@ function createNotificationSubscription() {
     return serviceWorker.pushManager
     .subscribe({
       userVisibleOnly: true,
-      applicationServerKey: convertedPushServerPublicKey
+      applicationServerKey: pushServerPublicKey
     })
     .then(function(subscription) {
       console.log("User is subscribed.", subscription);