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

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`);