@m1kapp/kit 0.0.48 → 0.0.50

package/README.md

@@ -555,6 +555,9 @@ npx m1kkit pwa --bg=#0f0f1a # 앱 첫 화면 색과 맞춘다(다르면 열릴
 Vite 는 `index.html` `<head>` 에 태그가 들어가고(다시 돌리면 교체), Next 는 출력된 태그를 layout 에 붙이세요.
 서비스워커는 localhost 에선 등록하지 않습니다 — 확인은 배포 뒤에.
 
+갱신: 온라인으로 열면 매번 새 배포(페이지는 네트워크 먼저). 켜 둔 채 다시 켜는 앱은 돌아올 때 30분에 한 번 새 배포를 확인해 새로고침합니다.
+`sw.js` 는 배포마다 바꿀 필요가 없고, kit 을 올린 뒤 `npx m1kkit pwa` 를 다시 돌리면 그 판의 서비스워커로 바뀝니다.
+
 ### 폰트 & 이모지
 
 ```tsx

package/bin/pwa.mjs

@@ -44,22 +44,38 @@ function write(rel, data) {
 /* ─── 서비스워커 ─── */
 write("sw.js", `// m1kkit pwa 가 만든 파일 — 오프라인에서도 앱이 열리게 한다. 다시 만들려면 npx m1kkit pwa
 // 페이지: 네트워크 먼저, 3초 안에 안 오거나 끊겨 있으면 저장본(여행지 로밍처럼 느린 망에서도 바로 뜬다).
+//   그래서 새 배포는 온라인이면 다음 실행에 바로 보인다. 이 파일은 배포마다 바꿀 필요가 없다.
 // JS·CSS·폰트·이미지: 저장본을 바로 주고 뒤에서 새로 받아 둔다. API(fetch) 요청은 건드리지 않는다.
-// ponytail: 캐시 이름이 하나라 배포마다 옛 해시 파일이 조금씩 쌓인다 — 커지면 activate 에서 정리
+// ponytail: 캐시 이름이 하나라 배포마다 옛 해시 파일이 조금씩 쌓인다 — 커지면 savePage 에서 안 쓰는 것 정리
 const CACHE = "m1kkit-pwa";
 const ASSET = ["script", "style", "font", "image", "manifest"];
 
+// SPA 호스팅(Vercel rewrites 등)은 없는 파일에도 index.html 을 200 으로 준다.
+// 그걸 JS 자리에 담으면 다음 오프라인 실행이 하얗게 뜬다 — 페이지가 아닌데 HTML 이면 안 담는다.
+const keepable = (req, res) => res.type === "opaque" ||
+  (res.ok && (req.mode === "navigate" || !(res.headers.get("content-type") ?? "").includes("text/html")));
+
+// 페이지는 그 페이지가 부르는 JS·CSS 를 다 담은 뒤에 담는다 — 저장된 페이지가 없는 파일을 가리키는 순간이 없게.
+// 하나라도 못 받으면 페이지는 옛 판을 그대로 둔다(옛 판의 파일은 남아 있다).
+async function savePage(c, key, res) {
+  const html = await res.clone().text();
+  const own = [...html.matchAll(/(?:src|href)="(\\/[^"/][^"]*)"/g)].map((m) => new Request(m[1]));
+  // CDN 폰트 CSS 도(Pretendard·Tossface 같은) — 빠지면 오프라인에서 글꼴·국기 이모지가 바뀐다. 실패해도 페이지는 담는다
+  const cdn = [...html.matchAll(/href="(https:\\/\\/[^"]+\\.css)"/g)].map((m) => new Request(m[1], { mode: "no-cors" }));
+  const got = (req) => c.match(req, { ignoreVary: true }).then(async (hit) => {
+    if (hit) return true;
+    const r = await fetch(req).catch(() => null); // add() 는 opaque 를 거절해서 직접 담는다
+    return !!r && keepable(req, r) && c.put(req, r).then(() => true);
+  });
+  const ok = await Promise.all(own.map(got));
+  await Promise.all(cdn.map(got));
+  if (ok.every(Boolean)) await c.put(key, res);
+}
+
 self.addEventListener("install", (e) => {
   e.waitUntil((async () => {
-    const c = await caches.open(CACHE);
     const res = await fetch("/", { cache: "no-store" });
-    await c.put("/", res.clone());
-    // 첫 방문에 이미 받은 JS·CSS 도 담아 둔다 — 두 번째 실행이 바로 오프라인이어도 뜨게
-    const html = await res.text();
-    const urls = [...html.matchAll(/(?:src|href)="(\\/[^"/][^"]*)"/g)].map((m) => m[1]);
-    // CDN 폰트 CSS 도(Pretendard·Tossface 같은) — 이게 빠지면 오프라인에서 글꼴·국기 이모지가 바뀐다
-    const css = [...html.matchAll(/href="(https:\\/\\/[^"]+\\.css)"/g)].map((m) => new Request(m[1], { mode: "no-cors" }));
-    await Promise.all([...urls, ...css].map((u) => fetch(u).then((r) => (r.ok || r.type === "opaque") && c.put(u, r)).catch(() => {}))); // add() 는 opaque 를 거절한다
+    if (res.ok) await savePage(await caches.open(CACHE), "/", res);
     await self.skipWaiting();
   })());
 });
@@ -69,15 +85,19 @@ self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()));
 self.addEventListener("fetch", (e) => {
   const r = e.request;
   if (r.method !== "GET" || !r.url.startsWith("http")) return;
-  if (r.mode === "navigate") return e.respondWith(page(r));
+  if (r.mode === "navigate") {
+    const net = fetch(r);
+    // 복사는 응답이 화면으로 가기 전에, 같은 차례에서 — 늦으면 body already used
+    e.waitUntil(net.then((res) => { if (!res.ok) return; const copy = res.clone(); return caches.open(CACHE).then((c) => savePage(c, r, copy)); }).catch(() => {}));
+    return e.respondWith(page(r, net));
+  }
   const same = new URL(r.url).origin === location.origin;
   if (same ? ASSET.includes(r.destination) : r.destination === "style" || r.destination === "font") e.respondWith(stale(r));
 });
 
-async function page(r) {
+async function page(r, net) {
   const c = await caches.open(CACHE);
   const saved = () => c.match(r, { ignoreSearch: true, ignoreVary: true }).then((m) => m ?? c.match("/"));
-  const net = fetch(r).then((res) => { if (res.ok) c.put(r, res.clone()); return res; });
   const slow = new Promise((ok) => setTimeout(ok, 3000)).then(async () => (await saved()) ?? net);
   try { return await Promise.race([net, slow]); } catch { return (await saved()) ?? Response.error(); }
 }
@@ -85,7 +105,7 @@ async function page(r) {
 async function stale(r) {
   const c = await caches.open(CACHE);
   const hit = await c.match(r, { ignoreVary: true }); // Vary: Origin 서버에서 저장본을 못 찾던 것
-  const net = fetch(r).then((res) => { if (res.ok || res.type === "opaque") c.put(r, res.clone()); return res; });
+  const net = fetch(r).then((res) => { if (keepable(r, res)) c.put(r, res.clone()); return res; });
   if (!hit) return net;
   net.catch(() => {});
   return hit;
@@ -139,6 +159,7 @@ if (fs.existsSync(manifestPath)) {
 /* ─── <head> 태그 ─── */
 // apple-mobile-web-app-capable 이 없으면 iOS 가 스플래시를 아예 안 쓴다.
 // 서비스워커는 localhost 에선 안 건다 — 개발 중 HMR 이 저장본에 막히지 않게.
+// 등록 스크립트는 켜 둔 앱이 돌아올 때 새 배포를 확인한다 — 내 JS 파일 이름이 새 HTML 에 없으면 새로고침.
 const head = [
   `<!-- m1kkit:pwa -->`,
   `<meta name="apple-mobile-web-app-capable" content="yes" />`,
@@ -147,7 +168,20 @@ const head = [
   ...(title ? [`<meta name="apple-mobile-web-app-title" content="${title}" />`] : []),
   `<meta name="theme-color" content="${bg}" />`,
   ...links,
-  `<script>if ("serviceWorker" in navigator && !/^(localhost|127\\.|\\[::1\\])/.test(location.hostname)) navigator.serviceWorker.register("/sw.js");</script>`,
+  `<script>
+    if ("serviceWorker" in navigator && !/^(localhost|127\\.|\\[::1\\])/.test(location.hostname)) {
+      navigator.serviceWorker.register("/sw.js");
+      // 홈 화면 앱은 닫히지 않고 며칠씩 다시 켜지기만 한다 — 돌아올 때(30분에 한 번) 새 배포가 있으면 새로고침
+      let mine = [], checked = Date.now();
+      addEventListener("DOMContentLoaded", () => { mine = [...document.scripts].map((s) => s.getAttribute("src")).filter((s) => s && s[0] === "/"); });
+      document.addEventListener("visibilitychange", () => {
+        if (document.hidden || Date.now() - checked < 18e5) return;
+        checked = Date.now();
+        fetch(location.pathname, { cache: "no-store" }).then((r) => (r.ok ? r.text() : ""))
+          .then((html) => { if (html && mine.some((s) => !html.includes(s))) location.reload(); }, () => {});
+      });
+    }
+    </script>`,
   `<!-- /m1kkit:pwa -->`,
 ].join("\n    ");