feat: update docker-compose for backend data volume and enhance ParentLayout with push subscription handling

frontend/vue-app/src/layout/ParentLayout.vue

@@ -3,6 +3,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { computed, ref, onMounted, onUnmounted } from 'vue'
 import LoginButton from '../components/shared/LoginButton.vue'
 import PushOptIn from '../components/notification/PushOptIn.vue'
+import { subscribeToPush } from '@/services/pushSubscription'
 import { eventBus } from '@/common/eventBus'
 import type {
   Event,
@@ -68,10 +69,18 @@ function handleChoreConfirmationBadge(event: Event) {
 
 // Version fetching
 const appVersion = ref('')
+
+function onVisibilityChange() {
+  if (document.visibilityState === 'visible') {
+    subscribeToPush()
+  }
+}
+
 onMounted(async () => {
   await fetchNotificationCount()
   eventBus.on('child_reward_request', handleRewardRequestBadge)
   eventBus.on('child_chore_confirmation', handleChoreConfirmationBadge)
+  document.addEventListener('visibilitychange', onVisibilityChange)
 
   try {
     const resp = await fetch('/api/version')
@@ -87,6 +96,7 @@ onMounted(async () => {
 onUnmounted(() => {
   eventBus.off('child_reward_request', handleRewardRequestBadge)
   eventBus.off('child_chore_confirmation', handleChoreConfirmationBadge)
+  document.removeEventListener('visibilitychange', onVisibilityChange)
 })
 </script>