四階段都執行單頁 memory adapter。它用來練習 Firebase 介面責任,不是 Firebase 連線證據,不會跨分頁或跨裝置同步。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | script.js | createMemoryAdapter()、recordTrace()、startListening() | 主畫面 subscriber 收到初始 snapshot,trace 顯示 subscribe 與 notify |
| TASK-02 | DONE-02 | script.js | createMessageItem()、renderMessages()、startConsoleSubscriber()、stopConsoleSubscriber() | 留言以純文字渲染,Console subscriber 可訂閱並可 unsubscribe |
| TASK-03 | DONE-03 | script.js | failNextSubscribe()、startListening() 錯誤分支、retry 事件、addMessage() | 失敗時保留舊留言且無幽靈 listener,retry 後畫面與 Console subscriber 同時收到新 snapshot |
四階段差異
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 驗收。