如何在workbox PWA中脱机

Question

我有一些问题，离线与工作箱，在我的主页，保存和关于它可以重新加载，如果我们要离线，但如果我点击一个页面去详细页面，它无法显示的恐龙和说没有互联网连接的页面，我必须如何解决它？

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js')；

>     if (workbox)
>       console.log(`Workbox berhasil dimuat`);
>     else
>       console.log(`Workbox gagal dimuat`);
>     
>       workbox.precaching.precacheAndRoute([
>         { url: '/index.html', revision: '1' },
>         { url: '/nav.html', revision: '1' },
>         { url: '/css/materialize.min.css', revision: '1' },
>         { url: '/js/materialize.min.js', revision: '1' },
>         { url: '/js/script.js', revision: '1' },
>         { url: '/pages/home.html', revision: '1'},
>         { url: '/pages/about.html', revision: '1'},
>         { url: '/pages/saved.html', revision: '1'},
>         { url: '/assets/img/oli2.jpg', revision: '1'},
>         { url: '/css/materialize.min.css', revision: '1'},
>         { url: '/js/materialize.min.js', revision: '1'},
>         { url: '/manifest.json', revision: '1'},
>         { url: '/js/nav.js', revision: '1'},
>         { url: '/js/api.js', revision: '1'},
>         { url: '/js/idb.js', revision: '1'},
>         { url: '/js/push.js', revision: '1'},
>         { url: '/js/db.js', revision: '1'},
>         { url: '/js/service-index.js', revision: '1'},
>         { url: '/js/service-team.js', revision: '1'},
>         { url: '/icon.png', revision: '1'},
>         { url: '/icons/icon-72x72.png', revision: '1'},
>         { url: '/icons/icon-96x96.png', revision: '1'},
>         { url: '/icons/icon-128x128.png', revision: '1' },
>         { url: '/icons/icon-144x144.png', revision: '1' },
>         { url: '/icons/icon-152x152.png', revision: '1' },
>         { url: '/icons/icon-192x192.png', revision: '1' },
>         { url: '/icons/icon-384x384.png', revision: '1' },
>         { url: '/icons/icon-512x512.png', revision: '1' },
>       ], {
>     
>     
>     });
>     workbox.routing.registerRoute(
>       new RegExp('/pages/'),
>       
>         workbox.strategies.staleWhileRevalidate({
>             cacheName: 'pages'
>         })
>     );
>     workbox.routing.registerRoute(
>       new RegExp('https://api.football-data.org/v2/'),
>         workbox.strategies.staleWhileRevalidate({
>             cacheName: 'apifootball'
>         })
>     );
>     
>     
>     self.addEventListener('push', function(event) {
>       var body;
>       if (event.data) {
>         body = event.data.text();
>       } else {
>         body = 'Push message no payload';
>       }
>       var options = {
>         body: body,
>         icon: '/icon.png',
>         vibrate: [100, 50, 100],
>         data: {
>           dateOfArrival: Date.now(),
>           primaryKey: 1
>         }
>       };
>       event.waitUntil(
>         self.registration.showNotification('Push Notification', options)
>       );
>     });

这是我的service-worker.js代码

Answer 1

如何尝试通过Workbox CLI创建预缓存文件？Workbox CLI只需几个步骤即可创建适合您环境正确设置的预缓存文件。