Question

我刚刚开始在一天前了解服务工作者。根据我的学习，我想创建一个离线应用程序。我创建了2个页面，即 demo.html 和 offline.html 。我的目标是，当没有互联网连接时，我必须显示offline.html。

我已在测试服务器中发布了我的文件。它有SSL连接。当我通过键入https://example.com/sampleapp/来访问我的网站时， demo.html 页面是默认页面。我已经安装了服务工作者，缓存文件被下载到我的机器上。这是问题发生的地方，在禁用我的网络后，我正在刷新页面，此处它不会转到离线页面，而是显示演示页面。当我调试 service-worker.js 并刷新页面时，在js文件中，它将转到fetch函数并返回 response.status为“OK”而不是我会写下它应该进入离线页面。

现在我没有刷新，而是将网址中的演示页面提到https://example.com/sampleapp/demo.html，然后转到离线页面。连接到网络后，如果我使用相同的上述URL刷新页面，它将显示离线页面而不是转到演示页面。我无法分辨为什么会发生这种情况。你能告诉我我写的代码是否正确吗？

请找到我的 service-worker.js 代码



    // [Working example](/serviceworker-cookbook/offline-fallback/).
    var CACHE_NAME = 'dependencies-cache';
    var REQUIRED_FILES = [
      'offline.html',
      'todo.js',
      'index.js',
      'app1.js'
    ];
    self.addEventListener('install', function(event) {
      // Put `offline.html` page into cache
        event.waitUntil(
        caches.open(CACHE_NAME)
          .then(function (cache) {
              // Add all offline dependencies to the cache
              console.log('[install] Caches opened, adding all core components' +
                'to cache');
              return cache.addAll(REQUIRED_FILES);
          })
          .then(function () {
              console.log('[install] All required resources have been cached, ' +
                'we\'re good!');
              return self.skipWaiting();
          })
      );


      //  var offlineRequest = new Request('offline.html');
      //event.waitUntil(
      //  fetch(offlineRequest).then(function(response) {
      //    return caches.open('offline').then(function(cache) {
      //      console.log('[oninstall] Cached offline page', response.url);
      //      return cache.put(offlineRequest, response);
      //    });
      //  })
      //);
    });

    self.addEventListener('activate', function (event) {
        console.log("Ready for the demo");
    });

    self.addEventListener('fetch', function(event) {
      // Only fall back for HTML documents.
      var request = event.request;
      // && request.headers.get('accept').includes('text/html')
      if (request.method === 'GET') {
        // `fetch()` will use the cache when possible, to this examples
        // depends on cache-busting URL parameter to avoid the cache.
        event.respondWith(
          fetch(request).then(function(response){
              if (!response.ok) {
                  // An HTTP error response code (40x, 50x) won't cause the fetch() promise to reject.
                  // We need to explicitly throw an exception to trigger the catch() clause.
                  throw Error('response status ' + response.status);
              }
              return response;
          }).catch(function (error) {
            // `fetch()` throws an exception when the server is unreachable but not
            // for valid HTTP responses, even `4xx` or `5xx` range.
            //console.error(
            //  '[onfetch] Failed. Serving cached offline fallback ' +
            //  error
              //);
              return caches.open(CACHE_NAME).then(function (cache) {
                  return cache.match('offline.html');
              });
            //return caches.match('offline.html');
            //return caches.open('offline').then(function(cache) {
            //  return cache.match('offline.html');
            //});
          })
        );
      }
      // Any other handlers come here. Without calls to `event.respondWith()` the
      // request will be handled without the ServiceWorker.
    });

还可以找到我的 index.js 代码

if (navigator.serviceWorker.controller) {
  // A ServiceWorker controls the site on load and therefor can handle offline
  // fallbacks.
  debug(
    navigator.serviceWorker.controller.scriptURL +
    ' (onload)', 'controller'
  );
  debug(
    'An active service worker controller was found, ' +
    'no need to register'
  );
} else {
  // Register the ServiceWorker
  navigator.serviceWorker.register('service-worker.js', {
    scope: './'
  }).then(function(reg) {
    //debug(reg.scope, 'register');
    //debug('Service worker change, registered the service worker');
  });
}


// Debug helper
function debug(message, element, append) {
}

根据我对服务工作者的了解，如果没有互联网连接，在获取功能中，我可以显示离线页面。这是显示离线页面的正确方法，还是应该显示演示页面，然后在该页面中如果没有互联网连接，那么将数据保存到索引数据库？另外我有一个问题，当有互联网连接时，我想检查IndexDB中是否有任何数据，然后是否有数据上传到服务器。我应该在哪个事件中处理Activate或Fetch？

谢谢，
Jollyguy

使用服务工作者时，脱机页面未显示在获取功能中？

0 个答案: