fix dat timer, add service worker

public/service-workers/service-worker.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-undef */
+/* eslint-disable consistent-return */
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+// Handle notification clicks (using a service worker because android requires use of service workers for notifications)
+// Modified from https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event
+self.addEventListener('notificationclick', (event) => {
+  if (event.notification.tag === 'timer') {
+    event.notification.close();
+
+    // This looks to see if the current is already open and focuses if it is
+    event.waitUntil(clients.matchAll({ type: 'window' }).then((clientList) => {
+      for (let i = 0; i < clientList.length; i++) {
+        const client = clientList[i];
+        if (new URL(client.url).pathname === '/tools' && 'focus' in client) {
+          client.postMessage('stop-timer-done-audio');
+          return client.focus();
+        }
+      }
+      if (clients.openWindow) return clients.openWindow('/tools');
+    }));
+  }
+});

src/main.ts

@@ -5,6 +5,10 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 
+if (navigator.serviceWorker) {
+  navigator.serviceWorker.register('/service-workers/service-worker.js');
+}
+
 createApp(App).component('font-awesome-icon', FontAwesomeIcon)
   .use(store)
   .use(router)

src/views/Calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- <div // FIX
+  <!-- <div // FIX?
     v-hammer:swipe.horizontal="onSwipe"
     v-focus
     tabindex="-1"

src/views/Tools/TimerCard.vue

@@ -7,7 +7,7 @@
           <div class="slash" :class="{ hide: shouldMakeSound }" />
         </div>
         <div class="title">Timer</div>
-        <div @click="isFullscreen ? exitFullscreen : makeFullscreen" class="icon-button">
+        <div @click="isFullscreen ? exitFullscreen() : makeFullscreen()" class="icon-button">
           <font-awesome-icon class="icon" :icon="isFullscreen ? icons.faCompress : icons.faExpand" fixed-width />
         </div>
       </div>