Improve mobile PWA safe areas and push retry

public/manifest.webmanifest

@@ -6,6 +6,7 @@
   "scope": "/",
   "id": "/",
   "display": "standalone",
+  "display_override": ["fullscreen", "standalone"],
   "orientation": "portrait",
   "background_color": "#000000",
   "theme_color": "#000000",

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'l484-pwa-v6'
+const CACHE_NAME = 'l484-pwa-v7'
 const APP_SHELL = [
   '/',
   '/manifest.webmanifest',

src/App.vue

@@ -399,6 +399,7 @@ const heroBackgroundEntries = computed(() =>
     .map((background, index) => ({ background, index }))
     .filter(({ index }) => loadedHeroBackgroundIndexes.value.has(index)),
 )
+const currentHeroBackground = computed(() => heroBackgrounds[activeBackground.value] || heroBackgrounds[0] || '')
 
 const sanitizeText = (value, maxLength) =>
   String(value ?? '')
@@ -2139,6 +2140,10 @@ onMounted(async () => {
   }
 })
 
+watch(currentHeroBackground, (background) => {
+  document.documentElement.style.setProperty('--safe-area-bg-image', background ? `url(${background})` : '#000')
+}, { immediate: true })
+
 onBeforeUnmount(() => {
   window.clearInterval(backgroundTimer)
   window.clearTimeout(adminToastTimer)
@@ -2336,7 +2341,7 @@ watch(mobileMenuOpen, (open) => {
     <section
       v-if="isHomeRoute"
       class="hero-fold relative isolate min-h-screen overflow-hidden"
-      :style="{ '--safe-area-bg-image': `url(${heroBackgrounds[activeBackground] || heroBackgrounds[0] || ''})` }"
+      :style="{ '--safe-area-bg-image': `url(${currentHeroBackground})` }"
     >
       <div class="hero-bg-layer">
         <img

src/services/notifications.js

@@ -63,19 +63,30 @@ const saveSubscription = async (subscription) => {
   return data
 }
 
-const subscribeWithRetry = async (registration, applicationServerKey) => {
+const subscribeWithKey = async (registration, applicationServerKey) => {
   try {
     return await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey })
+  } catch (error) {
+    if (applicationServerKey instanceof Uint8Array) {
+      return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey.buffer })
+    }
+    throw error
+  }
+}
+
+const subscribeWithRetry = async (registration, applicationServerKey) => {
+  try {
+    return await subscribeWithKey(registration, applicationServerKey)
   } catch (error) {
     await registration.update().catch(() => {})
     await new Promise((resolve) => window.setTimeout(resolve, 750))
     const activeRegistration = await navigator.serviceWorker.ready
     try {
-      return await activeRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey })
+      return await subscribeWithKey(activeRegistration, applicationServerKey)
     } catch (retryError) {
       try {
         const repairedRegistration = await repairServiceWorkerRegistration()
-        return await repairedRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey })
+        return await subscribeWithKey(repairedRegistration, applicationServerKey)
       } catch (repairError) {
         throw new Error(await explainSubscribeError(repairError || retryError || error))
       }

src/style.css

@@ -54,6 +54,10 @@ body::before {
   pointer-events: none;
 }
 
+.intro-header > div {
+  padding-top: calc(1.25rem + env(safe-area-inset-top));
+}
+
 body.menu-open {
   overflow: hidden;
 }
@@ -257,6 +261,10 @@ body.menu-open {
 }
 
 @media (max-width: 900px) {
+  .intro-header > div {
+    padding-top: calc(1.25rem + env(safe-area-inset-top));
+  }
+
   .hero-fold::before {
     display: block;
   }