문자 인증 잔여 익셉션/창 안꺼짐 fix

2026-05-21 17:54:36 +09:00
parent c4f8d939d2
commit 66687a4c73
3 changed files with 251 additions and 14 deletions
--- a/test/userfront_loading_performance_policy_test.sh
+++ b/test/userfront_loading_performance_policy_test.sh
@@ -40,9 +40,58 @@ rg -q "brotli_static\s+on;" userfront/nginx.conf || fail "nginx must serve pre-c
 rg -q "brotliCompressSync" userfront/scripts/optimize-web-build.mjs || fail "Docker build optimization must generate brotli assets"
 rg -q "modulepreload" userfront/scripts/optimize-web-build.mjs || fail "Docker build optimization must preload wasm module entrypoints"
 rg -q "canvasKitBaseUrl:\"canvaskit/\"" userfront/scripts/optimize-web-build.mjs || fail "userfront web build must force local CanvasKit instead of fetching engine resources from a CDN"
-rg -q "_flutter\.loader\.load\(\{config:\{canvasKitBaseUrl:\"canvaskit/\"\}\}\);" userfront/scripts/optimize-web-build.mjs || fail "Flutter service worker registration must be removed from cold path"
+rg -q "serviceWorkerSettings" userfront/scripts/optimize-web-build.mjs || fail "Flutter service worker registration must be preserved so deployed clients can update cached bundles"
+rg -q "serviceWorkerUrl" userfront/scripts/optimize-web-build.mjs || fail "Flutter service worker URL must be explicit so new clients register the worker"
 if rg -n "gzip|gzipSync|\\.gz" userfront/nginx.conf userfront/scripts/optimize-web-build.mjs; then
  fail "userfront web compression must be managed as brotli-only"
 fi
 rg -q "Cache-Control.*no-cache" userfront/nginx.conf || fail "HTML/app shell must use no-cache revalidation"
 rg -q "Cache-Control.*immutable" userfront/nginx.conf || fail "versioned static assets must use immutable cache"
+
+tmp_dir="$(mktemp -d)"
+trap 'rm -rf "$tmp_dir"' EXIT
+
+cat > "$tmp_dir/flutter_bootstrap.js" <<'BOOTSTRAP'
+const serviceWorkerVersion = "e2e-policy";
+_flutter.buildConfig = {
+  builds: [
+    {
+      mainJsPath: "main.dart.js",
+      mainWasmPath: "main.dart.wasm",
+      jsSupportRuntimePath: "main.dart.mjs",
+    },
+  ],
+};
+_flutter.loader.load({
+  serviceWorkerSettings: {
+    serviceWorkerVersion: serviceWorkerVersion,
+  }
+});
+BOOTSTRAP
+cat > "$tmp_dir/index.html" <<'HTML'
+<!doctype html>
+<html>
+  <head></head>
+  <body><script src="flutter_bootstrap.js"></script></body>
+</html>
+HTML
+printf 'console.log("js");' > "$tmp_dir/main.dart.js"
+printf 'console.log("mjs");' > "$tmp_dir/main.dart.mjs"
+printf 'wasm' > "$tmp_dir/main.dart.wasm"
+
+node userfront/scripts/optimize-web-build.mjs "$tmp_dir" >/dev/null
+node userfront/scripts/optimize-web-build.mjs "$tmp_dir" >/dev/null
+
+rg -q "serviceWorkerSettings" "$tmp_dir/flutter_bootstrap.js" || fail "optimized bootstrap must keep Flutter service worker settings"
+rg -q "serviceWorkerUrl" "$tmp_dir/flutter_bootstrap.js" || fail "optimized bootstrap must register the Flutter service worker on new clients"
+rg -q "canvasKitBaseUrl:\"canvaskit/\"" "$tmp_dir/flutter_bootstrap.js" || fail "optimized bootstrap must keep local CanvasKit config"
+rg -q "caches\\.open" "$tmp_dir/flutter_service_worker.js" || fail "optimized service worker must cache built assets"
+rg -q "networkFirst" "$tmp_dir/flutter_service_worker.js" || fail "optimized service worker must revalidate app shell assets"
+if rg -n "unregister\\(" "$tmp_dir/flutter_service_worker.js"; then
+  fail "optimized service worker must not unregister itself"
+fi
+test "$(rg -o "serviceWorkerUrl" "$tmp_dir/flutter_bootstrap.js" | wc -l)" -eq 1 || fail "optimized bootstrap must not duplicate serviceWorkerUrl"
+test "$(rg -o "config:\\{canvasKitBaseUrl" "$tmp_dir/flutter_bootstrap.js" | wc -l)" -eq 1 || fail "optimized bootstrap must not duplicate loader config"
+rg -q "main\\.dart\\.[0-9a-f]{12}\\.mjs" "$tmp_dir/index.html" || fail "optimized index must preload hashed module entrypoint"
+test ! -e "$tmp_dir/main.dart.mjs" || fail "plain module entrypoint must be renamed after hashing"
+test "$(find "$tmp_dir" -maxdepth 1 -name 'main.dart.*.mjs' | wc -l)" -eq 1 || fail "exactly one hashed module entrypoint must be produced"
--- a/userfront-e2e/tests/login-performance-budget.spec.ts
+++ b/userfront-e2e/tests/login-performance-budget.spec.ts
@@ -138,12 +138,6 @@ test.describe('UserFront login performance budget', () => {
    expect(warm.transferredBytes).toBeLessThanOrEqual(1_000_000);
    expectNoDuplicateStaticRequests(cold);
    expectNoDuplicateStaticRequests(warm);
-    expect(
-      cold.requestedUrls.some((url) =>
-        url.endsWith('/flutter_service_worker.js'),
-      ),
-    ).toBe(false);
-
    const cacheControlByPath = new Map([
      ...cold.cacheControlByPath,
      ...warm.cacheControlByPath,
@@ -155,6 +149,41 @@ test.describe('UserFront login performance budget', () => {

    const appShellCache = cacheControlByPath.get('/ko/signin') ?? '';
    expect(appShellCache).toContain('no-cache');
+    const serviceWorkerState = await page.evaluate(async () => {
+      if (!('serviceWorker' in navigator)) {
+        return {
+          available: false,
+          secure: window.isSecureContext,
+          scriptUrl: '',
+        };
+      }
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      const registration = registrations[0];
+      return {
+        available: true,
+        secure: window.isSecureContext,
+        count: registrations.length,
+        controller: navigator.serviceWorker.controller?.scriptURL ?? '',
+        scriptUrl:
+          registration?.active?.scriptURL ??
+          registration?.waiting?.scriptURL ??
+          registration?.installing?.scriptURL ??
+          '',
+      };
+    });
+    if (testInfo.project.name.includes('mobile')) {
+      expect(new URL(serviceWorkerState.scriptUrl).pathname).toBe(
+        '/flutter_service_worker.js',
+      );
+      const serviceWorkerResponse = await page.context().request.get(
+        new URL('/flutter_service_worker.js', page.url()).toString(),
+      );
+      expect(serviceWorkerResponse.headers()['cache-control'] ?? '').toContain(
+        'no-cache',
+      );
+    } else {
+      expect(serviceWorkerState.scriptUrl).toBe('');
+    }

    expect(cold.durationMs).toBeGreaterThanOrEqual(0);
  });
--- a/userfront/scripts/optimize-web-build.mjs
+++ b/userfront/scripts/optimize-web-build.mjs
@@ -8,7 +8,7 @@ import {
  unlinkSync,
  writeFileSync,
 } from 'node:fs';
-import { basename, extname, join } from 'node:path';
+import { basename, extname, join, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { dirname } from 'node:path';

@@ -39,6 +39,7 @@ const compressibleExtensions = new Set([
  '.toml',
  '.wasm',
 ]);
+const serviceWorkerPath = join(buildDir, 'flutter_service_worker.js');

 if (!existsSync(bootstrapPath)) {
  throw new Error(`Missing Flutter bootstrap file: ${bootstrapPath}`);
@@ -84,17 +85,30 @@ for (const fileName of readdirSync(buildDir)) {
  }
 }

+const canvasKitConfig = 'config:{canvasKitBaseUrl:"canvaskit/"}';
+
 bootstrap = bootstrap.replace(
-  /_flutter\.loader\.load\(\{\s*serviceWorkerSettings:\s*\{[\s\S]*?\}\s*\}\);/,
-  '_flutter.loader.load({config:{canvasKitBaseUrl:"canvaskit/"}});',
+  /_flutter\.loader\.load\(\{\s*serviceWorkerSettings:\s*(\{[^{}]*\})\s*,\s*config:\s*\{[\s\S]*?serviceWorkerUrl[\s\S]*?\}\s*,\s*config:\s*\{[^}]*\}\s*\}\);/g,
+  (_match, settings) =>
+    `_flutter.loader.load({serviceWorkerSettings:${ensureServiceWorkerUrl(settings)},${canvasKitConfig}});`,
 );
 bootstrap = bootstrap.replace(
-  /_flutter\.loader\.load\(\);/,
-  '_flutter.loader.load({config:{canvasKitBaseUrl:"canvaskit/"}});',
+  /_flutter\.loader\.load\(\{\s*serviceWorkerSettings:\s*(\{[^{}]*\})\s*,\s*config:\s*\{[^}]*\}\s*\}\);/g,
+  (_match, settings) =>
+    `_flutter.loader.load({serviceWorkerSettings:${ensureServiceWorkerUrl(settings)},${canvasKitConfig}});`,
 );
 bootstrap = bootstrap.replace(
-  /_flutter\.loader\.load\(\{config:\{[^}]*\}\}\);/,
-  '_flutter.loader.load({config:{canvasKitBaseUrl:"canvaskit/"}});',
+  /_flutter\.loader\.load\(\{\s*serviceWorkerSettings:\s*(\{[^{}]*\})\s*\}\);/g,
+  (_match, settings) =>
+    `_flutter.loader.load({serviceWorkerSettings:${ensureServiceWorkerUrl(settings)},${canvasKitConfig}});`,
+);
+bootstrap = bootstrap.replace(
+  /_flutter\.loader\.load\(\);/g,
+  `_flutter.loader.load({${canvasKitConfig}});`,
+);
+bootstrap = bootstrap.replace(
+  /_flutter\.loader\.load\(\{config:\{[^}]*\}\}\);/g,
+  `_flutter.loader.load({${canvasKitConfig}});`,
 );
 writeFileSync(bootstrapPath, bootstrap);

@@ -140,6 +154,8 @@ if (existsSync(indexPath)) {
  writeFileSync(indexPath, index);
 }

+writeFileSync(serviceWorkerPath, createServiceWorker());
+
 for (const filePath of walk(buildDir)) {
  if (filePath.endsWith('.br')) {
    continue;
@@ -184,4 +200,147 @@ function findEntrypointSource(entrypoint, bootstrap) {
  return match?.[0] ?? null;
 }

+function createServiceWorker() {
+  const assets = [];
+  const versionHash = createHash('sha256');
+
+  for (const filePath of walk(buildDir)) {
+    if (filePath.endsWith('.br') || filePath === serviceWorkerPath) {
+      continue;
+    }
+    const extension = extname(filePath);
+    if (
+      !compressibleExtensions.has(extension) &&
+      !['.ico', '.png', '.webp', '.woff', '.woff2'].includes(extension)
+    ) {
+      continue;
+    }
+
+    const assetPath = `/${relative(buildDir, filePath).replaceAll('\\', '/')}`;
+    assets.push(assetPath);
+    versionHash.update(assetPath);
+    versionHash.update(readFileSync(filePath));
+  }
+
+  assets.sort();
+  const version = versionHash.digest('hex').slice(0, 16);
+  const serializedAssets = JSON.stringify(assets, null, 2);
+
+  return `'use strict';
+
+const CACHE_NAME = 'baron-userfront-${version}';
+const CORE_ASSETS = ${serializedAssets};
+const NETWORK_FIRST_PATHS = new Set([
+  '/',
+  '/index.html',
+  '/flutter_bootstrap.js',
+  '/version.json',
+  '/manifest.json',
+]);
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => cache.addAll(CORE_ASSETS))
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key !== CACHE_NAME)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const request = event.request;
+  if (request.method !== 'GET') return;
+
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin || url.pathname.startsWith('/api/')) {
+    return;
+  }
+
+  if (isAppShellPath(url) || NETWORK_FIRST_PATHS.has(url.pathname)) {
+    event.respondWith(networkFirst(request, '/index.html'));
+    return;
+  }
+
+  event.respondWith(cacheFirst(request));
+});
+
+function isAppShellPath(url) {
+  return !url.pathname.split('/').pop().includes('.');
+}
+
+async function networkFirst(request, fallbackPath) {
+  const cache = await caches.open(CACHE_NAME);
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      await cache.put(request, response.clone());
+    }
+    return response;
+  } catch (error) {
+    return (
+      (await cache.match(request)) ??
+      (fallbackPath ? await cache.match(fallbackPath) : undefined) ??
+      Response.error()
+    );
+  }
+}
+
+async function cacheFirst(request) {
+  const cache = await caches.open(CACHE_NAME);
+  const cached = await cache.match(request);
+  if (cached) return cached;
+  const response = await fetch(request);
+  if (response.ok) {
+    await cache.put(request, response.clone());
+  }
+  return response;
+}
+`;
+}
+
+function ensureServiceWorkerUrl(settings) {
+  const serviceWorkerUrl = `"/flutter_service_worker.js?v=" + ${serviceWorkerVersionExpression(settings)}`;
+  if (/serviceWorkerUrl\s*:/.test(settings)) {
+    return settings.replace(
+      /serviceWorkerUrl\s*:\s*[^,\n}]+,?/,
+      `serviceWorkerUrl: ${serviceWorkerUrl},`,
+    );
+  }
+
+  const closingBraceIndex = settings.lastIndexOf('}');
+  if (closingBraceIndex < 0) {
+    return settings;
+  }
+  const beforeClosing = settings.slice(0, closingBraceIndex).trimEnd();
+  const afterClosing = settings.slice(closingBraceIndex);
+  const separator =
+    beforeClosing.endsWith('{') || beforeClosing.endsWith(',') ? '' : ',';
+  return `${beforeClosing}${separator}
+    serviceWorkerUrl: ${serviceWorkerUrl},
+  ${afterClosing}`;
+}
+
+function serviceWorkerVersionExpression(settings) {
+  const match = settings.match(/serviceWorkerVersion\s*:\s*([^,\n}]+)/);
+  return (
+    match?.[1]?.replace(/\/\*[\s\S]*?\*\//g, '').trim() ??
+    'serviceWorkerVersion'
+  );
+}
+
 console.log(`[userfront] optimized ${basename(buildDir)} with hashed entrypoints and brotli assets`);