个人中心
gpt4 book ai didi

service-worker - 当资源未缓存且离线时，Workbox 重定向客户端页面

转载 作者：行者123 更新时间：2023-12-05 02:59:09 26 4
gpt4 key购买 nike

通常每当我阅读有关 PWA 的博客文章时，该教程似乎只是预缓存每一个 Assets 。但这似乎有点违背应用程序外壳模式，据我了解，它是:缓存最基本的必需品(仅应用程序外壳)，并在运行时缓存运行时。 (如果理解有误请指正)

假设我有这个单页应用程序，它是一个简单的 index.html 和一个网络组件:<my-app> .那<my-app>组件设置了一些看起来有点像这样的路由，我使用的是 Vaadin 路由器和 Web 组件，但我想问题会与使用 React 和 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文件还没有被缓存，用户没有网络，所以文件请求失败:让workbox将页面重定向到/offline路线。

最佳答案

选项 1(并非总是有用):据我所知并根据this answer ，您无法在服务 worker 中打开新窗口或更改浏览器的 URL。但是，如果 clients.openWindow() 函数从 notificationclick 中调用，您仅可以打开一个新窗口事件。

Option 2 (最难):您可以在 service worker 的 activate 事件中使用 WindowClient.navigate 方法，但是有点棘手，因为您仍然需要检查请求的文件是否存在于缓存中或不是。

选项 3(最简单且最黑客):否则，您可以使用新的 Request 对象响应离线页面:

const cacheOnly = new workbox.strategies.CacheOnly();
const networkFirst = new workbox.strategies.NetworkFirst();

workbox.routing.registerRoute(
  /\/posts.|\/articles/, 
  async args => {
    const offlineRequest = new Request('/offline.html');

    try {
      const response = await networkFirst.handle(args);
      return response || await cacheOnly.handle({request: offlineRequest});

    } catch (error) {
      return await cacheOnly.handle({request: offlineRequest})

    }
  }
);

然后在您的 offline.html 文件中重写浏览器的 URL:

 <head>
    <script>
        window.history.replaceState({}, 'You are offline', '/offline');
    </script>
 </head>

上述选项3中的逻辑将首先使用网络响应请求的URL。如果网络不可用，将回退到缓存，即使在缓存中找不到请求，也会取而代之的是获取 offline.html 文件。一旦 offline.html 文件被解析，浏览器 URL 将被替换为 /offline。

关于service-worker - 当资源未缓存且离线时，Workbox 重定向客户端页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58276661/

26 4 0
文章推荐： typescript - 泛型参数内的赋值
文章推荐： react-native - react native 纸主题与 react 导航不起作用
文章推荐： ios - 是否有其他人在 Xcode 11(和 11.1)中使用 AVAudioPlayer 获取此控制台消息？
文章推荐： svelte - 谁是我在 Svelte 3 中的父组件/父名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com