註冊服務工作者在不同的文件夾

Question

我試圖找出如何正確地註冊服務工作者，在發展中一切工作正常，我叫服務人員：

if (navigator.serviceWorker) { 
    navigator.serviceWorker.register('./sw.js').then(function(reg) { 
     if (reg.waiting) { 
      reg.waiting.postMessage({ action: 'skipWaiting' }); 
      return; 
     } 

     reg.addEventListener('updatefound', function() { 
      trackInstalling(reg.installing); 
     }); 

     var refreshing; 
     navigator.serviceWorker.addEventListener('controllerchange', function() { 
      if (refreshing) return; 
      window.location.reload(); 
      refreshing = true; 
     }); 

    }); 

} 

緩存列出如下：

var urlsToCache = [ 
    '/', 
    '/index.html', 
    '/css/app.min.css', 
    '/js/app.min.js', 
    '/js/library.min.js', 
    '/views/line.html', 
    '/views/start.html', 
    '/views/station.html', 
    '/views/timetable.html' 
]; 

這只是我爲Udacity所做的一個項目，所以頁面不會擁有它自己的域名。不過，我仍然希望將最終版本保留在文件夾/火車/上，但服務人員在主域下注冊，因此緩存錯誤的文件。

如果我添加'train/index.html'服務人員正在尋找'train/train/index.html'。如果嘗試在「火車」文件夾中註冊維修工人，則會發生同樣的情況...

我應該怎麼做才能使項目的在線版本正常工作？

Answer 1

由於您的服務人員現在住在該域的子文件夾，它的緩存路徑應該是相對的：

var urlsToCache = [ 
    './', // I'm not 100% sure on the syntax for this one. In your case 
      // '/train/' would definitely work, but it would require updating 
      // if you ever move the app to a different folder. 

    'index.html', // All the other URLs just lose their preceding slash. 
    'css/app.min.css', 
    'js/app.min.js', 
    'js/library.min.js', 
    'views/line.html', 
    'views/start.html', 
    'views/station.html', 
    'views/timetable.html' 
];