Question

我已成功注册service-workers.js且没有任何错误，并且已将所有需要脱机工作的文件存储在cache中。但是，当我尝试检查它是否会在离线时回复200 It fails!

以下是代码：

//Delete Old Cache
caches.delete('[v0.1.0]');

//Latest CACHE_NAME
var CACHE_NAME = '[v0.1.1] Portfolio (ATB00ker)';

//Files to be Cached
var urlsToCache = [
    '../../../index.html',
    '../jquery-3.2.1.slim.min.js',
    '../owl.carousel.min.js',
    '../scrollreveal.min.js',
    '../../images/bg-creator.webp',
    '../../images/icon/facebook.svg',
    '../../images/icon/telegram.svg',
    '../../images/icon/gmail.svg',
    '../../images/icon/github.webp'
];


self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});


self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request, {ignoreSearch:true}).then(response => {
      return response || fetch(event.request);
    })
  );
});

Answer 1

您已离线/index.html缓存，但您正在访问/进行测试。这是两个不同的路径，您必须离线缓存您要访问的路径。

Answer 2

您似乎无法离线。您必须将服务工作者指向要显示的脱机页面。这是一段代码：

self.addEventListener('fetch', function (event) {
    console.log('Handling fetch event for', event.request.url);

    event.respondWith(            
        caches.match(event.request).then(function (response) {
            if (response) {
                console.log('Found response in cache:', response);

                return response;
            }

            console.log('No response found in cache. About to fetch from network...');

            return fetch(event.request).then(function (response) {
                console.log('Response from network is:', response);

                return response;
            }).catch(function (error) {                    
                console.error('Fetching failed:', error);

                return caches.match(OFFLINE_URL);
            });
        })
    );
});

或者，您可以查看this。

Answer 3

在我的案例中的问题是我把service-worker.js放在“assets / js / user”中，当我把它移到根目录“/”时它起作用了！

Answer 4

您必须核对清单“重新加载时更新”

服务工作者不能脱机工作

4 个答案: