Progressive web application是谷歌推出的一種漸進式應用，我覺得其實PWA是一種非常具有發展前景的技術。首先，PWA是由谷歌推出的，而且跨平臺,PWA可以給你類似于原生APP的體驗，通過service worker，你可以將資源緩存到本地。但是，PWA再國內一直都是不溫不火，主要有好幾個原因：一是因為國內的瀏覽器環境比較復雜，而PWA一般只是能夠在chrome瀏覽器得到較好的支持。雖然chrome在桌面端占據了很大比例，但是在移動端還是一般般，普通的用戶不一定會去安裝Chrome。二是safari瀏覽器對于PWA的支持不是很完美，service worker目前還是沒有得到支持的。

但是我是覺得PWA還是很好的，值得開發者們進一步探索。有一點偏題了，今天要討論的其實是PWA里面service worker資源的緩存問題。主要問題的背景是這樣的，我有一個上海地鐵線路圖的PWA，可以支持離線使用，有興趣的同學可以嘗試看看。我遇到一個問題，就是每次我更新之后代碼之后，加入我的PWA被添加到主屏之后，這個APP的代碼就沒有更新，必須刪除后重新重瀏覽器中添加到主屏。一開始我以為是PWA的問題，后來竟別人提醒，桌面上的APP其實也就是網站的鏈接。我這才恍然大悟，問題是因為我的servicer worker里面的緩存策略有問題。因為我的APP通過service worker來緩存資源，包括js,css以及圖片文件，所以始終是從緩存中加載資源，所以我遠程代碼更新后，這個APP的代碼卻沒有得到更新。OK，拿代碼說話，我一開始的代碼是：

var cacheName = 'subway'; var filesToCache = ['/','index.html','image/transfer.png','dist/alloy_finger.js','app.css' ];self.addEventListener('install', function(e) {console.log('service worker install');e.waitUntil(caches.open(cacheName).then(function(cache) {console.log('serviceworker caching app shell');return cache.addAll(filesToCache);})); });

可以看出我們在install事件后通過在cache里面加載文件，所以我們必須選擇一種合適的策略能夠讓我們的APP在代碼更新之后去請求新的代碼呢？

Google其實在PWA推出的過程中也給出了很多有用的技術。比如sw-precache以及sw-toolbox，以及最近正在發展過程中的sw-helper。這里，我主要使用的是sw-precache來更新我的service worker策略。

sw-precache也是NODE中的一個模塊，可以通過npm install sw-precache來進行安裝。sw-precache可以配合多個工具使用，這里我主要介紹一下如何配合gulp來使用。我們通過利用sw-precache來幫助我們生成sw-precache。餓了么的huangxuan在medium寫了一篇文章來滲入地介紹sw-precache，這篇文章寫的不錯，但是卻是在墻外，主要是介紹sw-precache的工作方式。我就談一下我對sw-precache的理解把，以一個gulpfile的一段代碼為例：

gulp.task('generate-sw', function(callback) {var path = require('path');var swPrecache = require('sw-precache');swPrecache.write(path.join('sw.js'), {staticFileGlobs: ['app.js','dist/alloy_finger.js','dist/app.css','image/*.{png}','index.html','/']}, callback) })

我們通過利用sw-precache來生成sw.js文件。主要的方式是檢測你在staticFileGlobs里面的文件有沒有發生變化，如果發生變化就會重新生成hash碼，從而能夠使得APP在代碼更新之后向遠程請求新的代碼。

這篇文章可能只是很小的一點，關于service worker的使用還有很多東西值得學習，歡迎關注我的github共同探討。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的service worker之cache实践--sw-precache的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。