首頁總是不更新，關於被 Service Workers 雷的這件事

前言

最近發現部落格總是不更新，經過一番查找，發現是 Service Workers 的關係，這篇文章就來記錄一下。

事發原因

最近有滿多朋友跟網友陸續在問我說…

「Ray 你是不是很久沒更新部落格了？感覺你部落格好像沒在更新了」

想當然這一定不可能，畢竟我很常寫文章分享更不用說前陣子還寫了鐵人賽，所以我就跟朋友要了圖片，發現他們的部落格都是這樣

下意識第一直覺就是應該是被瀏覽器 Cache 住了，所以就教了他使用 Chrome 的快取方式

接著我就沒理了，過幾天後另一個學生就跟我說

「助教，你的部落格內容會跳來跳去的」

有趣了，所以我就請他錄影了一下狀況

畫面上我們可以看到學生確實使用了「強制清除快取並重新載入」，但是只要一重新使用 F5 就又恢復到原本的狀態。

排除問題

一開始我還以為是 Cloudflare，因為我的網域本身是託管在 Cloudflare 上，而 Cloudflare 就有提供一個快取機制，但是我發現我自己在 localhost 測試也是一樣，所以就排除了 Cloudflare 的可能性，畢竟 localhost 是不會經過 Cloudflare 的。

這時候我就發現一件事情，我在 Firefox 上是正常的，但是只有 Chrome 相關的瀏覽器都會有這個問題，所以我就開始懷疑是不是 Chrome 的問題，第一個想到的就是 Chrome 才有的 PWA 功能，因為早期我的部落格為了增加使用者體驗，所以我有加入 PWA 功能，但是後來因為我發現 PWA 功能會讓部落格的更新速度變慢，所以我就把它移除了，但是我沒有想到這個功能會留下一些痕跡。

而解決方式很簡單，只需要打開開發者工具，然後到 Application 頁面，接著點選左邊的 Service Workers

最後點選 Unregister 就可以了

那麼問題來了，使用者要怎麼知道要去取消註冊呢？這時候我就想到了一個方法，就是在 head 加入以下程式碼

function unregister() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
            for (let registration of registrations) {
                registration.unregister();
            }
        });
    }
}

unregister();

當使用者進入到我的部落格時，若有 Service Workers 的話就會自動取消註冊，這樣就可以解決這個問題哩～

結論

最後說明一下為什麼 Service Workers 會導致這個問題發生，首先 Service Workers 是 Progressive Web Apps（PWA）的關鍵核心功能，它可以讓網站像是 App 一樣，可以離線使用，而這個功能就是透過 Cache 來達成的。

所以當我部落格移除了 PWA 功能後，卻沒有幫使用者取消註冊 Service Workers，就會導致使用者的瀏覽器會一直使用 Cache 裡面的資料，而不會去重新請求新的資料，這也就導致了部落格的內容不會更新哩。