有沒有什麼辦法可以緩存服務人員中定義的文件夾/路徑的所有文件？</p> <pre><code>self.addEventListener('install', event => { event.waitUntil(caches.open('static-${version}') .then(cache => cache.addAll([ '/styles.css', '/script.js' ])) ); }); </code></pre> <p>我怎樣才能在服務人員定義的，這樣不是寫的所有文件的路徑/目錄：

Question

在服務工作者，我可以定義資源的服務人員獲取過程中這些被緩存的陣列下面就開始提到的名稱，服務工作者從給定的路徑/目錄中選擇所有文件並將所有文件添加到緩存中

Answer 1

這是不可能的。 SW（或者瀏覽器）對於Web服務器上特定路徑中的文件沒有任何線索。您必須提供要緩存的文件的名稱。關於同一問題的更多信息here.

您是否在使用某些構建工具來自動生成文件列表？如果沒有，你最有可能的應該:)

編輯：

一個用於SW工具最常用的圖書館是針線。他們提供資產runtime-caching和precaching。他們還爲例如構建工具插件。 Webpack和Gulp。

運行時緩存通過從緩存中提供資產（如果緩存中存在資源並且無論如何將其從服務器更新）來工作。基本上，每個新的資產將首先從網絡請求，然後在隨後的請求中從緩存中返回。

EDIT2：

是的，你可以用針線不NPM在一定程度上。您需要運行NPM腳本等來收集要緩存的文件的文件名，但您仍然可以通過在手寫的SW文件中導入Workbox.js腳本來實現運行時緩存。

只是說

importScript("https://unpkg.com/workbox-sw@2.1.0/build/importScripts/workbox-sw.prod.v2.1.0.js") 

在你的SW頂部進口的最新（截至目前）針線的版本。你可以看到這是runtime-caching example here too中發生的情況。

您也可以下載上面的.js文件，並將其放置在您自己的服務器上，並將其從相對路徑導入。

Answer 2

使用工作箱sw進行運行時緩存。

服務worker.js：

importScripts('https://unpkg.com/workbox-sw@0.0.2/build/importScripts/workbox-sw.dev.v0.0.2.js'); 
importScripts('https://unpkg.com/workbox-runtime-caching@1.3.0/build/importScripts/workbox-runtime-caching.prod.v1.3.0.js'); 
importScripts('https://unpkg.com/workbox-routing@1.3.0/build/importScripts/workbox-routing.prod.v1.3.0.js'); 

const assetRoute = new workbox.routing.RegExpRoute({ 
    regExp: new RegExp('^http://localhost:8081/jobs/static/*'), 
    handler: new workbox.runtimeCaching.CacheFirst() 
}); 

const router = new workbox.routing.Router(); 
//router.addFetchListener(); 
router.registerRoutes({routes: [assetRoute]}); 
router.setDefaultHandler({ 
    handler: new workbox.runtimeCaching.CacheFirst() 
}); 

腳本在我的HTML文件來加載Servcie工人。

<script> 
    if ('serviceWorker' in navigator) { 
     window.addEventListener('load', function() { 
      navigator.serviceWorker.register('http://localhost:8081/jobs/static/service-worker.js?v=4').then(function(registration) { 
      // Registration was successful 
      console.log('ServiceWorker registration successful with scope: ', registration.scope); 
     }, function(err) { 
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err); 
      }); 
     }); 
    } 
</script>