2020-02-17

Service Worker 之存貓得狗

最近突然開始在測 Service Worker,理所當然拿教學文件上的那個「第一次看到狗、第二次以後看到貓」的範例自己跑跑看。

為了後面的劇情需要,這裡先講解一下這個範例在幹啥。它是在示範 Service Worker 攔截 request 的能力,程式刻意設計成在第二次(以後)瀏覽,明明網頁要顯示的依然是 dog.svg 這個 resource,但實際上 Service Worker 給的卻是 cat.svg,所以使用者看到的會是貓。

好的,我複製貼上了程式碼、直接抓範例網站的貓狗圖…

為什麼跑出來的完全都是狗狗狗狗狗…

原本還要測一些其他的東西,所以是自己開個 localhost server 試,理所當然沒有 https(我也不會掛… [死]),為了預防萬一所以還丟上 GitHub Pages 試試,一樣還是狗狗狗狗狗… (備註:其實與 https 無關,都可以運作)

◢▆▅▄▃ 崩╰(〒皿〒)╯潰 ▃▄▅▆◣

鬼打牆到已經放棄治療,正準備關機睡覺的時候,無意間發現… 幹,為什麼兩個圖檔開出來都是狗?那不管程式有沒有 bug、Service Worker 有沒有運作都馬一定看到狗阿… [死]

原本以為是自己手賤粗心存檔存錯,打算再抓一次圖檔測試看看,如果成功就自己去跪主機板,結果沒想到…

只要是在範例網站上用「另存圖片」的方式,就會遇到「存貓得狗」的結果

這邏輯感覺很詭異,不過仔細想想可能還是有理可循?以「在新分頁開啟圖片」的結果來說,就會看到 url 依然是 dog.svg 但畫面還是貓,這表示 Service Worker 在不同 tab 一樣會運作。至於「另存圖檔」、「複製圖片」這兩個行為應該是單純拿 url 作 curl 之類的動作,不會觸發 Service Worker,所以依然會得到真正的 dog.svg

(謎之聲:事後諸葛都碼很簡單)

於是我的「範例程式跑不動」歷史又增添了一筆。雖然說 browser 行為的確出乎意料,但是在鬼打牆的時候(明明都有把 catches.match('cat.svg') 印出來看,url 的確是 cat.svg)也沒懷疑到圖檔上頭還是缺失。 於是寫完這篇檢討報告之後來跪個滑鼠墊以作懲處