Registrierung Service-Arbeiter in einem anderen Ordner

Question

ich auf Figur bin versucht, wie man richtig Servicemitarbeiter registrieren, in der Entwicklung alles funktioniert gut, nenne ich Service Arbeiter:

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; 
     }); 

    }); 

} 

Cache sind wie folgt aufgeführt:

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' 
]; 

Dies ist nur ein Projekt, das ich für Udacity mache, damit die Seite keine eigene Domain hat. Allerdings möchte ich immer noch die endgültige Version online in einem Ordner/train/halten, aber Service Worker ist unter der Hauptdomäne registriert, so dass falsche Dateien zwischengespeichert werden.

Wenn ich 'train/index.html' hinzufügen, sucht der Service-Mitarbeiter nach 'train/train/index.html'. Das Gleiche passiert, wenn Sie versuchen, Service-Mitarbeiter in einem Ordner "Zug" zu registrieren ...

Wie soll ich es tun, damit die Online-Version des Projekts ordnungsgemäß funktioniert?

Answer 1

Da Ihr Servicemitarbeiter nun in einem Unterordner der Domäne leben, sollte seinen Cache relative Pfade:

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' 
];