javascript - 使用Google Workbox进行离线后备(offline fallback with google workbox)

Question

I want to provide an offline fallback for my pwa app with 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 

I precache all html files first(except about.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') ;
                    })
                }) ;
            }
        });
    }
);

When I am offline and click on about.html I should redirect to offline.html page but instead, I get "this site can't be reached" error.

(当我脱机并单击about.html时，我应该重定向到offline.html页面，但出现“无法访问此站点”错误。)

any suggestions on how I can fix this?

(关于如何解决此问题的任何建议？)

  ask by Ahmad Reza translate from so