Service Worker 緩存文件處理


交代背景

前段時間升級了一波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();
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM