安装 Service Worker 时如何将动态路由添加到缓存中?

IT技术 reactjs caching service-worker
2022-07-12 01:39:45

我已经使用 React.js 完成了我的 webapp 的创建。现在,我正试图让它离线工作。

我的应用程序定义了 2 条路线:

/: 主页

/:id: 详情页面

我已经使用 react-query 缓存了 API 调用。

现在,我只需要缓存我所有的静态文件和路由。

为此,我创建了 2 个文件:

  1. public/sw.js // 这个文件安装 service worker
  2. src/swDev.js // 这个文件注册了 service worker

代码:

src/swDev.js

const swDev = async () => {
  let swUrl = `${process.env.PUBLIC_URL}/sw.js`;
  const response = await navigator.serviceWorker.register(swUrl);
  console.log(response);
}

export default swDev;

public/sw.js

let CACHE_NAME = 'appV1';

this.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      cache.addAll([
        '/static/js/main.chunk.js',
        '/static/js/0.chunk.js',
        '/static/js/bundle.js',
        '/index.html',
        '/',
      ]);
    }),
  );
});

this.addEventListener('fetch', (event) => {
  if (!navigator.onLine) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response;
      }),
    );
  }
});

现在,当我运行我的应用程序并使其脱机时:

  1. 什么有效:

切换到离线后,当我刷新我的主页时,一切看起来都很好。其他页面的所有链接都可以正常工作。

  1. 什么不起作用:

切换到离线后,当我刷新我的详细信息页面时,我得到这个页面:

在此处输入图像描述

我知道在安装服务人员时我没有将详细信息路由添加到缓存。但我的详细信息页面是动态路由。有人可以告诉我,我应该为要缓存的动态路由添加什么?

0个回答
没有发现任何回复~