在离线状态下处理Progressive Web App中的提取请求

Question

我一直在关注Progressive Web Apps上的this tutorial，我试图找到一种在应用程序处于离线状态时向用户显示某种消息的方法。到目前为止我的代码几乎是一样的教程：

 
var cacheName = 'demoPWA-v1'; 
var filesToCache = [ 
    '/', 
    '/index.html', 
    '/js/app.js', 
    '/icons/pwa-256x256.png' 
]; 

self.addEventListener('install', function(e) { 
    console.log('[demoPWA - ServiceWorker] Install event fired.'); 
    e.waitUntil(
     caches.open(cacheName).then(function(cache) { 
      console.log('[demoPWA - ServiceWorker] Caching app shell...'); 
      return cache.addAll(filesToCache); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    console.log('[demoPWA - ServiceWorker] Activate event fired.'); 
    e.waitUntil(
     caches.keys().then(function(keyList) { 
      return Promise.all(keyList.map(function(key) { 
       if (key !== cacheName) { 
        console.log('[demoPWA - ServiceWorker] Removing old cache...', key); 
        return caches.delete(key); 
       } 
      })); 
     }) 
    ); 
    return self.clients.claim(); 
}); 

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); 
     }) 
    ); 
}); 

当我Application > Service Workers下检查在Chrome中离线复选框，我得到了几个错误的，就像你可以看到如下：

我不知道是否有某种方法来处理这些错误，并在此过程中向用户显示某种类型的消息，通知他们他们处于脱机状态。

Answer 1

下面是MODS的只是做一个警报，则可以更改警报使用jQuery或直接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'); 
      }); 
     }) 
    ); 
});