4 files changed, 65 insertions, 10 deletions
diff --git a/src/main/assets/icon.js b/src/main/assets/icon.js
index 5cd787a5..b4b5aedc 100644
--- a/src/main/assets/icon.js
+++ b/src/main/assets/icon.js
@@ -1,10 +1,10 @@
-import evilIcons from 'evil-icons/assets/sprite.svg'
+const spritesUrl = new URL('evil-icons/assets/sprite.svg', import.meta.url)
 
 function icon(name, { size = '', className = '' }) {
   const classes = `icon icon--${name} icon--${size} ${className}`.trim()
 
   var icon =  '<svg class="icon__cnt">' +
-                `<use xlink:href='${evilIcons}#${name}-icon' />` +
+                `<use xlink:href='${spritesUrl}#${name}-icon' />` +
               '</svg>'
 
   var html =  '<div class="' + classes + '">' +
diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 3c83bba4..12c4d9b2 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -251,6 +251,10 @@ function closeDialogListener(ev) {
     }
 }
 
+/**
+ * 
+ * @param {Response} response
+ */
 function handleErrors(response) {
     if (!response.ok) {
         throw Error(response.statusText)
@@ -310,15 +314,14 @@ function showCommentForm(mid, rid) {
                 method: 'POST',
                 body: formData,
                 credentials: 'include'
-            }).then(handleErrors)
-                .then(response => response.json())
+            }).then(response => response.json())
                 .then(result => {
                     if (result.newMessage) {
                         window.location.hash = `#${result.newMessage.rid}`
+                        window.location.reload()
                     } else {
                         alert(result.text)
                     }
-                    window.location.reload()
                 }).catch(error => {
                     alert(error.message)
                 })
@@ -535,7 +538,7 @@ function fetchUserUri(dataUri) {
 
 const registerServiceWorker = () => {
     const publicKey = 'BPU0LniKKR0QiaUvILPd9AystmSOU8rWDZobxKm7IJN5HYxOSQdktRdc74TZvyRS9_kyUz7LDN6gUAmAVOmObAU'
-    navigator.serviceWorker.register('/sw.js', { scope: '/' })
+    navigator.serviceWorker.register(new URL('./sw.js', import.meta.url), { scope: '/' })
     navigator.serviceWorker.ready.then(reg => {
         return reg.pushManager.subscribe({
             userVisibleOnly: true,
@@ -663,8 +666,7 @@ ready(() => {
                 method: 'POST',
                 body: formData,
                 credentials: 'include'
-            }).then(handleErrors)
-                .then(response => response.json())
+            }).then(response => response.json())
                 .then(result => {
                     if (result.newMessage) {
                         window.location.href = new URL(`/m/${result.newMessage.mid}`, window.location.href).href
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index f5e4ef00..99cefffa 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -363,8 +363,7 @@ article {
     background: var(--text-background-color);
     border: 1px solid var(--border-color);
     line-height: 140%;
-    margin-bottom: 10px;    
-    overflow: auto;
+    margin-bottom: 10px;
 }
 article .h,
 article #postmsg,
@@ -375,6 +374,9 @@ article #postmsg,
 .msg-cont .msg-header {
     padding: 20px;
 }
+.page-content {
+    overflow: auto;
+}
 
 article time {
     color: #88958d;
@@ -443,6 +445,10 @@ article .tags > a::before,
     padding: 0 10px;
 }
 
+.dimmed {
+    color: var(--dimmed-link-color);
+}
+
 .l .msg-button {
     padding: 12px;
 }
diff --git a/src/main/assets/sw.js b/src/main/assets/sw.js
new file mode 100644
index 00000000..a64de7cc
--- /dev/null
+++ b/src/main/assets/sw.js
@@ -0,0 +1,47 @@
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="WebWorker" />
+
+var sw = /** @type {ServiceWorkerGlobalScope & typeof self} */ (self)
+sw.addEventListener('install', function() {
+  sw.skipWaiting()
+})
+sw.addEventListener('activate', function() {
+  sw.clients.claim()
+})
+sw.addEventListener('push', function(evt) {
+  if (evt.data) {
+    const data = evt.data.json()
+    console.log('Push', data)
+    if (data.body) {
+      sw.registration.showNotification(data.title, {
+        body: data.body,
+        icon: data.custom.message.user.avatar,
+        tag: data.tag,
+        data: data.custom.message
+      })
+    }
+  }
+})
+sw.addEventListener('notificationclick', function(evt) {
+  evt.waitUntil(
+    sw.clients.matchAll().then(function(clientList) {
+      const message = evt.notification.data
+      const url = message.mid
+        ? message.rid
+          ? `https://juick.com/m/${message.mid}#${message.rid}`
+          : `https://juick.com/m/${message.mid}`
+        : 'https://juick.com/pm/inbox'
+      if (clientList.length > 0) {
+        for (var i = 0; i < clientList.length; i++) {
+          if (clientList[i].url === url) {
+            return clientList[i].focus()
+          }
+        }
+        clientList[0].navigate(url)
+        return clientList[0].focus()
+      }
+      return sw.clients.openWindow(url)
+    })
+  )
+})