可以,只要頁面已經載入。解析器、預覽、工具列、字數統計、自動儲存和所有匯出方式,全都是隨頁面一起下載、之後在你機器上執行的 JavaScript。打到一半切到飛航模式,什麼都不會變:預覽照樣逐鍵更新,下載按鈕照樣產出檔案,因為那些檔案是在你的瀏覽器裡組出來的。

現在連重新載入都撐得住。第一次造訪時,Service Worker 會安裝並快取編輯器的骨架:頁面本身、樣式表、網頁字型與腳本。之後就算完全沒有網路,你也可以重新整理分頁,或另開一個分頁直接打開 /

誠實的界線在「第一次造訪」。在那之前什麼都還沒被快取,所以第一次開這個網站確實需要網路。第二個界線是站上其他頁面:五十幾篇教學與問答不會預先存起來,沒開過的頁面離線時就是打不開。

重點速覽

頁面載入後打字、預覽、匯出全部可用
需要連線的時機只有第一次造訪
離線安裝(PWA)有,Service Worker 會快取編輯器
離線讀教學頁只限你已經開過的頁面
離線自動儲存可以,直接寫入 localStorage
離線時的網路圖片空白,恢復連線後才會顯示

為什麼斷網後還能繼續運作?

重點摘要
  • 先在有網路時造訪一次,Service Worker 就會裝好。
  • 之後 / 可以離線打開,重新整理分頁也不會有事。
  • 沒有網路也能下載,因為檔案是在記憶體裡組出來的。
  • 用網址引用的圖片會空白到你恢復連線為止,但你的 Markdown 本身沒有錯。
  • 教學頁要開過才會被快取,所以斷線前先把想看的頁面點開。

整套引擎會隨頁面一起下載。解析、預覽、工具列快速鍵、自動儲存,以及 .md.html 下載,全都是在你分頁裡執行的 JavaScript。第一次載入完成之後,就沒有任何事情還需要問伺服器。

Service Worker 到底存了什麼?

Service Worker 是瀏覽器在頁面旁邊執行的一支小程式。我們這支在安裝時會快取編輯器的骨架:首頁、樣式表、兩個網頁字型、圖示,以及負責解析與淨化 HTML 的腳本。這些正是編輯器啟動所需的檔案,所以完全沒網路也能冷啟動。

其他頁面則採「用到才存」。你打開一頁,它就在載入的同時被存起來,第二次造訪就能離線開。從沒開過的頁面沒被存過,自然也開不了。搜尋結果和任何帶查詢字串的網址則刻意永遠不快取,因為給你一份過期的搜尋結果,比誠實報錯更糟。

這不是硬加在伺服器應用上的離線模式,而是在「保護你文字隱私」那套架構上加的一小塊。既然你的文字從不送往伺服器,處理它自然也不需要伺服器。

示意插圖:一台開著飛航模式的筆電,Markdown 編輯器仍在即時渲染預覽,代表整套引擎都在瀏覽器分頁內執行。

斷網之後,哪些功能還能用?

逐項對照

與其講原則,不如直接看清單。以下是「這個瀏覽器至少造訪過本站一次」時的逐項答案:

動作離線可用原因
打字與即時預覽可以渲染在你的分頁裡完成
工具列按鈕與快速鍵可以它們只是在編輯框裡改文字
自動儲存到 localStorage可以瀏覽器儲存空間就在你硬碟上
字數、字元數、行數統計可以每次按鍵都在本機計算
下載 .md 與 .html可以檔案在記憶體裡組成,不是抓取的
複製 Markdown 或 HTML可以剪貼簿存取是瀏覽器本身的功能
列印成 PDF可以實際工作由作業系統完成
重新整理或重開編輯器可以骨架已經在 Service Worker 快取裡
深色模式切換可以設定是從你自己的瀏覽器讀出來的
語法上色、數學公式、圖表用過一次就可以每套函式庫在第一次用到時就被快取
之前開過的教學頁可以那次造訪時就存起來了
從沒開過的教學頁不行沒有任何東西被存下來
站內搜尋不行搜尋結果刻意不快取
用網址引用的圖片不行圖片本體放在遠端主機上
人生第一次造訪本站不行那次載入完成前,快取是空的

一句話記住它

載入過一次的東西都還能用,瀏覽器沒看過的就不行。同一條規律也解釋了為什麼預覽在超快網路和爛網路下都一樣即時。

誠實的界線:哪些還是需要連線?

有三件事仍然需要連線,值得把話講清楚:

  • 人生第一次造訪。瀏覽器從沒抓過的網站,Service Worker 也無從快取起。
  • 你還沒讀過的頁面。教學與問答是「開過才存」,不是事先全部存好。
  • 放在別人主機上的東西。存在遠端伺服器的圖片,離線時就是抵達不了。

第一次一定要在有網路時開

在你載入過本站一次之前,你的裝置上什麼都沒有。有網路時打開 mdeditor.tw,讓頁面完整載入完,骨架從此就存在本機。之後重新整理很安全,另開分頁指向 / 也照樣打得開。

教學頁是邊讀邊快取

事先把每一頁都存起來,等於讓大多數人下載好幾 MB 用不到的內容,所以 Service Worker 不那樣做,而是在你第一次造訪某頁時才把它存下來。想在飛機上查語法速查表,就在起飛前先打開它。搜尋是唯一永遠不快取的例外:給你一份過期的結果清單,比誠實報錯更糟。

本質在遠端的東西留在遠端

用網址引用的圖片在離線時不會顯示在預覽裡。不過 Markdown 本身完全有效,恢復連線後圖片就會回來。

手機會回收閒置分頁

瀏覽器可能為了回收記憶體而卸載閒置分頁,手機上尤其常見。多虧自動儲存,你的草稿不會因此消失;現在連分頁本身都能從快取還原回來。不過長時間離線期間,讓編輯器保持在前景仍然是最保險的習慣。

離線時會出什麼狀況,以及怎麼修

那個其實沒壞的破圖

假設你在三萬五千英尺高空寫技術文件,預覽裡本該出現架構圖的位置只有一個破圖圖示:

## 部署流程

![部署架構圖](https://example.com/deploy.png)

建置完成後就會推上測試環境。

這段 Markdown 沒有任何問題。解析器產生了正確的 <img> 標籤,只是瀏覽器連不到那台主機、抓不到檔案,預覽自然留白。真正的代價是:你現在無從判斷那個網址對不對。

寫成「沒有圖也讀得懂」的樣子

## 部署流程

![部署架構圖:建置、測試、推上測試環境](https://example.com/deploy.png)

> TODO:恢復連線後確認這個圖片網址。

建置完成後就會推上測試環境。

把替代文字寫得有描述性本來就是好習慣:它是螢幕閱讀器會唸出來的內容,也是圖片載入失敗時顯示的文字。一行引用格式的 TODO 則留下一個之後搜尋得到的記號。圖片指南對替代文字有更深入的說明。

注意:第二個常見的離線錯誤是「逛出編輯器」。點到一篇從沒開過的教學,就會看到瀏覽器的離線錯誤頁,解法是按上一頁。重新整理現在很安全,關掉分頁也是,因為骨架和草稿都會回來。真的想在飛行途中留檢查點,還是可以按 Ctrl+S 存一份 .md

實用的「登機前」檢查清單

打算在飛機上、山區火車上,或任何 Wi-Fi 不可靠的地方寫作?趁還有網路時先做這幾件事。

  1. 打開 mdeditor.tw,按幾個鍵確認預覽有反應,快取就裝好了。
  2. 把旅途中會用到的參考資料先貼進來。
  3. 把預計會查的教學頁點開一遍,例如語法速查表。開過才會被快取。
  4. 如果文件會用到程式碼、數學公式或 Mermaid 圖,先各打一段。這會把對應的函式庫抓下來。
  5. 加分題:這趟旅程先關掉闔蓋自動睡眠。

接下來想寫多久就寫多久。匯出功能離線照常運作,中途可以隨時存幾個 .md 檔到硬碟當檢查點。落地之後,你寫的一切都原封不動:在分頁裡,也在 localStorage 裡。完整指南裡沒先開過的段落,等恢復連線再看也不遲。

怎麼安裝,以及什麼時候桌面軟體還是比較好

把它加到主畫面

本站除了 Service Worker,也附了一份 Web App Manifest。有提供安裝選項的瀏覽器,包括桌面版與 Android 版的 Chrome 和 Edge,都可以把編輯器加到啟動器或主畫面。之後它會用自己的視窗開啟,沒有網址列。運作方式完全不變,只是同一份快取骨架換了個外框。

什麼時候桌面編輯器還是比較好

如果你天天在離線環境工作,而且同時要處理很多檔案,桌面文字編輯器加上 Markdown 預覽擴充套件還是比較合適。它直接讀寫普通資料夾裡的檔案,而不是一次只在瀏覽器儲存空間裡放一份文件。兩邊都不會鎖住你,因為 .md 到哪裡都是同樣的純文字。

只要一次點擊的折衷路線

斷線之前,先把完稿文件匯出成含樣式的 .html。那個檔案完全自給自足,沒有網路也能正確開啟閱讀。很適合帶著當參考資料,只是不適合拿來寫新東西。

離線能力和站上其他一切建立在同一個基礎上。儲存那一面請看我打的文字存在哪裡,成本那一面請看編輯器為什麼免費

相關問題

立即使用編輯器

開啟編輯器