四階段都執行單頁 memory adapter。它用來練習 Firebase 介面責任,不是 Firebase 連線證據,不會跨分頁或跨裝置同步。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 訂閱主畫面並留下 adapter trace | DONE-01 | script.js | createMemoryAdapter()、recordTrace()、startListening() | 初始 snapshot 到達畫面 subscriber,trace 顯示 subscribe 與 notify |
| TASK-02 安全渲染並管理第二 Console subscriber | DONE-02 | script.js | createMessageItem()、renderMessages()、startConsoleSubscriber()、stopConsoleSubscriber() | 留言是純文字,第二 subscriber 可訂閱、收到 snapshot 並取消 |
| TASK-03 模擬訂閱失敗、復原重試並新增留言 | DONE-03 | script.js | failNextSubscribe()、startListening() 錯誤分支、retry 事件、addMessage() | 失敗保留舊留言,retry 後新增資料同時通知畫面與 Console |
四階段差異
starter/:提供 adapter、固定 DOM 與操作按鈕,三個 TASK 保留。checkpoint-1/:完成主畫面訂閱、取消與 trace;渲染仍保留提示。checkpoint-2/:完成安全 DOM 渲染,並讓第二 Console subscriber 可開啟與 unsubscribe。solution/:完成新增留言、可控訂閱失敗、錯誤狀態、recovery/retry 與無幽靈 listener 驗收。
標準驗收腳本
- 重新整理 Solution,trace 顯示主畫面訂閱與初始通知。
- 開啟 Console subscriber,新增一筆留言;畫面、Console 與 trace 都有同一次更新。
- 取消 Console subscriber 後再新增;畫面仍更新,Console 不再收到 snapshot,trace 顯示 unsubscribe。
- 按「模擬下次訂閱失敗」;狀態變錯誤,舊留言未被清空,trace 沒有殘留一個失敗的主畫面 listener。
- 按「重試訂閱」後回到成功狀態;輸入
<img src=x onerror=alert(1)>,畫面只顯示純文字。
Live 延伸邊界
只有備妥 Firebase 帳號、project、Web app config、Realtime Database、Emulator/最小權限 Rules 與網路,並實際以 onValue / push 連到同一 database path,才可另做雙視窗 Live 驗收。