iOS Detection #36, #37, #88, #93

src/lib/helpers/mobileDetect.js

@@ -44,8 +44,8 @@ export const browserDetect = () => {
 
 export const isSafari = () => {
 	const userAgent = window.navigator?.userAgent?.toLowerCase();
-	const chromeFn = window.chrome;
-	const chromeAgent = userAgent?.indexOf('chrome');
-	const safariAgent = userAgent?.match('safari') && !chromeAgent && !chromeFn;
-	return safariAgent;
+	const safariAgent = /^((?!chrome|android).)*safari/i.test(userAgent);
+	const iosDevice = /ipad|iphone|ipod|macintosh/.test(userAgent) && !window?.MSStream;
+	const isSafariBrowser = safariAgent || iosDevice;
+	return isSafariBrowser;
 };

src/routes/_index/ModalWelcome.svelte

@@ -43,9 +43,10 @@
 		{#if !browserDetect().isSupported && isPWA}
 			<div class="updates adExpired">
 				<strong>
-					We highly recommend you to install
-					<span style="display: inline; color:#5ab3ff"> Google Chrome </span>
-					First, Maybe some features won't work properly for now!
+					We highly recommend installing <span style="display: inline; color:#5ab3ff">
+						Google Chrome
+					</span>
+					for optimal performance as some features may not be fully supported on.
 				</strong>
 			</div>
 		{:else if dateExpired && dateExpired !== 'none'}

src/routes/_wish/wish-result/_meteor.svelte

@@ -37,9 +37,11 @@
 		});
 
 		videoContent.addEventListener('error', () => {
-			const message = $t('wish.result.meteorFailed');
+			const statusCode = videoContent.error.message;
+			const message = `${$t('wish.result.meteorFailed')} "${statusCode}" - ${videoContent.src}`;
 			pushToast({ message });
-			console.error('Failed to load the Falling Star Animation', videoContent.error);
+
+			console.error(`Failed to load the Falling Star Animation`);
 			return meteorEnd();
 		});
 	});