From 2efa0bcdc0c816076273fdf0ec07bb1c952c7c4e Mon Sep 17 00:00:00 2001 From: Fuwn Date: Wed, 24 Jul 2024 04:40:10 -0700 Subject: feat(layout): browser notifications --- src/lib/Settings/Categories/Display.svelte | 28 ++++++++-------- src/routes/+layout.svelte | 52 ++++++++++++++---------------- 2 files changed, 38 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte index dfdb9b6f..cdeff6b7 100644 --- a/src/lib/Settings/Categories/Display.svelte +++ b/src/lib/Settings/Categories/Display.svelte @@ -184,22 +184,20 @@ {/if} -{#if browser && window.matchMedia('(display-mode: standalone)').matches} -

+

- - - Periodically check and display recent AniList notifications as a native platform notification -
- This may be useful for users who have installed due.moe as a PWA or on mobile devices, since AniList - has no official mobile app. -
-
-{/if} + + + Periodically check for and send recent AniList notifications as native platform notifications +
+ This may be useful for users who have installed due.moe as a PWA or using on mobile devices, since + AniList has no official mobile app. +
+

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a34b24b1..d6575ded 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -111,36 +111,34 @@ }); if ($settings.displayAniListNotifications && data.user !== undefined) { - if ('Notification' in window && navigator.serviceWorker) Notification.requestPermission(); - - if (window.matchMedia('(display-mode: standalone)').matches) { - notificationInterval = setInterval(async () => { - try { - const recentNotifications = await notifications(data.user.accessToken); - - if ( - recentNotifications && - recentNotifications.length > 0 && - recentNotifications[0].id > lastNotificationId && - new Date(recentNotifications[0].createdAt * 1000).getTime() + 30000 > - new Date().getTime() - ) { - lastNotificationId = recentNotifications[0].id; - - if ('serviceWorker' in navigator && navigator.serviceWorker.controller) { - navigator.serviceWorker.ready.then((registration) => { - registration.showNotification('due.moe', { - body: `${recentNotifications[0].user.name}${recentNotifications[0].context}`, - icon: recentNotifications[0].user.avatar.large || '/favicon-196x196.png' + if ('Notification' in window && navigator.serviceWorker) + if ((await Notification.requestPermission()) === 'granted') + notificationInterval = setInterval(async () => { + try { + const recentNotifications = await notifications(data.user.accessToken); + + if ( + recentNotifications && + recentNotifications.length > 0 && + recentNotifications[0].id > lastNotificationId && + new Date(recentNotifications[0].createdAt * 1000).getTime() + 30000 > + new Date().getTime() + ) { + lastNotificationId = recentNotifications[0].id; + + if ('serviceWorker' in navigator && navigator.serviceWorker.controller) { + navigator.serviceWorker.ready.then((registration) => { + registration.showNotification('due.moe', { + body: `${recentNotifications[0].user.name}${recentNotifications[0].context}`, + icon: recentNotifications[0].user.avatar.large || '/favicon-196x196.png' + }); }); - }); + } } + } catch (error) { + console.error(error); } - } catch (error) { - console.error(error); - } - }, 15000); - } + }, 15000); } }); -- cgit v1.2.3