feat(layout): browser notifications

2 files changed, 38 insertions, 42 deletions

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 @@
 	</button>
 {/if}
 
-{#if browser && window.matchMedia('(display-mode: standalone)').matches}
-	<p />
+<p />
 
-	<SettingCheckboxToggle
-		setting="displayAniListNotifications"
-		text={$locale().settings.display.categories.motionAndAccessibility.fields
-			.enableAniListNotifications}
-	>
-		<SettingHint lineBreak>
-			Periodically check and display recent AniList notifications as a native platform notification
-			<br />
-			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.
-		</SettingHint>
-	</SettingCheckboxToggle>
-{/if}
+<SettingCheckboxToggle
+	setting="displayAniListNotifications"
+	text={$locale().settings.display.categories.motionAndAccessibility.fields
+		.enableAniListNotifications}
+>
+	<SettingHint lineBreak>
+		Periodically check for and send recent AniList notifications as native platform notifications
+		<br />
+		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.
+	</SettingHint>
+</SettingCheckboxToggle>
 
 <p />
 
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);
 		}
 	});