Javascript 脱机时在渐进式Web应用中处理获取请求_Javascript_Service Worker_Progressive Web Apps

Javascript 脱机时在渐进式Web应用中处理获取请求

javascript

Javascript 脱机时在渐进式Web应用中处理获取请求,javascript,service-worker,progressive-web-apps,Javascript,Service Worker,Progressive Web Apps,我一直在关注渐进式网络应用程序，我试图找到一种方法，在应用程序离线时向用户显示某种消息。到目前为止，我的代码与教程基本相同： var cacheName = 'demoPWA-v1'; var filesToCache = [ '/', '/index.html', '/js/app.js', '/icons/pwa-256x256.png' ]; self.addEventListener('install', function(e) { consol

我一直在关注渐进式网络应用程序，我试图找到一种方法，在应用程序离线时向用户显示某种消息。到目前为止，我的代码与教程基本相同：

Application>Service Workers

下选中Offline复选框时，我发现了几个错误，如下所示：

我想知道是否有办法处理这些错误，并在这样做的同时，向用户显示某种消息，告知他们他们处于脱机状态。

下面是mods只是为了发出警报，您可以将警报更改为使用Jquery或direct DOM更新HTML页面

self.addEventListener('fetch', function(e) {
    console.log('[demoPWA - ServiceWorker] Fetch event fired.', e.request.url);
    e.respondWith(
        caches.match(e.request).then(function(response) {
            if (response) {
                console.log('[demoPWA - ServiceWorker] Retrieving from cache...');
                return response;
            }
            console.log('[demoPWA - ServiceWorker] Retrieving from URL...');
            return fetch(e.request).catch(function (e) {
               //you might want to do more error checking here too,
               //eg, check what e is returning..
               alert('You appear to be offline, please try again when back online');
            });
        })
    );
});

是的，只要您确定缓存不是空的，因为您只想使用它来显示脱机警告，那么您正在做的事情就非常有意义

MDN代码确实有问题，catch（）不起作用，我做了一些修改，它起作用了，至于catch（），我还没有时间解决问题，如果您先找到解决方案，请告诉我！代码如下：

var CACHE_VERSION = 1;

// Smallest identifier for a specific version of the cache
var CURRENT_CACHES = {
  font: 'OFFLINE_CACHE' + CACHE_VERSION
};

self.addEventListener('fetch', function(event) {
 // console.log(event);
// We only want to call event.respondWith() if this is a GET request for an HTML document.
  if (event.request.method === 'GET') {
    console.log('Handling fetch event for', event.request.url);

  event.respondWith(

    // Opens the cache object that starts with 'font'
    caches.open(CURRENT_CACHES['font']).then(function(cache) {
      return cache.match(event.request).then(function(response) {
        if (response) {
          console.log('Found cached answer:', response);
          return response;
        } else {
        //Did not find answer in cache
        return fetch(event.request).then(function(fetchresponse) {
        console.log("Request Result - redirected:" + fetchresponse.redirected + ", status:" + fetchresponse.status + ", statusText:" + fetchresponse.statusText + ", type:" + fetchresponse.type + ", url:" + fetchresponse.url);
        if(fetchresponse.status == '200' || fetchresponse.status == '201' || fetchresponse.status == '202' || fetchresponse.status == '203' || fetchresponse.status == '204' || fetchresponse.status == '206'){
               return fetchresponse;    
         } else {
         console.log('The request returned http code 30*, 40* or 50*.');
         return false;
         }    
        }).catch(function(e) {
         //Offline version
        return new Response('<html><title></title><strong>Sorry, You are offline!</strong></html>', {"status" : 202, "headers" : {"Content-Type" : "text/html; charset=utf-8"}});
        });
        }
      }).catch(function(error) {
        //This .catch () doesn't seem to work, as I said, but it won't give you any problems, it just takes up space.

        // Handles exceptions that come from match () or fetch ().

        console.error('  Error:', error);

        throw error;
      });
    })
  );
  };
});

var-CACHE\u版本=1；
//缓存特定版本的最小标识符
变量当前_缓存={
字体：“脱机缓存”+缓存版本
};
self.addEventListener（'fetch'，函数（事件）{
//console.log（事件）；
//如果这是对HTML文档的GET请求，我们只想调用event.respondWith（）。
if（event.request.method=='GET'）{
log（'handlingfetchevent for'，event.request.url）；
事件响应(
//打开以“font”开头的缓存对象
缓存。打开（当前_缓存['font']）。然后（函数（缓存）{
返回cache.match（event.request）.then（函数（响应）{
如果（答复）{
log（'找到缓存的答案：'，响应）；
返回响应；
}否则{
//在缓存中找不到答案
返回fetch（event.request）.then（函数（fetchresponse）{
日志（“请求结果-重定向：+fetchresponse.redirected+”，状态：+fetchresponse.status+”，状态文本：+fetchresponse.statusText+，类型：+fetchresponse.type+，url：+fetchresponse.url）；
如果（fetchresponse.status='200'| | fetchresponse.status='201'| | fetchresponse.status='202'| | fetchresponse.status='203'| | fetchresponse.status='204'| | fetchresponse.status='206'）{
返回获取响应；
}否则{
log（'请求返回http代码30*、40*或50*）；
返回false；
}    
}).catch（函数（e）{
//脱机版本
返回新的响应（“对不起，您脱机了！”，{“状态”：202，“标题”：{“内容类型”：“text/html；charset=utf-8”}）；
});
}
}).catch（函数（错误）{
//正如我所说，这个.catch（）似乎不起作用，但它不会给您带来任何问题，它只会占用空间。
//处理来自match（）或fetch（）的异常。
console.error（'error:'，error）；
投掷误差；
});
})
);
};
});

fetch，返回承诺。这样你就可以抓住错误<代码>获取（e.request）.catch（函数（e）{（*做你的事*）}@Keith你能根据这个逻辑发布一个答案吗？如果可以的话，也许可以更详细地解释。可以，但你会以什么方式通知用户？。最简单的方法就是使用alert，例如现在就可以了吗？@Keith我想把消息写到一些HTML元素中，但alert可以用来展示解决方案！结果是t帽子，虽然这个想法是可靠的，但我无法显示服务人员的警告。（你最初发布答案时，我没有测试你的答案，因为我不在我的电脑前，我认为这样一个直截了当的解决方案肯定会行得通，但事实证明服务人员有一些限制…）我从来没有真正需要在Javascript中使用service workers，但是当我在Win32开发中使用Thread's时，当您需要更新GUI时，您会将消息发布到主线程。快速查看service workers，您似乎也想在这里执行相同的操作。从service worker向主线程发布消息。然后处理警报/DOM从那里更新。