Question

我正在构建一个渐进的Web应用程序，服务工作者看起来像这样：


    CURRENT_CACHE = 'V3';
    FILES_TO_CACHE = [
        '/index.html',
        '/js/bcheck.js',
        '/js/mss.js',
        '/js/vendor.js'
    ];

    console.info('in file');
    self.addEventListener('install', function (event) {
        console.info('installed');
        event.waitUntil(caches.open(CURRENT_CACHE).then(function(cache){
            return cache.addAll(FILES_TO_CACHE);
        }));
    });
    self.addEventListener('activate', function (event) {
        console.info('activated');
        event.waitUntil(caches.keys().then(function (cachesNames) {
            return Promise.all(cachesNames.map(function (cacheName) {
                if (cacheName !== CURRENT_CACHE) {
                    return caches.delete(cacheName);
                }
            }))
        }));
    });

    self.addEventListener('fetch', function(event) {
        event.respondWith(
            caches.match(event.request)
                .then(function(response) {
                        // Cache hit - return response
                        if (response) {
                            return response;
                        }

                        return fetch(event.request);
                    }
                )
        );
    });

我看到安装后我将所有文件缓存，但是当我将服务器脱机并重新加载时没有任何效果，就像服务处于脱机状态而没有任何加载。

感谢您的帮助

我在localhost上使用本地服务器HTTP

Answer 1

您可能正在尝试localhost:port/，但您已缓存/index.html。尝试访问localhost:port/index.html或将此/添加到serviceWorker代码中的FILES_TO_CACHE，然后重试。

Answer 2

对于正常脱机工作的服务工作者，它应该严格地在Https中尝试使用Https。你可以在灯塔里查看。（LightHouse是一个检查PWA服务工作的工具）。

Answer 3

如果您处于离线状态，则需要告诉服务人员该怎么办。由于您的提取函数当前已构建，因此不知道该怎么做。尝试这样的事情。您应该能够将其直接复制并粘贴到服务工作者文件中，在浏览器中清除服务工作者，然后

`//Borrowed from https://github.com/TalAter/UpUp
function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/index.html');
        }
      })
    })
  );
}`

服务工作者不在离线加载

3 个答案: