服务工作者不能脱机工作

时间:2017-10-07 19:01:02

标签: service-worker progressive-web-apps

我已成功注册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);
    })
  );
});

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:-1)

您必须核对清单“重新加载时更新” enter image description here