使用Google Workbox进行离线后备

Question

我想为带有Workbox的pwa应用程序提供脱机后备。

this is my folder structure :
   /workbox-config.js
   /src/swInit.js 
   /src/sw.js 
   /src/offline.html
   /src/about.html
   /src/index.html 

我先预缓存所有html文件（about.html除外）：

 /workbox-config.js :
       module.exports = {
          "globDirectory": "src/",
          "globPatterns": [
               "**/*.{html,css,js,jpg,svg}" 
           ],
           "globIgnores": [
               "about.html"
            ],
            "swSrc": "src/swInit.js",
            "swDest": "src/sw.js"
       };

 /src/swInit.js :
     importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
     workbox.precaching.precacheAndRoute([]);
     workbox.routing.registerRoute(
        function(urlData){
           return (urlData.event.request.headers.get('accept').includes('text/html')) ;
        },
        function(args) { 
        return caches.match(args.event.request)
        .then(cacheRes=>{
            if(cacheRes) return cacheRes ;      
            else { 
                return fetch(args.event.request)
                .catch(msg=>{
                    return caches.match('./offline.html')
                    .then(res=>{
                        if(res) return res ;
                        else console.log('not') ;
                    })
                }) ;
            }
        });
    }
);

当我脱机并单击about.html时，我应重定向到offline.html页面，但出现“无法访问此站点”错误。 关于如何解决此问题的任何建议？