feat: improve client example

trueChazza · trueChazza · commit b79fd69fb3ec · 2023-09-29T16:24:56.000+13:00
diff --git a/example/index.html b/example/index.html
@@ -2,24 +2,28 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Push Elixir</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="manifest" href="app.webmanifest">
-    <style>
-        .container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-        }
-    </style>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
-    <div class="container">
-        <h1>Web Push Elixir</h1>
-        <button>Test Notification</button>
-    </div>
+    <main class="min-h-screen grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
+        <div class="text-center">
+            <p class="text-base font-semibold text-red-600">Web Push Elixir</p>
+            <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">Client Subscription</h1>
+            <p class="mt-6 text-base leading-7 text-gray-600">Example client subscription for push notifications</p>
+            <div class="mt-10 flex items-center justify-center gap-x-6">
+                <button id="request" type="button" class="rounded-md bg-red-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Request Permission</button>
+                <button id="subscribe" type="button" class="text-sm font-semibold text-gray-900">Subscribe Client</button>
+            </div>
+        </div>
+
+        <div class="relative block w-full md:w-1/2 bg-gray-200 p-12 text-center">
+            <div id="message" class="mt-2 block text-sm text-gray-600 break-all"></div>
+        </div>
+    </main>
     <script src="main.js"></script>
 </body>
 </html>
diff --git a/example/main.js b/example/main.js
@@ -1,29 +1,51 @@
+const message = document.getElementById('message')
+
 navigator.serviceWorker
     .register(`${ window.location.pathname }service-worker.js`)
     .then(registration => {
-      console.log('Service worker successfully registered.');
+      message.innerHTML += '<p>Service worker successfully registered</p>'
     })
     .catch(err => {
-      console.error('Unable to register service worker.', err);
-    });
-
-const button = document.querySelector('button');
+      message.innerHTML += `<p>Unable to register service worker - ${err}</p>`
+    })
 
-button.addEventListener('click', event => {
+const request = document.getElementById('request')
+const subscribe = document.getElementById('subscribe')
 
+request.addEventListener('click', event => {
     Notification.requestPermission()
         .then(permission => {
+            message.innerHTML += `<p>Permission ${permission}</p>`
+        })
+});
 
-            navigator.serviceWorker.ready.then(registration => {
-
-                console.log('Service worker is active');
+subscribe.addEventListener('click', event => {
+    navigator.serviceWorker.ready
+        .then(registration => {
 
-                registration.pushManager.subscribe({
-                    userVisibleOnly: true,
-                    applicationServerKey: 'some_public_key'
-                }).then(pushSubscription => {
-                    console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
-                });
-            });
+        registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: 'BDntLA3k5K1tsrFOXXAuS_9Ey30jxy-R2CAosC2DOQnTs8LpQGxpTEx3AcPXinVYFFpJI6tT_RJC8pHgUsdbhOk'
         })
-});
+        .then(pushSubscription => {
+            message.innerHTML += `<p>Received PushSubscription:</p>`
+            message.innerHTML += `<p>${JSON.stringify(pushSubscription)}</p>`
+        })
+        .catch(err => {
+            registration.pushManager.getSubscription().then(subscription => {
+                if (subscription !== null) {
+                    subscription
+                      .unsubscribe()
+                      .then(successful => {
+                        message.innerHTML += '<p>Unsubscribed from existing subscription, please subscribe again</p>'
+                      })
+                      .catch(err => {
+                        message.innerHTML += `<p>Failed to unsubscribe from existing subscription - ${err}</p>`
+                      })
+                } else {
+                    message.innerHTML += '<p>No subscription found</p>'
+                }
+            })
+        })
+    })
+})
