fix: モバイル連携画面の下部余白のブラウザ/PWA切り分け最適化対応(v11/v14)

Author: nnnSMM

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "launcherg-pwa-shell-mobile-pwa-v13";
+const CACHE_NAME = "launcherg-pwa-shell-mobile-pwa-v14";
 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-v10",
+      client: "mobile-pwa-v11",
       mode: "library",
       roomId: "room-1",
       gameId: "42",
@@ -21,7 +21,7 @@ describe("createMobileCompanionInstallStartUrl", () => {
         query,
       ),
     ).toBe(
-      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v10&mode=library&roomId=room-1&gameId=42&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&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-v10&mode=controller&roomId=room-1&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&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-v10&mode=controller&roomId=room-1&authToken=short-lived-token",
+      "https://example.test/Launcherg-Mod/#/companion?client=mobile-pwa-v11&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-v10&mode=controller&roomId=room-1",
+      "https://example.test/companion.html?client=mobile-pwa-v11&mode=controller&roomId=room-1",
     );
   });
 
@@ -20,7 +20,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/Launcherg-Mod/companion.html?client=mobile-pwa-v10&mode=controller&roomId=room-1",
+      "https://example.test/Launcherg-Mod/companion.html?client=mobile-pwa-v11&mode=controller&roomId=room-1",
     );
   });
 
@@ -34,7 +34,7 @@ describe("createMobileCompanionUrl", () => {
     });
 
     expect(url).toBe(
-      "https://example.test/companion.html?client=mobile-pwa-v10&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-v11&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-v10&mode=library&roomId=room-1",
+      "https://example.test/companion.html?client=mobile-pwa-v11&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-v10";
+export const MOBILE_COMPANION_CLIENT_VERSION = "mobile-pwa-v11";
 export const SKYWAY_CONNECT_ENDPOINT = "https://launcherg.ryoha.moe/connect";
 
 export type MobileCompanionUrlParams = {

src/views/MobileCompanion.svelte

@@ -891,10 +891,18 @@
   };
 
   onMount(() => {
+    const htmlEl = document.documentElement;
+    const bodyEl = document.body;
     const appEl = document.querySelector("#app") as HTMLElement | null;
+    if (htmlEl) {
+      htmlEl.style.height = "100dvh";
+    }
+    if (bodyEl) {
+      bodyEl.style.height = "100dvh";
+    }
     if (appEl) {
       appEl.style.overflow = "hidden";
-      appEl.style.height = "100%";
+      appEl.style.height = "100dvh";
     }
 
     void getAllCachedImages().then((cached) => {
@@ -920,7 +928,15 @@
   });
 
   onDestroy(() => {
+    const htmlEl = document.documentElement;
+    const bodyEl = document.body;
     const appEl = document.querySelector("#app") as HTMLElement | null;
+    if (htmlEl) {
+      htmlEl.style.height = "";
+    }
+    if (bodyEl) {
+      bodyEl.style.height = "";
+    }
     if (appEl) {
       appEl.style.overflow = "";
       appEl.style.height = "";
@@ -1328,14 +1344,14 @@
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 14px 14px calc(92px + env(safe-area-inset-bottom, 0px));
+    padding: 14px 14px 24px;
     display: grid;
     align-content: start;
     gap: 14px;
   }
 
   .content.controller-mode {
-    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: 24px;
   }
 
   .section,
@@ -1918,20 +1934,22 @@
   }
 
   .bottom-nav {
-    position: fixed;
-    left: 50%;
-    bottom: 0;
-    transform: translateX(-50%);
-    width: min(620px, 100vw);
-    height: calc(72px + env(safe-area-inset-bottom, 0px));
+    width: 100%;
+    height: 72px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    padding-bottom: env(safe-area-inset-bottom, 0px);
     border-top: 1px solid rgb(255 255 255 / 0.1);
     background: rgb(25 25 25 / 0.96);
     backdrop-filter: blur(14px);
   }
 
+  @media (display-mode: standalone) {
+    .bottom-nav {
+      height: calc(60px + env(safe-area-inset-bottom, 0px));
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+  }
+
   .bottom-nav button {
     display: flex;
     flex-direction: column;