Registering a service employee in another folder

Question

I’m trying to understand how to register a service employee correctly, everything works fine in development, I call a service worker:

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

    });

}

The cache is listed as:

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

This is just a project that I am doing for Udacity, so the page will not have its own domain. However, I still want to save the final version online in the folder / train, but the working service is registered in the main domain, so it caches the wrong files.

If I add 'train/index.html', the service worker is looking 'train/train/index.html'. The same thing happens if you try to register a service worker in the "train" folder ...

How can I do this so that the online version of the project works correctly?

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