如何在 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 可以通过几个步骤为您的环境创建正确设置的预缓存文件。