Service Worker和HTTP緩存

不少人，包括我本身，初看Service Worker多一個Cache Storage的時候，就感受跟HTTP長緩存沒什麼區別。
例如你們講的最多的Service Worker能讓網頁離線使用，但熟悉HTTP緩存的朋友，會發現，把整站全部資源設置爲長緩存（不帶校驗），也能夠實現離線使用。

那麼，Service Worker在緩存方面和HTTP緩存比較，有什麼好處呢？

帶着這個疑問，我翻閱了一些大神博客
JakeArchibald的《Caching best practices & max-age gotchas》
李熠的《設計一個無懈可擊的瀏覽器緩存方案：關於思路，細節，ServiceWorker，以及HTTP/2》

根據實際項目經驗，總結出如下。

Service worker除了針對PWA（推送和消息）之外，對普通web來講，在緩存方面，能比http緩存帶來一些額外的好處。
能夠理解爲，SW就是瀏覽器把緩存管理開放一層接口給開發者。

一、改寫默認行爲。

例如，瀏覽器默認在刷新時，會對全部資源都從新發起請求，即便緩存仍是有效期內，而使用了SW，就能夠改寫這個行爲，直接返回緩存。

二、緩存和更新並存。

要讓網頁離線使用，就須要整站使用長緩存，包括HTML。而HTML使用了長緩存，就沒法及時更新（瀏覽器沒有開放接口直接刪除某個html緩存）。而使用SW就能夠，每次先使用緩存部分，而後再發起SW js的請求，這個請求咱們能夠實施變動，修改HTML版本，從新緩存一份。那麼用戶下次打開就能夠看到新版本了。

三、無侵入式。

無侵入式版本控制。最優的版本控制，通常是HTML中記錄全部js css的文件名（HASH），而後按需發起請求。每一個資源都長緩存。而這個過程，就須要改變了項目結構，至少多一個js或者一段js控制版本號，發起請求時還須要url中注入冬天的文件名。使用了SW，就能夠把這部分非業務邏輯整合到sw js中。
無侵入式請求統計。例如緩存比例統計、圖片404統計。

四、額外緩存。

HTTP緩存空間有限，容易被沖掉。雖然部分瀏覽器實現SW的存儲也有淘汰機制，但多一層緩存，命中的機率就要更高了。

五、離線處理。

當監測到離線，並且又沒有緩存某個圖片時，能夠作特殊處理，返回離線的提示。又或者作一個純前端的404/斷網頁面。相似Chrome的小恐龍頁面。

六、預加載資源。

這個相似prefetch標籤。

七、前置處理。

例如校驗html/JS是否被運營商劫持？js文件到了UI進程執行後，就沒法刪除惡意代碼，而在SW中，咱們能夠看成文本同樣，輕鬆解決。固然，在HTTPS環境下出現劫持的機率是極低的。