我已经使用 React.js 完成了我的 webapp 的创建。现在,我正试图让它离线工作。
我的应用程序定义了 2 条路线:
/
: 主页
/:id
: 详情页面
我已经使用 react-query 缓存了 API 调用。
现在,我只需要缓存我所有的静态文件和路由。
为此,我创建了 2 个文件:
- public/sw.js // 这个文件安装 service worker
- 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;
}),
);
}
});
现在,当我运行我的应用程序并使其脱机时:
- 什么有效:
切换到离线后,当我刷新我的主页时,一切看起来都很好。其他页面的所有链接都可以正常工作。
- 什么不起作用:
切换到离线后,当我刷新我的详细信息页面时,我得到这个页面:
我知道在安装服务人员时我没有将详细信息路由添加到缓存。但我的详细信息页面是动态路由。有人可以告诉我,我应该为要缓存的动态路由添加什么?