重试动态导入失败？ （SPA / PWA）

Question

我正在处理的项目正在运行中，我有一个单页应用程序。我正在处理浏览器客户端上的导航路由，它使我可以在匹配路由时动态导入一些模块。我的路由设置看起来像这样：

router.setRoutes([
    {
        path: '/',
        component: 'app-main', // statically loaded
    },
    {
    path: '/posts',
        component: 'app-posts',
        action: () => { import('./app-posts.js').catch(() => Router.go('/offline');} // dynamically loaded
    },
    {
        path: '/offline', network
        component: 'app-offline', // also statically loaded
    }
]);

为清晰起见，这是“应用”的简单图片：

我正在我的服务工作者中缓存应用程序外壳程序，这意味着main页面和offline页面将被预先缓存，而posts页面应该在运行时被缓存（一旦请求，因此如果用户点击posts链接）

所以我的预缓存清单缓存：main.js，offline.js和我的index.html。

我碰到的地方是：

• 用户失去网络连接
• 用户试图进入posts页面
• 如果此动态导入之前未曾被请求和缓存过，则可能会失败（并且用户将被重定向到offline页面）

但是当我的用户再次获得网络连接时，单击posts链接，动态导入仍然会失败；我猜是因为浏览器对动态导入进行了重复数据删除。

这很遗憾，因为我的用户具有网络连接；这个请求应该成功！我能弄清楚如何处理此问题的唯一方法是让用户重新加载页面，然后再次请求posts页面。

所以我的问题是，我应该怎么做？

Answer 1

浏览器不会执行这种缓存/重复数据删除/任何操作。您可以通过从控制台调用import并在线/离线切换网络来轻松验证这一点。

因此问题很可能与您使用的框架有关。路由操作的第一个调用的缓存发生在框架中的某个位置。也许查阅文档？