[Workbox在资源未缓存和脱机时重定向客户端页面

Question

[通常，当我阅读有关PWA的博客文章时，该教程似乎只是预缓存了每一项资产。但这似乎有点违背应用程序外壳模式，据我所知是：缓存所有必需品（仅应用程序外壳），并在运行时缓存运行时。 （如果我理解不正确，请纠正我）

想象一下我有这个单页应用程序，它是一个简单的index.html，带有一个Web组件：<my-app>。 <my-app>组件设置了一些路由，看起来有点像这样，例如使用Vaadin路由器和Web组件，但是我想问题是使用React with React Router或类似的东西是相同的。

router.setRoutes([
    {
        path: '/',
        component: 'app-main', // statically loaded
    },
    {
    path: '/posts',
        component: 'app-posts',
        action: () => { import('./app-posts.js');} // dynamically loaded
    },
    /* many, many, many more routes */
    {
        path: '/offline', // redirect here when a resource is not cached and failed to get from network
        component: 'app-offline', // also statically loaded
    }
]);

我的应用可能有很多路线，并且可能会变得很大。我不想立即预缓存所有这些资源，而只缓存我绝对需要的东西，因此在这种情况下：我的index.html，my-app.js，app-main.js和app-offline.js。我想在请求时在运行时缓存app-posts.js。

设置运行时缓存非常简单，但是当我的用户访问许多可能尚未缓存的路由之一时，就会出现我的问题（因为用户可能之前没有访问过该路由，因此js文件可能尚未加载/缓存），并且用户没有互联网连接。

在这种情况下（当尚未缓存路由并且没有网络时，我想发生的事情是将用户重定向到/offline路由，该路由由我的客户端路由器处理。我可以轻松地执行以下操作：import('./app-posts.js').catch(() => /* redirect user to /offline */)，但是我想知道是否有办法从工作箱本身中实现此目标？

简而言之：当js文件尚未缓存，并且用户没有网络，因此对该文件的请求失败时：让工作箱将页面重定向到/offline路由。

Answer 1

[如果您想重定向到另一个页面，而不仅仅是从缓存中提供脱机文件，则可以像这样使用clients.openWindow()函数（clients是服务工作者内部的全局对象） ：

event.waitUntil(clients.openWindow('/offline'))

[event是处理程序函数的参数中的对象：

workbox.routing.registerRoute(
  /\/posts.|\/articles/, 
 async args => {
   try {
     const response = await workbox.strategies.networkFirst.handle(args);
     return response || await args.event.waitUntil(clients.openWindow('/offline'));
   } catch (error) {
     return await args.event.waitUntil(clients.openWindow('/offline'));
   }
 }
);