fix: Webkitのキーボードに伴う位置ズレバグをfocusin/outスクロールリセットと背景色同期により根本解決(v12/v15)

Author: nnnSMM

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "launcherg-pwa-shell-mobile-pwa-v14";
+const CACHE_NAME = "launcherg-pwa-shell-mobile-pwa-v15";
 const PRECACHE_ASSETS = Array.isArray(self.__LAUNCHERG_PWA_ASSETS__)
   ? self.__LAUNCHERG_PWA_ASSETS__
   : [];

src/lib/mobileCompanionInstall.test.ts

@@ -8,7 +8,7 @@ import {
 describe("createMobileCompanionInstallStartUrl", () => {
   it("keeps the room in the installed launch URL", () => {
     const query = new URLSearchParams({
-      client: "mobile-pwa-v11",
+      client: "mobile-pwa-v12",
       mode: "library",
       roomId: "room-1",
       gameId: "42",
@@ -21,7 +21,7 @@ describe("createMobileCompanionInstallStartUrl", () => {
         query,
       ),
     ).toBe(
-      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&mode=library&roomId=room-1&gameId=42&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v12&mode=library&roomId=room-1&gameId=42&authToken=short-lived-token",
     );
   });
 
@@ -84,15 +84,15 @@ describe("configureMobileCompanionInstallManifest", () => {
     const link = document.querySelector<HTMLLinkElement>('link[rel="manifest"]');
 
     expect(startUrl).toBe(
-      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&mode=controller&roomId=room-1&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v12&mode=controller&roomId=room-1&authToken=short-lived-token",
     );
     expect(link?.href).toContain("data:application/manifest+json");
     expect(link?.dataset.launchergDynamicCompanionManifest).toBe("true");
     const manifest = JSON.parse(
       decodeURIComponent(link?.href.split(",")[1] ?? ""),
     );
     expect(manifest.start_url).toBe(
-      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&mode=controller&roomId=room-1&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v12&mode=controller&roomId=room-1&authToken=short-lived-token",
     );
   });
 });

src/lib/mobileCompanionUrl.test.ts

@@ -9,7 +9,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/companion.html?client=mobile-pwa-v11&mode=controller&roomId=room-1",
+      "https://example.test/companion.html?client=mobile-pwa-v12&mode=controller&roomId=room-1",
     );
   });
 
@@ -20,7 +20,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/Launcherg-Mod/companion.html?client=mobile-pwa-v11&mode=controller&roomId=room-1",
+      "https://example.test/Launcherg-Mod/companion.html?client=mobile-pwa-v12&mode=controller&roomId=room-1",
     );
   });
 
@@ -34,7 +34,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/companion.html?client=mobile-pwa-v11&mode=controller&roomId=room-1&gameId=42&seiyaUrl=https%3A%2F%2Fseiya.example%2Fgame%3Fid%3D42&authToken=token-1",
+      "https://example.test/companion.html?client=mobile-pwa-v12&mode=controller&roomId=room-1&gameId=42&seiyaUrl=https%3A%2F%2Fseiya.example%2Fgame%3Fid%3D42&authToken=token-1",
     );
   });
 
@@ -46,7 +46,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/companion.html?client=mobile-pwa-v11&mode=library&roomId=room-1",
+      "https://example.test/companion.html?client=mobile-pwa-v12&mode=library&roomId=room-1",
     );
   });
 });

src/lib/mobileCompanionUrl.ts

@@ -3,7 +3,7 @@ const configuredMobileCompanionOrigin =
 
 export const MOBILE_COMPANION_ORIGIN =
   configuredMobileCompanionOrigin || "https://nnnsmm.github.io/Launcherg-Mod/";
-export const MOBILE_COMPANION_CLIENT_VERSION = "mobile-pwa-v11";
+export const MOBILE_COMPANION_CLIENT_VERSION = "mobile-pwa-v12";
 export const SKYWAY_CONNECT_ENDPOINT = "https://launcherg.ryoha.moe/connect";
 
 export type MobileCompanionUrlParams = {

src/views/MobileCompanion.svelte

@@ -890,21 +890,32 @@
     lastActionText = "メモを同期しました";
   };
 
+  const handleViewportReset = () => {
+    setTimeout(() => {
+      window.scrollTo(0, 0);
+    }, 50);
+  };
+
   onMount(() => {
     const htmlEl = document.documentElement;
     const bodyEl = document.body;
     const appEl = document.querySelector("#app") as HTMLElement | null;
     if (htmlEl) {
       htmlEl.style.height = "100dvh";
+      htmlEl.style.backgroundColor = "#151515";
     }
     if (bodyEl) {
       bodyEl.style.height = "100dvh";
+      bodyEl.style.backgroundColor = "#151515";
     }
     if (appEl) {
       appEl.style.overflow = "hidden";
       appEl.style.height = "100dvh";
     }
 
+    document.addEventListener("focusin", handleViewportReset);
+    document.addEventListener("focusout", handleViewportReset);
+
     void getAllCachedImages().then((cached) => {
       cached.forEach(({ path, blob }) => {
         const imageUrl = URL.createObjectURL(blob);
@@ -933,15 +944,20 @@
     const appEl = document.querySelector("#app") as HTMLElement | null;
     if (htmlEl) {
       htmlEl.style.height = "";
+      htmlEl.style.backgroundColor = "";
     }
     if (bodyEl) {
       bodyEl.style.height = "";
+      bodyEl.style.backgroundColor = "";
     }
     if (appEl) {
       appEl.style.overflow = "";
       appEl.style.height = "";
     }
 
+    document.removeEventListener("focusin", handleViewportReset);
+    document.removeEventListener("focusout", handleViewportReset);
+
     cleanupCallbacks.forEach((callback) => callback());
     cleanupCallbacks = [];
     objectUrls.forEach((url) => URL.revokeObjectURL(url));