服務工作者緩存整個文件夾

我有通過的WebPack生成build文件夾，任何想法如何，我可以緩存整個文件夾，我嘗試以下，但無濟於事服務工作者緩存整個文件夾

self.addEventListener('install', e => { 
    e.waitUntil(
     caches.open('notes').then(cache => { 
      return cache.addAll([ 
      './build/*', 
     ]) 
     .then(() => self.skipWaiting()); 
    })) 
}); 

self.addEventListener('activate', event => { 
    event.waitUntil(self.clients.claim()); 
}); 

self.addEventListener('fetch', event => { 
    event.respondWith(
     caches.match(event.request).then(response => { 
      return response || fetch(event.request); 
     }) 
    ); 
});

如何我任何幫助可以緩存整個構建文件夾的文件。我沒有使用webpack插件，只寫了我的SW。

來源

2017-01-17 Nitish Phanse

cache.addAll()以URL數組爲參數。 './build/*'不是一個URL數組，當在用戶瀏覽器上的服務工作人員內運行時，這種通配符模式沒有意義。

你真正想要做的是使用通配符模式，在構建時進行評估，本地執行Webpack構建的同一臺計算機上，它可以訪問build/目錄中的本地文件，並可以生成完整列表其中。您需要在Webpack構建過程中表達該意圖，而不是在服務工作人員運行的cache.addAll()之內。

有幾個Webpack插件，比如sw-precache-webpack-plugin和offline-plugin，可以在構建時自動擴展通配符，並將結果列表（以及版本信息，這也是非常重要的）注入服務工作者文件，該文件反過來在用戶的瀏覽器中運行。你提到你不想使用插件，而是編寫自己的服務工作者，但我建議至少查看這些插件的源代碼（或者對於sw-precache project），因爲你幾乎肯定會最終遵循類似的方法。

來源

2017-01-17 20:57:08

服務工作者緩存整個文件夾

回答

相關問題