haotool · s123104 · Jun 27, 2026
diff --git a/.changeset/threads-barcelona-inapp-ua.md b/.changeset/threads-barcelona-inapp-ua.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修復 Threads 內建瀏覽器無法顯示「在瀏覽器開啟」PWA 安裝指引與右上角動態提示
diff --git a/apps/ratewise/src/components/__tests__/PwaInstallGuide.test.tsx b/apps/ratewise/src/components/__tests__/PwaInstallGuide.test.tsx
@@ -66,11 +66,19 @@ describe('PwaInstallGuide', () => {
     );
   });
 
-  it('renders external-browser guidance inside Threads in-app browser', () => {
-    mockNavigator(
-      'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 Mobile/15E148 Threads 337.0 Instagram 337.0',
-      'iPhone',
-    );
+  it.each([
+    {
+      label: 'legacy Threads token',
+      userAgent:
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 Mobile/15E148 Threads 337.0 Instagram 337.0',
+    },
+    {
+      label: 'Barcelona iOS token (2025+ production)',
+      userAgent:
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/22H352 Barcelona 431.0.0.25.69 (iPhone13,3; iOS 18_7_8; en_US; en; scale=3.00; 1170x2532; IABMV/1; 979167741)',
+    },
+  ])('renders external-browser guidance inside Threads in-app browser: $label', ({ userAgent }) => {
+    mockNavigator(userAgent, 'iPhone');
 
     render(<PwaInstallGuide />);
     showGuide();

diff --git a/apps/ratewise/src/utils/__tests__/pwaInstallGuide.test.ts b/apps/ratewise/src/utils/__tests__/pwaInstallGuide.test.ts
@@ -42,11 +42,26 @@ describe('pwaInstallGuide environment detection', () => {
     expect(environment.shouldShowGuide).toBe(true);
   });
 
-  it('detects Threads in-app browser and still shows external-browser guide', () => {
-    const environment = getPwaInstallEnvironment({
+  it.each([
+    {
+      label: 'legacy Threads token',
       userAgent:
         'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 Mobile/15E148 Threads 337.0 Instagram 337.0',
-      platform: 'iPhone',
+    },
+    {
+      label: 'Barcelona iOS token (2025+ production)',
+      userAgent:
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/22H352 Barcelona 431.0.0.25.69 (iPhone13,3; iOS 18_7_8; en_US; en; scale=3.00; 1170x2532; IABMV/1; 979167741)',
+    },
+    {
+      label: 'Barcelona Android token',
+      userAgent:
+        'Mozilla/5.0 (Linux; Android 14; SM-S921B Build/UP1A.231005.007; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/136.0.7103.125 Mobile Safari/537.36 Barcelona 382.0.0.51.85 Android (34/14; 480dpi; 1080x2109; samsung)',
+    },
+  ])('detects Threads in-app browser: $label', ({ userAgent }) => {
+    const environment = getPwaInstallEnvironment({
+      userAgent,
+      platform: userAgent.includes('Android') ? 'Linux armv8l' : 'iPhone',
       maxTouchPoints: 5,
     });
 

diff --git a/apps/ratewise/src/utils/pwaInstallGuide.ts b/apps/ratewise/src/utils/pwaInstallGuide.ts
@@ -27,8 +27,9 @@ export interface PwaInstallEnvironment {
 }
 
 // Messenger 須先於 facebook：其 UA 含 FBAN/FB_IAB，否則會被 facebook 規則搶先命中。
+// Threads 2024+ 內建瀏覽器 UA 使用內部代號 Barcelona（非 Threads 字串）；來源：whatmyuseragent.com / udger UA list。
 const IN_APP_BROWSER_PATTERNS: [InAppBrowserKind, RegExp][] = [
-  ['threads', /\bThreads\b/i],
+  ['threads', /\b(Threads|Barcelona)\b/i],
   ['messenger', /MessengerForiOS|FB_IAB\/MESSENGER|FB_IAB\/Orca|Orca-Android/i],
   ['instagram', /\bInstagram\b/i],
   ['facebook', /\b(FBAN|FBAV|FBIOS|FB_IAB|FB4A)\b/i],

diff --git a/docs/dev/002_development_reward_penalty_log.md b/docs/dev/002_development_reward_penalty_log.md
@@ -2,7 +2,7 @@
 
 > 版本：outline-v2-ultra
 > 原則：每筆只保留日期、ID、原因、解法。
-> 本次分數變化：+1（reward 1、penalty 0、neutral 0）｜累計總分：+78
+> 本次分數變化：+1（reward 1、penalty 0、neutral 0）｜累計總分：+79
 
 ## 新增模板（4 行）
 
@@ -13,6 +13,11 @@
 
 ## 條目（新→舊）
 
+- 日期：2026-06-28
+- ID：reward-threads-barcelona-inapp-ua
+- 原因：Threads 2024+ 內建瀏覽器 UA 改用 Barcelona 代號，僅匹配 Threads 字串時 PWA 安裝指引與右上角動畫不顯示
+- 解法：pwaInstallGuide SSOT 補 Barcelona token，並以 production UA 樣本覆蓋 iOS/Android 單元測試
+
 - 日期：2026-06-27
 - ID：reward-cold-start-multi-hydration-fallback
 - 原因：RememberedHomeRoute 僅依 hasHydrated/onFinishHydration 設 hydrated，SSG/CSR 生產環境 store 已 merge persist 但回呼未觸發，multi 冷啟動無法還原