早年山姆鍋若要在網頁裡塞個「立刻看結果」的框，直覺常是：把 HTML 字串塞進 iframe 的 srcdoc，再想辦法改寫模組路徑。聽起來省事，做起來卻像每天跟瀏覽器談判。
遊樂場（/playgrounds/）後來選了另一條路：畫布是同源 iframe，網址長得像真的站——/playgrounds/canvas/<沙盒>/…。殼頁把當前沙盒快照丟給 Service Worker，SW 在記憶體裡依路徑回 Response。相對路徑的 ESM、CSS、圖，走瀏覽器原生解析，不必每次手改 import。
目錄
預覽稿的問題
srcdoc 適合示範片段。一旦多檔、要 import './x.js'、還想跟真正部署後的行為接近，改寫規則就開始長腫瘤。快取語意也怪：到底算不算「從網路來的資源」？
山姆鍋要的不是簡報上的截圖框，而是：這份單頁小程式（SAM）在畫布上的行為，盡量像你之後丟到靜態託管時的行為。所以乾脆讓它「像從網路下載」。
信任模型順便寫死
畫布跟殼頁同源。這是本機實驗場，不是多租戶硬隔離。沙盒腳本碰得到同 origin 該碰的東西——山姆鍋接受這個取捨，也因此殼頁不放秘密。
不支援 Service Worker 時，畫布就該明確失敗，而不是默默退回 srcdoc 假裝同一套世界。兩套主路徑並存，除錯成本會吃掉所有酷炫感。
結語
若你也在做瀏覽器裡的實驗場，山姆鍋想分享的只是：先問「預覽」要不要長得像真站。答案若是要，SW 虛擬站台這種看起來重的作法，有時反而比較輕——因為你不再維護一坨模組改寫器。
場地在遊樂場，免費亂試；你有更省事的預覽招數，下面留言區歡迎打臉。