交代背景
前段時間升級了一波Google Chrome,發現我的JulyNovel站點Ctrl+F5也刷新不了,后來發現是新的Chrome已經支持Service Worker,而我的JulyNovel也滿足https這個硬性條件。
之前加載過的css和js都被緩存了。
所以這里是有點小問題的,畢竟我服務器更新了,你service worker 沒給我更新緩存,就說不過去了。
生命周期
特地跑到Google Develop去看了下究竟是怎么運轉的。
Service Worker生命周期的意義
1.實現離線優先(這個不談,沒網也能搞事?這妥妥的Native的能力啊)
2.允許新服務工作線程自行做好運行准備,無需中斷當前的服務工作線程。(准備替換舊的service woker)
3.確保整個過程中作用域頁面由同一個服務工作線程(或者沒有服務工作線程)控制。
4.確保每次只運行網站的一個版本。
install
根據我的理解,這個環節只在第一次打開網站時加載,一系列操作保證其原子性(要么可用,要么廢棄)
Activate
service worker被激活,某些請求就會變成 from ServiceWorker
更新service worker
這里就是解決問題的關鍵了。
首先,會觸發更新的情況如下
1.導航到一個作用域內的頁面。
2.更新 push 和 sync 等功能事件,除非在前 24 小時內進行了更新檢查。
3.調用 .register(),僅在ServiceWorker網址已發生變化時。
4.在獲取更新時遵循(長達 24 小時)服務工作線程腳本上的緩存標頭。 我們將創建此選擇加入行為,因為它可以發現問題。 在您的服務工作線程腳本上,您可能需要 max-age 為 0。
更新流程
1.install
裝載新的工作線程(根據我的理解,就是把css和js換個版本號,則會觸發install的事件)
2.waiting
等待更新動作被觸發
3.Activate
新的serviceworker替換老的
4.skipWaiting
跳過waiting
5.手動更新
navigator.serviceWorker.register('/sw.js').then(reg => {
// sometime later…
reg.update();
});
