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 /中，但服务工作者在主域名下注册，因此缓存了错误的文件。

如果我添加'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'
];

在不同的文件夹中注册Service Worker

1 个答案: