可以,只要頁面已經載入。解析器、預覽、工具列、字數統計、自動儲存和所有匯出方式,全都是隨頁面一起下載、之後在你機器上執行的 JavaScript。打到一半切到飛航模式,什麼都不會變:預覽照樣逐鍵更新,下載按鈕照樣產出檔案,因為那些檔案是在你的瀏覽器裡組出來的。
現在連重新載入都撐得住。第一次造訪時,Service Worker 會安裝並快取編輯器的骨架:頁面本身、樣式表、網頁字型與腳本。之後就算完全沒有網路,你也可以重新整理分頁,或另開一個分頁直接打開 /。
誠實的界線在「第一次造訪」。在那之前什麼都還沒被快取,所以第一次開這個網站確實需要網路。第二個界線是站上其他頁面:五十幾篇教學與問答不會預先存起來,沒開過的頁面離線時就是打不開。
重點速覽
| 頁面載入後 | 打字、預覽、匯出全部可用 |
|---|---|
| 需要連線的時機 | 只有第一次造訪 |
| 離線安裝(PWA) | 有,Service Worker 會快取編輯器 |
| 離線讀教學頁 | 只限你已經開過的頁面 |
| 離線自動儲存 | 可以,直接寫入 localStorage |
| 離線時的網路圖片 | 空白,恢復連線後才會顯示 |
為什麼斷網後還能繼續運作?
- 先在有網路時造訪一次,Service Worker 就會裝好。
- 之後
/可以離線打開,重新整理分頁也不會有事。 - 沒有網路也能下載,因為檔案是在記憶體裡組出來的。
- 用網址引用的圖片會空白到你恢復連線為止,但你的 Markdown 本身沒有錯。
- 教學頁要開過才會被快取,所以斷線前先把想看的頁面點開。
整套引擎會隨頁面一起下載。解析、預覽、工具列快速鍵、自動儲存,以及 .md 與 .html 下載,全都是在你分頁裡執行的 JavaScript。第一次載入完成之後,就沒有任何事情還需要問伺服器。
Service Worker 到底存了什麼?
Service Worker 是瀏覽器在頁面旁邊執行的一支小程式。我們這支在安裝時會快取編輯器的骨架:首頁、樣式表、兩個網頁字型、圖示,以及負責解析與淨化 HTML 的腳本。這些正是編輯器啟動所需的檔案,所以完全沒網路也能冷啟動。
其他頁面則採「用到才存」。你打開一頁,它就在載入的同時被存起來,第二次造訪就能離線開。從沒開過的頁面沒被存過,自然也開不了。搜尋結果和任何帶查詢字串的網址則刻意永遠不快取,因為給你一份過期的搜尋結果,比誠實報錯更糟。
這不是硬加在伺服器應用上的離線模式,而是在「保護你文字隱私」那套架構上加的一小塊。既然你的文字從不送往伺服器,處理它自然也不需要伺服器。
斷網之後,哪些功能還能用?
逐項對照
與其講原則,不如直接看清單。以下是「這個瀏覽器至少造訪過本站一次」時的逐項答案:
| 動作 | 離線可用 | 原因 |
|---|---|---|
| 打字與即時預覽 | 可以 | 渲染在你的分頁裡完成 |
| 工具列按鈕與快速鍵 | 可以 | 它們只是在編輯框裡改文字 |
| 自動儲存到 localStorage | 可以 | 瀏覽器儲存空間就在你硬碟上 |
| 字數、字元數、行數統計 | 可以 | 每次按鍵都在本機計算 |
| 下載 .md 與 .html | 可以 | 檔案在記憶體裡組成,不是抓取的 |
| 複製 Markdown 或 HTML | 可以 | 剪貼簿存取是瀏覽器本身的功能 |
| 列印成 PDF | 可以 | 實際工作由作業系統完成 |
| 重新整理或重開編輯器 | 可以 | 骨架已經在 Service Worker 快取裡 |
| 深色模式切換 | 可以 | 設定是從你自己的瀏覽器讀出來的 |
| 語法上色、數學公式、圖表 | 用過一次就可以 | 每套函式庫在第一次用到時就被快取 |
| 之前開過的教學頁 | 可以 | 那次造訪時就存起來了 |
| 從沒開過的教學頁 | 不行 | 沒有任何東西被存下來 |
| 站內搜尋 | 不行 | 搜尋結果刻意不快取 |
| 用網址引用的圖片 | 不行 | 圖片本體放在遠端主機上 |
| 人生第一次造訪本站 | 不行 | 那次載入完成前,快取是空的 |
一句話記住它
載入過一次的東西都還能用,瀏覽器沒看過的就不行。同一條規律也解釋了為什麼預覽在超快網路和爛網路下都一樣即時。
誠實的界線:哪些還是需要連線?
有三件事仍然需要連線,值得把話講清楚:
- 人生第一次造訪。瀏覽器從沒抓過的網站,Service Worker 也無從快取起。
- 你還沒讀過的頁面。教學與問答是「開過才存」,不是事先全部存好。
- 放在別人主機上的東西。存在遠端伺服器的圖片,離線時就是抵達不了。
第一次一定要在有網路時開
在你載入過本站一次之前,你的裝置上什麼都沒有。有網路時打開 mdeditor.tw,讓頁面完整載入完,骨架從此就存在本機。之後重新整理很安全,另開分頁指向 / 也照樣打得開。
教學頁是邊讀邊快取
事先把每一頁都存起來,等於讓大多數人下載好幾 MB 用不到的內容,所以 Service Worker 不那樣做,而是在你第一次造訪某頁時才把它存下來。想在飛機上查語法速查表,就在起飛前先打開它。搜尋是唯一永遠不快取的例外:給你一份過期的結果清單,比誠實報錯更糟。
本質在遠端的東西留在遠端
用網址引用的圖片在離線時不會顯示在預覽裡。不過 Markdown 本身完全有效,恢復連線後圖片就會回來。
手機會回收閒置分頁
瀏覽器可能為了回收記憶體而卸載閒置分頁,手機上尤其常見。多虧自動儲存,你的草稿不會因此消失;現在連分頁本身都能從快取還原回來。不過長時間離線期間,讓編輯器保持在前景仍然是最保險的習慣。
離線時會出什麼狀況,以及怎麼修
那個其實沒壞的破圖
假設你在三萬五千英尺高空寫技術文件,預覽裡本該出現架構圖的位置只有一個破圖圖示:
## 部署流程

建置完成後就會推上測試環境。
這段 Markdown 沒有任何問題。解析器產生了正確的 <img> 標籤,只是瀏覽器連不到那台主機、抓不到檔案,預覽自然留白。真正的代價是:你現在無從判斷那個網址對不對。
寫成「沒有圖也讀得懂」的樣子
## 部署流程

> TODO:恢復連線後確認這個圖片網址。
建置完成後就會推上測試環境。
把替代文字寫得有描述性本來就是好習慣:它是螢幕閱讀器會唸出來的內容,也是圖片載入失敗時顯示的文字。一行引用格式的 TODO 則留下一個之後搜尋得到的記號。圖片指南對替代文字有更深入的說明。
注意:第二個常見的離線錯誤是「逛出編輯器」。點到一篇從沒開過的教學,就會看到瀏覽器的離線錯誤頁,解法是按上一頁。重新整理現在很安全,關掉分頁也是,因為骨架和草稿都會回來。真的想在飛行途中留檢查點,還是可以按 Ctrl+S 存一份 .md。
實用的「登機前」檢查清單
打算在飛機上、山區火車上,或任何 Wi-Fi 不可靠的地方寫作?趁還有網路時先做這幾件事。
- 打開 mdeditor.tw,按幾個鍵確認預覽有反應,快取就裝好了。
- 把旅途中會用到的參考資料先貼進來。
- 把預計會查的教學頁點開一遍,例如語法速查表。開過才會被快取。
- 如果文件會用到程式碼、數學公式或 Mermaid 圖,先各打一段。這會把對應的函式庫抓下來。
- 加分題:這趟旅程先關掉闔蓋自動睡眠。
接下來想寫多久就寫多久。匯出功能離線照常運作,中途可以隨時存幾個 .md 檔到硬碟當檢查點。落地之後,你寫的一切都原封不動:在分頁裡,也在 localStorage 裡。完整指南裡沒先開過的段落,等恢復連線再看也不遲。
怎麼安裝,以及什麼時候桌面軟體還是比較好
把它加到主畫面
本站除了 Service Worker,也附了一份 Web App Manifest。有提供安裝選項的瀏覽器,包括桌面版與 Android 版的 Chrome 和 Edge,都可以把編輯器加到啟動器或主畫面。之後它會用自己的視窗開啟,沒有網址列。運作方式完全不變,只是同一份快取骨架換了個外框。
什麼時候桌面編輯器還是比較好
如果你天天在離線環境工作,而且同時要處理很多檔案,桌面文字編輯器加上 Markdown 預覽擴充套件還是比較合適。它直接讀寫普通資料夾裡的檔案,而不是一次只在瀏覽器儲存空間裡放一份文件。兩邊都不會鎖住你,因為 .md 到哪裡都是同樣的純文字。
只要一次點擊的折衷路線
斷線之前,先把完稿文件匯出成含樣式的 .html。那個檔案完全自給自足,沒有網路也能正確開啟閱讀。很適合帶著當參考資料,只是不適合拿來寫新東西。
相關問題
立即使用編輯器
開啟編輯器