fix(frontend): WebKitブラウザー上でも「デバイスの画面を常にオンにする」機能が効くように (#12484)

* fix(frontend): WebKitブラウザー上でもkeepScreenOnが効くように

* chore: add comment

1 files changed, 16 insertions, 12 deletions

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 594fe64230..6e216a78b4 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -202,20 +202,24 @@ export async function common(createVue: () => App<Element>) {
 		}
 	}, { immediate: true });
 
-	if (defaultStore.state.keepScreenOn) {
-		if ('wakeLock' in navigator) {
-			navigator.wakeLock.request('screen')
-			.then(() => {
-				document.addEventListener('visibilitychange', async () => {
-					if (document.visibilityState === 'visible') {
-						navigator.wakeLock.request('screen');
-					}
-				});
-			})
+	// Keep screen on
+	const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
+		if (document.visibilityState === 'visible') {
+			navigator.wakeLock.request('screen');
+		}
+	});
+	if (defaultStore.state.keepScreenOn && 'wakeLock' in navigator) {
+		navigator.wakeLock.request('screen')
+			.then(onVisibilityChange)
 			.catch(() => {
-				// If Permission fails on an AppleDevice such as Safari
+				// On WebKit-based browsers, user activation is required to send wake lock request
+				// https://webkit.org/blog/13862/the-user-activation-api/
+				document.addEventListener(
+					'click',
+					() => navigator.wakeLock.request('screen').then(onVisibilityChange),
+					{ once: true },
+				);
 			});
-		}
 	}
 
 	//#region Fetch user